Почему установка HTML5's CanvaspixelArray значения смедленно медленно медленно и как я могу сделать это быстрее?
-
24-09-2019 - |
Вопрос
Я пытаюсь выполнить некоторые динамические визуальные эффекты, используя манипулирование пикселя HTML 5 Pixel, но я бегаю в проблему, когда настройки пикселей в CanVaspixelArray смедленно медленно.
Например, если у меня есть код как:
imageData = ctx.getImageData(0, 0, 500, 500);
for (var i = 0; i < imageData.length; i += 4){
imageData.data[i] = buffer[i];
imageData.data[i + 1] = buffer[i + 1];
imageData.data[i + 2] = buffer[i + 2];
}
ctx.putImageData(imageData, 0, 0);
Профилирование с Chrome раскрывается, он работает на 44% медленнее, чем следующий код, где CanVaspixelArray не используется.
tempArray = new Array(500 * 500 * 4);
imageData = ctx.getImageData(0, 0, 500, 500);
for (var i = 0; i < imageData.length; i += 4){
tempArray[i] = buffer[i];
tempArray[i + 1] = buffer[i + 1];
tempArray[i + 2] = buffer[i + 2];
}
ctx.putImageData(imageData, 0, 0);
Я предполагаю, что причина этого замедления связана с преобразованием между JavaScript Doubles и внутренним unsigned 8bit целых чисел, используемых CanvaspixelArray.
- Это угадайте правильно?
- Есть ли в любом случае, чтобы уменьшить время, отработанные значения настройки в CanVaspixelArray?
Решение
Попробуйте кэшировать ссылку на data
Массив пикселей. Ваше замедление может быть связано с доступом дополнительных свойств к imageData.data
. Отказ Видеть эта статья для большего объяснения.
Например, это должно быть быстрее, что вы имеете в настоящее время.
var imageData = ctx.getImageData(0, 0, 500, 500),
data = imageData.data,
len = data.length;
for (var i = 0; i < len; i += 4){
data[i] = buffer[i];
data[i + 1] = buffer[i + 1];
data[i + 2] = buffer[i + 2];
}
ctx.putImageData(imageData, 0, 0);
Другие советы
Я не знаю, поможет ли это вам, потому что вы хотите манипулировать пикселями, но для меня в Firefox 3.6.8, просто призыв к Путимагератам был очень, очень медленным, без каких-либо манипуляций пикселей. В моем случае я просто хотел восстановить предыдущую версию изображения, которая была сохранена с Getimagedata. Слишком медленно.
Вместо этого я получил его, чтобы хорошо работать, используя ToDataurl / Handimage вместо этого. Для меня это достаточно быстро, чтобы я мог называть это в обработке события MouseMove:
Сохранить:
savedImage = new Image()
savedImage.src = canvas.toDataURL("image/png")
Восстановление:
ctx = canvas.getContext('2d')
ctx.drawImage(savedImage,0,0)
Похоже, вы делаете какое-то «блесток», так что, возможно, Дримаж или все-одновременно Putimagedata может помочь. Зацикливаю четверть миллиона раз, чтобы скопировать пиксели индивидуально, а не использовать массивные операции «Blatting», имеет тенденцию быть намного медленнее - а не только в JavaScript ;-).
Как ни странно, петли через 2D объектных массивов являются быстрее, чем 1D массива компенсации, и никаких объектов. Формат соответственно и посмотрите, если это поможет (в моем тестах, это было 20x быстрее).
(Heads up: этот скрипт может сбиться в браузере! Если вы запустите его, сидите на несколько минут, и позвольте ему сделать его)http://jsfiddle.net/hc52jx04/16/
function arrangeImageData (target) {
var imageCapture = target.context.getImageData(0, 0, target.width, target.height);
var imageData = {
data: []
};
imageData.data[0] = [];
var x = 0;
var y = 0;
var imageLimit = imageCapture.data.length;
for (var index = 0; index < imageLimit; index += 4) {
if (x == target.width) {
y++;
imageData.data[y] = [];
x = 0;
}
imageData.data[y][x] = {
red: imageCapture.data[index],
green: imageCapture.data[index + 1],
blue: imageCapture.data[index + 2],
alpha: imageCapture.data[index + 3]
};
x++;
}
return imageData;
}
function codifyImageData (target, data) {
var imageData = data.data;
var index = 0;
var codedImage = target.context.createImageData(target.width, target.height);
for (var y = 0; y < target.height; y++) {
for (var x = 0; x < target.width; x++) {
codedImage.data[index] = imageData[y][x].red;
index++;
codedImage.data[index] = imageData[y][x].green;
index++;
codedImage.data[index] = imageData[y][x].blue;
index++;
codedImage.data[index] = imageData[y][x].alpha;
index++;
}
}
return codedImage;
}
Больше информации: http://discourse.wicg.io/t/why-a-straight-array-for-canvas-getimagedata/1020/6.