Canvas在Firefox中使用toDataURL()返回空白图像，即使有.onload和回调函数。

Question

我在FireFox中使用toDataURL()函数时遇到了问题。

假设我有一个这样的base64图像：

var url = " data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMTkgMTE5Ij48Zz48Y2lyY2xlIGN4PSI1NyIgY3k9IjYyIiByPSI1NyIgc3R5bGU9ImZpbGw6IHJnYigxNjAsIDE2MSwgMTYzKTsgb3BhY2l0eTogMC42OyIvPjxjaXJjbGUgY3g9IjU3IiBjeT0iNTciIHI9IjU3IiBzdHlsZT0iZmlsbDogcmdiKDEyMywgMjEwLCAyNDApOyIvPjxjaXJjbGUgY3g9IjU3IiBjeT0iNTciIHI9IjQ1IiBzdHlsZT0iZmlsbDogcmdiKDI1NSwgMjU1LCAyNTUpOyIvPjx0ZXh0IGR4PSI1NyIgZHk9IjY1IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBzdHlsZT0iZm9udC1zaXplOjI1cHg7IGZpbGw6ICMyYjJmMmU7IGZvbnQtZmFtaWx5OiAnRElOUHJvIFJlZ3VsYXInLCBzYW5zLXNlcmlmOyBmb250LXdlaWdodDogYm9sZCI+MTUlPC90ZXh0PjwvZz48L3N2Zz4=";

接下来我想要调整它的大小并发送新的uri：

function getImageUri(url, callback) {
  image = new Image();

  image.onload = function() {
    var image = this; 
    var canvas = document.createElement('canvas'),
        context = canvas.getContext('2d'),
        dataURL;

    context.drawImage(image, 0, 0, 60, 60);
    callback(canvas.toDataURL());
  }

  image.src = url;

}

最后，我只需调用它以获取新的URI。

getImageUri(url, function (uri) {
    console.log(uri);
    document.getElementById('circle').innerHTML = "<img src=" + uri + ">";
});

这里是示例的CodePen。它在谷歌浏览器中可以工作，但在火狐浏览器中不能工作。

我在这里搜索了很多类似的问题，大多数情况下原因是使用图像而不等待其加载，但我已经有了.onload，对吧？

我也尝试了与这个问题相同的操作，但是火狐浏览器仍然只显示透明的图像。请帮忙！

- Paradoxetion

Answer 1

在Firefox中有一个关于这个问题的漏洞：当绘制一个没有@width或@height属性的SVG图像时，drawImage()会默默失败。

您可以通过向SVG添加（想一想）width和height来解决它：

<svg
    xmlns="http://www.w3.org/2000/svg"
    width="119" height="119" viewBox="0 0 119 119">
    …

更新的 Codepen

- Ry-

---

太美了。谢谢 =) - Paradoxetion

如果我可以的话，这并不是一个真正的错误...或者至少不是Firefox的错误。<svg>的宽度和高度属性的默认值为100％。现在，在canvas的drawImage情况下，没有地方提到这些值应该相对于什么。Chrome会选择一些随机值，但我从来没有能够确定它们来自哪里...而且据我所知，他们是唯一这样做的人。 - Kaiido

@Kaiido：是的，我并不是想暗示这实际上是一个 bug，只是说它在 bug 跟踪器中。Chrome 的行为在其中得到了讨论。 - Ry-

是的，只是想澄清一下，并添加一个注释，即必须使用绝对单位，所有相对单位都会失败，就像没有使用一样。 - Kaiido

Answer 2

这是我的代码。

const can = document.createElement('canvas');
    // 设置canvas画布大小
    can.width = 240;
    can.height = 140;

    const cans = can.getContext('2d');
    cans.rotate(-25 * Math.PI / 180); // 水印旋转角度
    cans.font = '1.2rem Vedana';
    cans.fillStyle = '#666';
    cans.textAlign = 'center';
    cans.textBaseline = 'Middle';
    cans.fillText(currentUserName, can.width / 2, can.height); // 水印在画布的位置x，y轴
    cans.fillText(currentUserLoginName, can.width / 2, can.height + 25);


    const div = document.createElement('div');
    div.style.pointerEvents = 'none';
    div.style.top = '20px';
    div.style.left = '0px';
    div.style.opacity = '0.20';
    div.style.position = 'fixed';
    div.style.zIndex = '100000';
    div.style.width = document.documentElement.clientWidth + 'px';
    div.style.height = document.documentElement.clientHeight + 'px';
    div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat';

    document.body.appendChild(div);

我遇到了相同的问题，toDataURL在Chrome上可以正常工作，在IE中不行。它返回了一个我设置的宽度和高度为空白图像。结果是这样的。

 cans.font = '1.2rem Vedana';

在IE中不支持...... 我将其更改为

cans.font = '14px';

和工作 啊啊啊啊啊啊啊啊

- Hanz