6

実験問題があります。をたくさん使って画像を作りたいdivのですが、divにはと が1px widthあり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

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 に答える