CONVERT圖像URL到Base64

使用圖像文件，我得到的圖像的URL，需要發送到web服務。從那裏，圖像必須保存在我的系統本地。CONVERT圖像URL到Base64

的代碼我使用：

var imagepath = $("#imageid").val();// from this getting the path of the selected image 

that var st = imagepath.replace(data:image/png or jpg; base64"/"");

如何將圖像URL轉換爲Base64？

來源

2014-03-04 user3379089

[你如何在JavaScript中將字符串編碼爲Base64？]（http://stackoverflow.com/questions/246801/how -can-encode-a-string-to-base64-in-javascript） –

如果你只是想對url進行編碼而不是圖像數據，你可能會在這裏找到你的答案：http://stackoverflow.com/questions/246801/how-can-you-encode-a-string-to-base64-in-javascript –

HTML

<img id=imageid src=https://www.google.de/images/srpr/logo11w.png>

的JavaScript

function getBase64Image(img) { 
    var canvas = document.createElement("canvas"); 
    canvas.width = img.width; 
    canvas.height = img.height; 
    var ctx = canvas.getContext("2d"); 
    ctx.drawImage(img, 0, 0); 
    var dataURL = canvas.toDataURL("image/png"); 
    return dataURL.replace(/^data:image\/(png|jpg);base64,/, ""); 
} 

var base64 = getBase64Image(document.getElementById("imageid"));

這種方法需要在畫布元件，這是perfectly supported。

HTMLCanvasElement.toDataURL()的MDN參考。
和官方W3C documentation。

來源

2014-03-04 13:09:15 WoIIe

當我在JS中創建並添加''時，這不起作用，我相信。因爲我得到了'未捕獲的DOMException：未能在'HTMLCanvasElement'上執行'toDataURL'：受污染的畫布可能不會被導出。 – Rubinous

@Rubinous - 請參考[這個問題]（http://stackoverflow.com/questions/20424279/canvas-todataurl-securityerror）。我不認爲你的問題/例外與我的代碼有關。否則，請隨時證明我錯了。 – WoIIe

這是OP問題的正確答案。爲了我的緣故，我想在CSS'background-image'中使用'toDataURL'的實際結果。所以，我**需要所有前面的'data：image/png; base64，'東西，所以我直接返回dataURL的值（我不需要RegEx替換）。謝謝！ –

這是你的HTML的

<img id="imageid" src=""> 
    <canvas id="imgCanvas" />

的Javascript應該是─

var can = document.getElementById("imgCanvas"); 
    var img = document.getElementById("imageid"); 
    var ctx = can.getContext("2d"); 
    ctx.drawImage(img, 10, 10); 
    var encodedBase = can.toDataURL();

'encodedBase' 包含圖片的base64編碼。

來源

2014-03-04 13:11:26

<input id="inputFileToLoad" type="file" onchange="encodeImageFileAsURL();" /> 
<div id="imgTest"></div> 
<script type='text/javascript'> 
    function encodeImageFileAsURL() { 

    var filesSelected = document.getElementById("inputFileToLoad").files; 
    if (filesSelected.length > 0) { 
     var fileToLoad = filesSelected[0]; 

     var fileReader = new FileReader(); 

     fileReader.onload = function(fileLoadedEvent) { 
     var srcData = fileLoadedEvent.target.result; // <--- data: base64 

     var newImage = document.createElement('img'); 
     newImage.src = srcData; 

     document.getElementById("imgTest").innerHTML = newImage.outerHTML; 
     alert("Converted Base64 version is " + document.getElementById("imgTest").innerHTML); 
     console.log("Converted Base64 version is " + document.getElementById("imgTest").innerHTML); 
     } 
     fileReader.readAsDataURL(fileToLoad); 
    } 
    } 
</script>

來源

2016-09-02 10:11:39

查看這個答案：https://stackoverflow.com/a/20285053/5065874通過@HaNdTriX

基本上，他實現了這個功能：

function toDataUrl(url, callback) { 
    var xhr = new XMLHttpRequest(); 
    xhr.onload = function() { 
     var reader = new FileReader(); 
     reader.onloadend = function() { 
      callback(reader.result); 
     } 
     reader.readAsDataURL(xhr.response); 
    }; 
    xhr.open('GET', url); 
    xhr.responseType = 'blob'; 
    xhr.send(); 
}

而在你的情況，你可以使用它像這樣：

toDataUrl(imagepath, function(myBase64) { 
    console.log(myBase64); // myBase64 is the base64 string 
});

來源

2017-03-25 10:26:37

在這裏，它不會工作，因爲有時你會得到CROS原始請求錯誤，使用HttpRequest從URL接收圖像進行調用。 –

blob是一種處理圖像的可怕方式，因爲它使用「截圖」來製作圖像。這意味着圖像獲得差異大小取決於用戶的屏幕分辨率 – TheCrazyProfessor

CONVERT圖像URL到Base64

回答

相關問題