在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

回答

相關問題