如何從src屬性獲取圖像數據？

嗨我試圖從jQuery使用jQuery標籤獲取圖像數據。如何從src屬性獲取圖像數據？

var imagedata = $('.avatar_store img').attr('src');

我收到未定義爲返回此imagedata.How閱讀本圖像用base64 BLOB format.Can請你幫我？提前致謝。

來源

2016-10-18 Jothi Lakshmi

添加烏爾標籤與此類avatar_store IMG –

你確定你得到的元素選擇器相匹配？檢查'$（'。avatar_store img'）。length' –

[canvas.toDataURL（）SecurityError]（http://stackoverflow.com/questions/20424279/canvas-todataurl-securityerror） –

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"));

來源

CONVERT Image url to Base64

來源

2016-10-18 10:58:47

這很好，如果你添加一些解釋或更好過去鏈接你複製答案http://stackoverflow.com/questions/22172604/convert-image-url-to-base64/#answer-22172860 –

道歉@Satindersingh。從下次開始請記住。 –

所以這似乎工作，但瀏覽器給我一個關於污染的畫布的安全錯誤。有沒有辦法解決這個問題？ – Rozgony

可以使用帆布得到的圖像數據：

var img = new Image(); 
img.crossOrigin = 'Anonymous'; 
img.onload = function() { 
    var canvas = document.createElement('canvas'), 
     ctx = canvas.getContext('2d'), 
     dataURL; 

    canvas.height = this.height; 
    canvas.width = this.width; 
    ctx.drawImage(this, 0, 0); 

    dataURL = canvas.toDataURL(outputFormat); 
    console.log('base64', dataURL); 

    canvas.toBlob(function(blob) { 
     console.log('blob', blob); 
    }); 
}; 
img.src = $('.avatar_store img').attr('src');

來源

2016-10-18 10:55:30

如何從src屬性獲取圖像數據？

回答

相關問題