如何从 src 属性中获取图像数据？答案

【问题标题】：How to get image data from src attribute?如何从 src 属性中获取图像数据？
【发布时间】：2021-05-20 18:49:01
【问题描述】：

您好，我正在尝试使用 jquery 从 img 标签获取图像数据。

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

我无法定义为返回到此图像数据。如何将此图像读取为 base64 格式的 blob。您能帮帮我吗？提前致谢。

【问题讨论】：

用这个类 avatar_store img 添加你的标签
你确定你的元素匹配你的选择器吗？检查$('.avatar_store img').length
canvas.toDataURL() SecurityError的可能重复

标签： jquery image

【解决方案1】：

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

【讨论】：

最好在复制答案stackoverflow.com/questions/22172604/…的链接之后添加一些解释或更好
道歉@Satindersingh。下次会记住的。
所以这似乎可行，但浏览器给了我一个关于受污染画布的安全错误。有办法解决吗？
@Rozgony 而不是document.createElement("canvas"); 改成document.getElementById('myCanvas'); 这应该会消除基于安全性的错误

【解决方案2】：

可以使用canvas获取图片数据：

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

【讨论】：