Javascript - 图像数据处理和div渲染

Question

所以我为自己创造的挑战就是这样。

我有一张源照片:

我正在映射颜色值并使用 div 创建它的像素化表示

结果如下:

我使用的代码是:

'use strict';

var imageSource = 'images/unicorn.jpg';

var img = new Image();
img.src = imageSource;
var canvas = $('<canvas/>')[0];
canvas.width = img.width;
canvas.height = img.height;
canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);
var context = canvas.getContext('2d');

console.log('img height: ' + img.height);
console.log('img width: ' + img.width);

var pixelDensity = 70;

var timerStart = new Date();


for (var i = pixelDensity/2; i < img.height; i += (img.height/pixelDensity) ) {
    $('.container').append($('<div class="row">'));
    for(var j = pixelDensity/2; j < img.width; j += img.height/pixelDensity) {
        var value = context.getImageData(j, i, 1, 1).data;
        var colorValue = 'rgb(' + value[0] + ', ' + value[1] + ', ' + value[2] + ')';
        $('.row:last').append($('<div class="block">').css({'background-color' : colorValue}));
    }
}

var timerStop = new Date();

console.log(timerStop - timerStart + ' ms');

pixelDensity 变量控制颜色样本的接近程度。数字越小，样本越少，产生结果所需的时间就越少。当您增加数量时，样本会增加，而函数会大大减慢。

我很想知道是什么让这件事需要这么长时间。我看过稍微类似的项目——最著名的是 Jscii - 处理图像数据的速度更快，但我无法弄清楚提供额外性能的区别是什么。

感谢您的帮助!

Answer 1

主要问题是您在循环中将 DOM 元素附加到页面。如果您在将所有数据实际添加到页面之前使用所有数据创建包装器元素，则运行速度会快得多。

编辑:我还注意到您为每个像素调用 context.getImageData，这是大部分时间所花的时间。相反，您应该将图像数据缓存在变量中并从中获取颜色值。您还需要像@Travis J 提到的那样缓存循环条件并对其进行舍入:

var wrapper = $('<div class="container">');
var imgData = context.getImageData(0, 0, img.width, img.height).data;
var getRGB = function(i) { return [imgData[i], imgData[i+1], imgData[i+2]]; };
var start = Math.round(pixelDensity/2),
    inc = Math.round(img.height/pixelDensity);

for (var i = start; i < img.height; i += inc) {
    var row = $('<div class="row">');
    for(var j = start; j < img.width; j += inc) {
        var colorValue = getRGB((i * (img.width*4)) + (j*4));
        row.append($('<div class="block">').css({'background-color' : 'rgb('+(colorValue.join(','))+')'}));
    }
    wrapper.append(row);
}

$('body').append(wrapper);

这会将时间从 6-9 秒减少到 600-1000 毫秒。您还可以使用纯 javascript 代替 jquery 来操作 DOM 元素，以使其更快。