javascript - 无法绘制由 "content"或 "background-image"而不是 "src"指定的图像

Question

由于无法使用 src DOM 属性指定图像集，因此我使用 -webkit-image-set 来指定图像内容，例如这个:

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

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

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内容反射(reflect)实际图像。

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

Answer 1

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

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

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