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

Question

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

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

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

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

来源

将图像 url 转换为 Base64