无法通过“content”或“background-image”而不是“src”指定drawImage

Question

由于无法使用src DOM 属性指定图像集，我使用-webkit-image-set 指定图像内容，如下所示：

<img id="imgTest" />
...
#imgTest {
    background-image: -webkit-image-set(url(icon1x.jpg) 1x,url(icon2x.jpg) 2x);
}

图像内容加载良好，具体取决于设备像素比。现在，我需要将图像转储到画布中。这是我的代码：

var c = document.createElement("canvas");
var ctx = c.getContext("2d");
c.width = 20;
c.height = 20;
ctx.drawImage(document.getElementById("imgTest"), 0, 0);

// Let's see what we've got in the canvas.
var data = ctx.getImageData(0, 0, 2, 2).data;

此时，data 是一个零填充的数组（实际图像显然不是空的）。如果我将#imgTest 的src 属性设置为例如icon2x.png，data 内容反映实际图像。

知道是否可以将包含-webkit-image-set 的图像内容转储到cavas 中？

Answer 1

我不熟悉 -webkit-image-set，也不熟悉您的代码，无法重新创建您的建议。所以最终，我不知道。

但是，我对 HTML 和 javascript 足够熟悉，可以猜测图像元素要么尚未加载，要么背景和实际图像具有不同的数据空间，并且 drawImage() 使用实际图像数据.所以我建议使用 src 属性，并在图像或主体完成加载时使用和 onload 处理程序来绘制图像。

另一种选择是使用 src 属性集创建一个隐藏的图像元素，并在加载后使用该数据。