在浏览器中调整ImageData大小的快速方法? [英] Fast way to resize ImageData in browser?
问题描述
我有一个600 x 400像素的画布,它返回一个数据长度为960,000(600 * 400 * 4)的ImageData.有什么办法可以缩小宽度和宽度吗?高度说10倍,我想得到一个ImageData,其数据长度为9600(60 * 40 * 4).
I have a canvas of 600 x 400 pixels, which returns an ImageData with data length of 960,000 (600*400*4). Is there any way to downscale both width & height say 10 times, I would like to get as a result an ImageData whose data length is 9600 (60*40*4).
const canvas = document.getElementsByTagName("canvas")[0]
var ctx = canvas.getContext("2d");
const origImageData = ctx.getImageData(0, 0, canvas.width, canvas.height)
origImageData
// => ImageData {data: Uint8ClampedArray(960000), width: 600, height: 400}
const smallImageData = downscale(origImageData, 60, 40);
smallImageData
// => ImageData {data: Uint8ClampedArray(9600), width: 60, height: 40}
我需要生成的ImageData.data数组以进行进一步的操作. 该方法将被循环调用,因此如果速度快的话会很好.
I need resulting ImageData.data array for further manipulation. This method would be called in a loop so it would be good if its fast.
修改 这是建议的方法,我不确定它是否正确:
Edit This is the suggested approach, which I'm not sure it's correct:
var canvas2 = document.createElement('canvas');
canvas2.width = canvas.width/10;
canvas2.height = canvas.height/10;
var ctx2 = canvas2.getContext('2d');
// Step that I found confusing
// Is the new image data being created?
ctx2.putImageData(origImageData, 0, 0);
// Which image data I'm getting here resized or part of original ?
ctx2.getImageData(0,0, canvas2.width, canvas2.height)
编辑2 似乎没有用,没有调整小画布的大小,而只是裁切了 https://codepen.io/bobiblazeski/full/drrQoB
Edit 2 It doesn't seem to be working, small canvas isn't resized, but only a cropped https://codepen.io/bobiblazeski/full/drrQoB
推荐答案
经过一番摆弄之后,我发现了使用此以回答为起点.基本上,您可以将较大的画布绘制为较小的画布,然后从中获取ImageData.
After some fiddling around I found a solution using this answer as a starting point. Basically you could just draw bigger canvas into a smaller canvas, and then get ImageData from it.
const bigCanvas = document.getElementById("big");
const bigContext = bigCanvas.getContext("2d");
const smallContext = document.getElementById("small").getContext("2d");
smallContext.scale(0.5, 0.5);
smallContext.drawImage(bigCanvas, 0, 0);
const smallImageData = smallContext.getImageData(0, 0, bigCanvas.width, bigCanvas.height);
这是一个 codepen ,以证明检索到的图像数据是按比例缩小的版本 原始画布,而不仅仅是从中裁剪出来.
Here's a codepen as a proof that retrieved image data is a scaled down version of the original canvas, not just a crop from it.
如果要在循环中调整大小,请在调用drawImage codepen 之前清除目标画布.
If you want to resize in loop, clear the destination canvas before calling drawImage codepen.
const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms));
const bigCanvas = document.getElementById("big");
const bigContext = bigCanvas.getContext("2d");
const smallCanvas = document.getElementById("small");
const smallContext = smallCanvas.getContext("2d");
const otherCanvas = document.getElementById("other");
const otherContext = otherCanvas.getContext("2d");
function getImage(i) {
bigContext.clearRect(0, 0, bigCanvas.width, bigCanvas.height);
bigContext.fillRect(((i+0)%5)*100, 0, 100, 100);
bigContext.fillRect(((i+1)%5)*100, 100, 100, 100);
bigContext.fillRect(((i+2)%5)*100, 200, 100, 100);
bigContext.fillRect(((i+3)%5)*100, 100, 100, 100);
bigContext.fillRect(((i+4)%5)*100, 0, 100, 100);
bigContext.fillRect(((i+0)%5)*100, 200, 100, 100);
smallContext.clearRect(0, 0, smallCanvas.width, smallCanvas.height);
smallContext.drawImage(bigCanvas, 0, 0, smallCanvas.width, smallCanvas.height);
const smallImageData = smallContext.getImageData(0,0,
bigCanvas.width, bigCanvas.height);
otherContext.putImageData(smallImageData, 0, 0);
};
window.addEventListener("DOMContentLoaded", function() {
var i = 0;
setInterval(() => {
console.log(i);
getImage(i++);
}, 3000);
});
这篇关于在浏览器中调整ImageData大小的快速方法?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!