在html画布之间复制pixeldata

我正在写一个小图像编辑器来学习一些javascript。其中一个特点显然是一个绘图工具。当我用这些像素绘制到实际画布顶部的另一个画布上，然后释放鼠标时，我将顶部画布上的像素复制到底层画布上。在html画布之间复制pixeldata

这是用于将绘制的像素复制到底层画布的代码。

this.applySketch = function() { 
    this.revertStack.push(this.ctx.getImageData(0, 0, this.width, this.height)); 

    var real = this.ctx.getImageData(0, 0, this.width, this.height); 
    var sketch = this.sketchctx.getImageData(0, 0, this.width, this.height); 

    for(var i = 0; i < sketch.data.length; i += 4) { 
     // check the alpha value to decide if to copy to the real canvas 
     if(sketch.data[i+3] > 0) { 
      real.data[i] = sketch.data[i]; 
      real.data[i+1] = sketch.data[i+1]; 
      real.data[i+2] = sketch.data[i+2]; 
      real.data[i+3] = sketch.data[i+3]; 
     } 
    } 

    this.ctx.putImageData(real, 0, 0); 
    this.sketchctx.clearRect(0, 0, this.width, this.height); 
}

我遇到的问题是像素在复制到其他图层时看起来不一样。相反，无论我正在复制什么，都有一个白色像素的薄轮廓。

鼠标释放之前（在像素是在顶层） http://i.imgur.com/xHvN1iF.jpg

鼠标释放（当它们已被复制） http://i.imgur.com/P0sdybs.jpg

我真的没有什么任何线索后去这里，因为它看起来非常简单。它可以是什么抗锯齿？

感谢

来源

2013-05-11 John Pertoft

我想这是因为抗锯齿。绘制平滑线时，线条附近的某些像素几乎是透明的，但不完全透明。 This fiddle说明了这个问题。所以，你需要更仔细地合并Alpha通道。该simpliest解决方案是alpha通道值添加到原始值，而不是完全替换它的：

real.data[i+3] += sketch.data[i+3];

This fiddle显示效果。那么，线条看起来比原始线条粗糙。我想你应该使用其他公式来合并颜色。

来源

2013-05-11 08:41:25

在html画布之间复制pixeldata

回答

相关问题