Javascript 来自绝对映像路径的Base64数据

我试图从图像url获取base64数据，但它总是返回“数据：”

代码如下：

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

---

使用

img.onload

在图像加载后执行代码。使用回调函数报告dataURL

function getBase64Image(imgurl, callback) {
  var canvas = document.createElement("canvas");
  var ctx = canvas.getContext("2d");
  var img = new Image();
  img.onload = function() {
      canvas.width = img.width;
      canvas.height = img.height;
      ctx.drawImage(img, 0, 0);
      var dataURL = canvas.toDataURL("image/png");
      dataURL = dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
      if (typeof callback === 'function') {
        callback(dataUrl);
      }
  };
  img.src = imgurl;
}

---

使用

img.onload

在图像加载后执行代码。使用回调函数报告dataURL

function getBase64Image(imgurl, callback) {
  var canvas = document.createElement("canvas");
  var ctx = canvas.getContext("2d");
  var img = new Image();
  img.onload = function() {
      canvas.width = img.width;
      canvas.height = img.height;
      ctx.drawImage(img, 0, 0);
      var dataURL = canvas.toDataURL("image/png");
      dataURL = dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
      if (typeof callback === 'function') {
        callback(dataUrl);
      }
  };
  img.src = imgurl;
}

---

等待图像加载！等待图像加载！在加载图像之前，您无法获取

img.width

img.src

应放在

onload

callback之后。Refer-SecurityError:操作不安全。@MohitBumb，您的映像必须托管在同一个域下！它来自Amazon S3，在图像加载之前，您无法获得

img.width

img.src

应放在

onload

callback之后。Refer-SecurityError:操作不安全。@MohitBumb，您的映像必须托管在同一个域下！它来自亚马逊S3