6

我有一个实验问题。我想用很多div's 制作图像，div 有一个1px widthand height。我从 中获得了图像的像素数据canvas context，创建了 div 并为每个 div 赋予了值background-color，这意味着 div 的计数等于图像像素计数，但是如果有例如分辨率为 100x56 的图像就可以了，但如果更多比这，浏览器呈现html非常慢。下面的部分代码

    var fragment = document.createDocumentFragment();
    var data = context.getImageData(0, 0, canvas.width, canvas.height).data;
    for (var i = 0; i < data.length; i += 4) {

        var red = data[i];
        var green = data[i + 1];
        var blue = data[i + 2];

        var div = document.createElement('div');
        div.style.width = '1px';
        div.style.height = '1px';
        div.style.float='left'
        div.style.backgroundColor = 'rgb(' + red + ',' + green + ',' + blue + ')';
        fragment.appendChild(div);

    }
   cnt.appendChild(fragment)

我知道这个问题不太适用，但我想知道是否有任何情况可以在浏览器中更快地渲染很多元素（我使用 Chrome）还是独立于浏览器？

Ps：我同事说“这样的Silverlight没有问题，你可以添加50000个元素就可以了”，我想给他“我的答案”

谢谢

4

2 回答 2

3

您不应该在每个循环上附加。用输出构建一个字符串，然后做一个追加。我还会删除 document.createElement 并手动构建它。

另一个问题是每次循环时都要声明 RGB 变量。如果可能，在循环外声明任何变量。

于 2013-09-12T12:58:41.950 回答
0

如果实验只使用 html 元素，我建议您从画布中获取 base 64 图像，然后将其添加到 img 标签中。

var src = canvas.toDataURL();
var img = document.getElementsById('image_id');
img.src = src;
img.onload = function () {
  console.log('image loaed');
};

如果您需要动态创建图像

var src = canvas.toDataURL();
var newImg = document.createElement("img");
newImg.src = src;
img.onload = function () {
  document.body.appendChild(newImg);
};
于 2013-09-12T12:58:30.660 回答