在chrome中复制画布像素内容时出现意外结果，为什么？

Question

我正在将canvas'alpha-pixels'复制到某个数组（Tarray）。我发现歌剧和唱片的表现方式不同。为了测试我从某个范围缓冲了值（65,100）并且'警告'了它们。

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)
  ...........
 }
......

这是歌剧结果：

：

这是chrome结果：

为什么？

修改

这里是创建transperancy效果的代码（图片增加其alpha值）：

    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 - 此函数正常工作.last parametr - alpha value。

repeat - 基于setInterval但允许指定调用次数（N）和回调函数。

这个函数不能改变任何东西（像素[i + 3] = self.Tarray [i / 4] - 相同的alpha值）。在Opera中OK.In Chrome - （。那就是因为chrome没有正确复制。< / p>

Answer 1

alpha值的差异通常是由于不同浏览器处理抗锯齿的方式。

除非您通过直接像素操作绘制图像，否则您必须从不同的浏览器供应商处获得不同的alpha值。

因此，如果使用createImageData / putImageData绘制画布，则不应看到不同的alpha值，但如果使用其他更高级别的函数，例如fillRect / {{1您可能会注意到alpha（有时甚至是RGB）不匹配。