CODEWITHSUNDEEP
htmlcanvas
Anton Putov
Anton Putov

Reputation: 1981

Unexpected result when copying canvas pixel content in chrome, why?

I am copying canvas 'alpha-pixels' to some array (Tarray). I find that opera and chrome do it differently. For testing I buffered values from some range (65,100) and 'alerted' them.

this.Tarray = null;
.....   
create: function (e) {
  ..........
    var test = '';
    var ctx = this.canvas.getContext('2d');
    var pixels = ctx.getImageData(0, 0, this.canvas.width, this.canvas.height).data;
    this.Tarray = new Array(pixels.length / 4);

    for (var i = 0; i < pixels.length; i += 4) {
        this.Tarray[i / 4] = pixels[i + 3];
      // here we buffer some range of values
        if (i / 4 < 100 && i / 4 > 65)
            test += (',' + pixels[i + 3]);
    }
    alert(test)
  ...........
 }
......

This is the opera result:

:

This is the chrome result:

Why?

EDIT

here is code which creates transperancy effect (picture increases its alpha-value):

    transperancyEffect: function () {

    // when menu first draws (but not displays) it has native alpha value
    //so we must change it before first display
    this.changeTransperancy(0, 0, this.canvas.width, this.canvas.height, this.canvas, 2);
    document.body.appendChild(this.canvas);
    var N = 20;

    var delay = Math.round(this.buildInfo.time / N);

    var self = this;


    function wrapper() {
        arguments.callee.myStaticVar = arguments.callee.myStaticVar || 0;
        arguments.callee.myStaticVar++;
        var ctx = self.canvas.getContext('2d');
        var imageData = ctx.getImageData(0, 0, self.canvas.width, self.canvas.height);
        //   self.changeTransperancy(0, 0, self.canvas.width, self.canvas.height, self.canvas, (arguments.callee.myStaticVar * 200/N + 4));
        var pixels = imageData.data;

        for (var i = 0; i < pixels.length; i += 4) {
            pixels[i + 3] = self.Tarray[i / 4]; // Math.round((self.Tarray[i / 4] * arguments.callee.myStaticVar )/ N);
        }
        ctx.clearRect(0, 0, self.canvas.width, self.canvas.height);

        ctx.putImageData(imageData, 0, 0);

    }

    function callback() {
        self.registerListeners();
    }

    this.repeat(wrapper, delay, N, callback);
}

changeTransperancy - this function works correctly.last parametr - alpha value.

repeat - based on setInterval but allows to specify number of invoking (N) and callback function.

This function must not change nothing (pixels[i + 3] = self.Tarray[i / 4] - the same alpha values).In Opera all OK.In Chrome - ( . Thats beckause chrome not copying correctly.

Upvotes: 0

Views: 89

Answers (1)

lostsource
lostsource

Reputation: 21830

Differences in alpha values are usually due to the way different browsers handle anti-aliasing.

Unless you're drawing the image via direct pixel manipulation you're bound to get different alpha values from different browser vendors.

So, if you draw your canvas using createImageData / putImageData, you should not see different alpha values, but if you use other higher level functions such as fillRect / strokeRect you will probably notice alpha (and sometimes even RGB) mismatches.

Upvotes: 1

Related Questions