我有一个600 x 400像素的画布,返回一个数据长度为960,000(600 * 400 * 4)的ImageData。是否有办法将宽度和高度都缩小10倍,例如,我想获得一个数据长度为9600(60 * 40 * 4)的ImageData作为结果。
我需要获取ImageData.data数组以进行进一步的操作。由于该方法将在循环中调用,因此最好速度较快。 编辑 这是建议的方法,但我不确定是否正确:
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数组以进行进一步的操作。由于该方法将在循环中调用,因此最好速度较快。 编辑 这是建议的方法,但我不确定是否正确:
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