0

When i put on canvas image, its pure red (255,0,0) and after resize it and save pixels i got stupid valuses like (255,3,2).

In other example i put this image:

enter image description here

Same pure red, pure green and pure blue. After resize i got values like : - on red (255,3,2) - on green (0,254,30) - on blue (18,14,253) I can understand some values change in line between two colors after resize but why on pure colors?

Here is code:

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");

EDIT OK, i now see the problem is since javascirpt load image to canvas. It change (255,0,0) to (255,3,2). Why?

Skodsgn
  • 940
  • 1
  • 10
  • 33

0 Answers0