Question

我试图从图像源生成像素化画布 - 但是getImageData（）函数有一个奇怪的行为 - 在高于我画布的图像上，我只获得最大高度数据[最大高度*最大高度的平方]。我在这里找不到任何东西？

function generatePixels(){
    const pixel_size = 10;
    const x = 0; const y = 0;
    const w = temp_ctx.canvas.width;
    const h = temp_ctx.canvas.height;

    let min_width = w,
    min_height = h,
    max_width = 0, max_height = 0;

    for (var j = y; j < (y+h); j += pixel_size) {
        for (var i = x; i < (x+w); i += pixel_size) {

            // get current pixel image data (x,y,10,10);
            var data = temp_ctx.getImageData(j, i, pixel_size, pixel_size).data;

            // draw pixel on rendered canvas 
            rendered_ctx.fillStyle = '#' + (data[2] | (data[1] << 8) | (data[0] << 16) | (1 << 24)).toString(16).slice(1);
            rendered_ctx.fillRect((j + pixel_size), (i + pixel_size), 10, 10);

      }
    }
}

您可以在此处找到代码的示例： https://codepen.io/AceDesigns/pen/dZEmjZ

Answer 1

请在下面找到可行的代码。问题在于for循环条件。

for（var j = y; j＆lt;（y + h）; j + = pixel_size）{ for（var i = x; i＆lt;（x + w）; i + = pixel_size）{

Canvas getImageData（）。数据返回半图像

1 个答案: