来自firebase存储URL的toDataURL显示空白图像[重复]

Question

我正在尝试将从 Firebase 存储获取的图像 URL 转换为数据 URL。但是当我打开数据 URL 时，它会在新窗口中显示一个空白图像。我需要帮助来解决这个问题。

var dataURL;
var imageurl;
var folder = formName + "/" + Insti + "/" + tenant + "/" + "Page 3";
var storageRef = firebase.storage().ref();
var listRef = storageRef.child(folder);

listRef.listAll()
  .then((res) => {
    res.items.forEach((itemRef) => {

      itemRef.getDownloadURL().then(function(imageurl) {

        console.log(imageurl)
        var img = new Image();
        var canvas = document.getElementById("image1");
        var ctx = canvas.getContext("2d");

        img.onload = function() {
          canvas.height = canvas.width * (img.height / img.width);

          var oc = document.createElement('canvas'),
            octx = oc.getContext('2d');
          oc.width = img.width * 0.5;
          oc.height = img.height * 0.5;
          octx.drawImage(img, 0, 0, oc.width, oc.height);
          octx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5);
          ctx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5,
            0, 0, canvas.width, canvas.height);

        };

        img.src = imageurl;
        dataURL = canvas.toDataURL("image/png");
        console.log(dataURL)

      });
    });
  }).catch((error) => {
    // Uh-oh, an error occurred!
  });

<canvas width="300" height="200" id="image1"></canvas>

Answer 1

在图像被绘制到画布之前调用canvas.toDataURL()。所以你导出一个空白画布。只需将toDataURL 移动到img.onload 回调中即可。

img.onload = function () {
    canvas.height = canvas.width * (img.height / img.width);

    var oc = document.createElement('canvas'),
        octx = oc.getContext('2d');
    oc.width = img.width * 0.5;
    oc.height = img.height * 0.5;
    octx.drawImage(img, 0, 0, oc.width, oc.height);
    octx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5);
    ctx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5,
        0, 0, canvas.width, canvas.height);

    dataURL = canvas.toDataURL("image/png"); // <-- Here
    console.log(dataURL);
};

img.src = imageurl;