在浏览器中快速调整ImageData大小的方法？

Question

我有一个600 x 400像素的画布，返回一个数据长度为960,000（600 * 400 * 4）的ImageData。是否有办法将宽度和高度都缩小10倍，例如，我想获得一个数据长度为9600（60 * 40 * 4）的ImageData作为结果。

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

- slobodan.blazeski

---

你有没有做过任何研究，试图自己找到解决方案？ - Sean

只需使用生成的图像数据并将其绘制在较小的画布上即可吗？https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/putImageData - iacobalin

有没有直接的转换方式，而不需要创建额外的元素？ - slobodan.blazeski

https://github.com/ytiurin/downscale - iacobalin

通常的解决方案建议使用离屏画布，我不确定自己是否获取了新的 ImageData 还是旧的图像数据的一部分。 - slobodan.blazeski

Answer 1

经过一些试验，我发现了一个解决方案，以this的答案为起点。基本上，你可以将较大的画布绘制到较小的画布中，然后从中获取ImageData。

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，证明检索到的图像数据是原始画布的缩小版本，而不仅仅是从中裁剪出来的。

如果您想在循环中调整大小，请在调用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);
});

- slobodan.blazeski

Answer 2

尝试这个 但它很慢...

/**
 * 
 * @param {ImageData} originalImageData 
 * @param {Int32} targetWidth 
 * @param {Int32} targetHeight 
 */
function scaleImageData(originalImageData, targetWidth, targetHeight) {
    const targetImageData = new ImageData(targetWidth, targetHeight);
    const h1 = originalImageData.height;
    const w1 = originalImageData.width;
    const h2 = targetImageData.height;
    const w2 = targetImageData.width;
    const kh = h1 / h2;
    const kw = w1 / w2;
    const cur_img1pixel_sum = new Int32Array(4);
    for (let i2 = 0; i2 < h2; i2 += 1) {
        for (let j2 = 0; j2 < w2; j2 += 1) {
            for (let i in cur_img1pixel_sum) cur_img1pixel_sum[i] = 0;
            let cur_img1pixel_n = 0;
            for (let i1 = Math.ceil(i2 * kh); i1 < (i2 + 1) * kh; i1 += 1) {
                for (let j1 = Math.ceil(j2 * kw); j1 < (j2 + 1) * kw; j1 += 1) {
                    const cur_p1 = (i1 * w1 + j1) * 4;
                    for (let k = 0; k < 4; k += 1) {
                        cur_img1pixel_sum[k] += originalImageData.data[cur_p1 + k];
                    };
                    cur_img1pixel_n += 1;
                };
            };
            const cur_p2 = (i2 * w2 + j2) * 4;
            for (let k = 0; k < 4; k += 1) {
                targetImageData.data[cur_p2 + k] = cur_img1pixel_sum[k] / cur_img1pixel_n;
            };
        };
    };
    return targetImageData;
};

- Haskely