我有一个像素数组,我想将其绘制到 Canvas 上,而不使用 putImageData,因为该函数会忽略剪辑数据。
因此,为了完成这项工作,我将像素数组转换为数据 URL,然后将 URL 附加到图像上,然后将其绘制到 Canvas 上,如下所示:
var ctx = {
display: document.querySelector('canvas#display').getContext('2d'),
convert: document.querySelector('canvas#convert').getContext('2d')
}
var image_data = THE_IMAGE_DATA_THAT_I_ALREADY_HAVE;
ctx.convert.putImageData(image_data, 0, 0);
var image_data_URL = ctx.convert.canvas.toDataURL('image/png');
var converter_image = document.querySelector('img#converter-image');
converter_image.onload = function () {
ctx.display.save();
ctx.display.beginPath();
ctx.display.arc(320, 240, 240, 0, Math.PI*2, true);
ctx.display.clip();
ctx.display.drawImage(converter_image, 0, 0, 640, 480);
ctx.display.restore();
}
converter_image.src = image_data_URL;
但是,这会带来非常糟糕的性能,特别是因为我想以 60/秒的速度执行此操作。
一定还有别的办法吧?
最佳答案
解决方法是在屏幕外 Canvas 中使用 getImageData/putImageData 绘制像素,然后将屏幕外 Canvas 绘制回 Canvas 中。
更多信息:
Pixel drawing with putImagedata (click on the blank in top of the code to launch it)
关于javascript - 使用drawImage在canvas上绘制像素数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12675979/