Question

当我放置画布图像时，它的纯红色（255,0,0）并在调整大小并保存像素后，我得到了像（255,3,2）那样的愚蠢的值。

在其他例子中，我把这张图片：

同样纯红色，纯绿色和纯蓝色。调整大小后我得到的值如下： - 红色（255,3,2） - 绿色（0,254,30） - 蓝色（18,14,253）我可以理解调整大小后两种颜色之间的某些值会发生变化但为什么是纯色？

这是代码：

function fileOnload(e) {
    var $img = $('<img>', {
        src: e.target.result
    }),
    canvas = $('#image')[0],
    context = canvas.getContext('2d');
    $img.load(function () {
        img = this;
        IMAGE = this;
        canvas.width = 400;
        canvas.height = 400;

        context.drawImage(this,0,0,400,400) 

        canvas2 = $('#image-after')[0],
        context2 = canvas2.getContext('2d');

        canvas2.width = canvas2.width;

        var XS = dimx,
        YS = dimy;

        canvas2.width = XS;
        canvas2.height = YS;
        context2.drawImage(this, 0, 0, XS, YS);

        var data = context2.getImageData(0, 0, XS, YS).data;

        pixels = new Array(YS);
        for (var i = 0; i < YS; i++) {
            pixels[i] = new Array(XS);
        }

        for(var _y = 0; _y<YS; _y++) {
            for(var _x = 0; _x<XS; _x++) {
                var index = (_y * YS + _x) * 4,
                r = data[index],
                g = data[index+1],
                b = data[index+2],
                a = data[index+3];
                pixels[_y][_x] = new pixel(r,g,b,255);
            }
        }
    });
}

function saveAs_POLPRGB(_x, _y) {
    var data = {
        SIZE: [_x, _y],
        LEDS: []
    };
}

for (var i=0; i < pixels.length; i++) {
    for (var j=0; j < pixels[0].length; j++) {
        data.LEDS.push({
            X: j,
            Y: i,
            R: pixels[i][j].r,
            G: pixels[i][j].g,
            B: pixels[i][j].b,
        });
    }
}

var blob = new Blob([JSON.stringify(data)], {
    type: "text/plain;charset=utf-8"
});

saveAs(blob, $("#save-text-filename").val() + ".polprgb");

编辑好的，我现在看到问题是因为javascirpt将图片加载到画布。它将（255,0,0）更改为（255,3,2）。为什么呢？

Javascript - 调整大小后的错误像素

0 个答案: