尋找toDataUrl指導

切入追逐...我想拍攝一個本地圖像文件，使用javascript從該圖像創建一個dataurl值。我不完全確定如何去做這件事。我已經看了一堆代碼示例，並且我不確定他們在畫布上做了些什麼。我還希望能夠訪問本地文件嗎？我敢打賭，這將是一個安全風險，JavaScript將無法伸出它的沙盒。尋找toDataUrl指導

從本質上講，與真正的JS轉述，這就是我希望做......

var imgTest = "/tmp/prev/localimage.jpeg"; 
var imgTest = imgTest.toDataUrl; 
document.write(imgTest);

最終結果有望被打印到網頁上的dataurl字符串，「數據：圖像/ JPEG; base64，/ 9j/4AAQSkZJRgABAQE ...「

這是否有意義？我只想將這個dataurl信息放入一個變量中。

非常感謝您的好建議StackOverflow！「

來源

2013-01-10 0xhughes

你們是不是要做到這一點沒有任何呼叫服務器，即對於圖像與數據轉換：圖像格式？另外，你問的是訪問本地文件還是轉換到base64？ – Dancrumb

是的，這將是一個僅限本地的環境。一切都完成客戶端。我想完成本地文件到base64的轉換。我懷疑我可以用JavaScript訪問本地文件。我想也許我可以從DOM中以某種方式拉取圖像，並將其轉換爲base64？我認爲這需要與一個畫布元素進行一些交互，但我不太清楚該過程的工作原理......謝謝@Dancrumb！ – 0xhughes

」toDataURL()方法要求繪製到畫布上的任何圖像都託管在與執行代碼的域相同的Web服務器上，如果不符合此條件，則會引發SECURITY_ERR異常。 Source

對我來說，這聽起來像是不適用於本地文件，並且用於從HTML5畫布上繪製的內容生成編碼圖像數據。

看Mozilla documentation確認toDataURL()是專門爲畫布對象而不是圖像對象的函數。

如果我理解正確，您可以在相同尺寸的畫布上繪製圖像，然後使用toDataURL（）方法生成編碼數據。這當然，假設圖像文件位於與JavaScript代碼相同的位置。

來源

2013-01-14 15:25:28 Quantastical

我選擇這個作爲答案，因爲通過一次又一次地將我的頭撞在牆上，我根本無法使用JS訪問本地資源以滿足我的需求。我經過慘痛的教訓才學到這個！你的回答最符合我的情況。我的工作最終是使用python在隱藏跨度中的html文檔中內聯生成base64數據，避免JS完全用於創建base64數據！感謝大家的所有有用答案！我瞭解了有關文件閱讀的內容，這將在未來的項目中得心應手！ – 0xhughes

您可以向用戶提供輸入[type = file]，以供用戶選擇要使用的圖像。

之後，您可以通過FileReader訪問圖像數據。

這是一個很好的教程：http://www.html5rocks.com/en/tutorials/file/dndfiles/

該API的FileReader還提供了readAsDataURL方法，它應該讓你的Base64編碼字符串。

來源

2013-01-14 15:30:46 dave

MDN有pretty neat and simple example演示你想要什麼：

<!doctype html> 
<html> 
<head> 
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /> 
<title>Image preview example</title> 
<script type="text/javascript"> 
oFReader = new FileReader(), rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i; 

oFReader.onload = function (oFREvent) { 
    document.getElementById("uploadPreview").src = oFREvent.target.result; 
}; 

function loadImageFile() { 
    if (document.getElementById("uploadImage").files.length === 0) { return; } 
    var oFile = document.getElementById("uploadImage").files[0]; 
    if (!rFilter.test(oFile.type)) { alert("You must select a valid image file!"); return; } 
    oFReader.readAsDataURL(oFile); 
} 
</script> 
</head> 

<body onload="loadImageFile();"> 
    <form name="uploadForm"> 
    <table> 
     <tbody> 
     <tr> 
      <td><img id="uploadPreview" style="width: 100px; height: 100px;" src="data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%3F%3E%0A%3Csvg%20width%3D%22153%22%20height%3D%22153%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%20%3Cg%3E%0A%20%20%3Ctitle%3ENo%20image%3C/title%3E%0A%20%20%3Crect%20id%3D%22externRect%22%20height%3D%22150%22%20width%3D%22150%22%20y%3D%221.5%22%20x%3D%221.500024%22%20stroke-width%3D%223%22%20stroke%3D%22%23666666%22%20fill%3D%22%23e1e1e1%22/%3E%0A%20%20%3Ctext%20transform%3D%22matrix%286.66667%2C%200%2C%200%2C%206.66667%2C%20-960.5%2C%20-1099.33%29%22%20xml%3Aspace%3D%22preserve%22%20text-anchor%3D%22middle%22%20font-family%3D%22Fantasy%22%20font-size%3D%2214%22%20id%3D%22questionMark%22%20y%3D%22181.249569%22%20x%3D%22155.549819%22%20stroke-width%3D%220%22%20stroke%3D%22%23666666%22%20fill%3D%22%23000000%22%3E%3F%3C/text%3E%0A%20%3C/g%3E%0A%3C/svg%3E" alt="Image preview" /></td> 
      <td><input id="uploadImage" type="file" name="myPhoto" onchange="loadImageFile();" /></td> 
     </tr> 
     </tbody> 
    </table> 

    <p><input type="submit" value="Send" /></p> 
    </form> 
</body> 
</html>

Try it out.

來源

2013-01-14 15:43:36

您可以創建一個圖像對象，它畫到畫布上，然後調用toDataURL（）在畫布上。像這樣：

function draw() { 
    var dataURL; 
    var that = this; 
    var canvas = document.getElementById('canvas'); 
    var context = canvas.getContext('2d'); 
    var img = new Image(); 
    img.onload = function() { 
    context.drawImage(img,0,0); 
    dataURL = canvas.toDataURL(); 
    // can call some other function once the image is loaded and you have the dataURL, e.g. 
    that.onDataURL(dataURL); 
    }; 
    img.src = '/files/4531/backdrop.png'; 
} 

function onDataURL(dataURL) { 
    console.log(dataURL); 
}

來源

2013-01-16 08:09:15 pjdanfor

尋找toDataUrl指導

回答

相關問題