Вот так я делаю попиксельную корректировку изображений: помимо основного холста создаётся ещё один, невидимый (buffer). На нём рисуется изображение, затем с него снимается ImageData, которая и служит материалом для обработки. Обработанную имадждату вставляем на основной холст методом putImageData.
//
var canvas = $('canvas');
var context = canvas.getContext('2d');
var buffer = $('buffer');
var buff = buffer.getContext('2d');
var img = new Image();
img.src = "slow.gif";
buff.drawImage(img, 0, 0);
var imgd = buff.getImageData(0, 0, img.width, img.height);
var pix = imgd.data;
for (var i = 0; i < pix.length; i += 4) {
// do something
}
context.putImageData(imgd, 0, 0);
Меня не устраивают две вещи:
1) Почему я должен использовать костыль с невидимым канвасом даже если просто хочу получить имадждату одной картинки? Нет какого-нибудь метода вроде getDataFromImage?
2) Метод putImageData слишком медленный, плюс он не накладывается на контекст, а _заменяет_ его содержимое в своём прямоугольнике. Это значит, что даже своими прозрачными пикселами он затирает окружение. Есть ли способ обратно превратить объект ImageData в объект Image?
