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

Posted 2023-03-10

【中文标题】来自firebase存储URL的toDataURL显示空白图像[重复]

【英文标题】：toDataURL from firebase storage URL displays blank image [duplicate]

【发布时间】：2021-06-06 02:27:01

【问题描述】：

我正在尝试将从 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>

【参考方案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;

【讨论】：

我收到此错误：未捕获的 DOMException：无法在“htmlCanvasElement”上执行“toDataURL”：可能无法导出受污染的画布。在 Image.img.onload

***.com/questions/22710627/…