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是一个零填充数组（实际图像显然不是空的）。如果我将src的{{1}}属性设置为#imgTest icon2x.png内容反映了实际图片。

是否有可能将包含data的图像的内容转储到卡瓦斯？

Answer 1

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

Hoewever，我对HTML和javascript非常熟悉，猜测图像元素还没有加载，或者背景和实际图像有不同的数据空间，而drawImage（）使用的是实际图像图像数据。所以我建议使用src属性，并使用和onload处理程序在图像或主体完成加载时绘制图像。

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

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

1 个答案: