1

由于无法使用srcDOM 属性指定图像集，因此我使用-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属性设置为#imgTesteg icon2x.png，则data内容会反映实际图像。

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

4

1 回答 1

0

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

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

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

于 2013-01-08T02:37:36.800 回答