Копирование пиксельных координат между html-страницами

Question

В настоящее время я пишу небольшой редактор изображений, чтобы узнать некоторые javascript. Одна из возможностей - инструмент рисования. Когда это используется, я рисую эти пиксели на другой холст поверх фактического холста, а затем, когда мышь выпущена, я копирую пиксели с верхнего холста на нижний.

Это код, который используется для копирования рисованных пикселей в лежащий в основе холст.

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

Я действительно не имеют никакого понятия о том, что здесь, потому что это кажется довольно простым. Может ли быть что-то с сглаживанием?

спасибо

Answer 1

Я полагаю, что это происходит из-за сглаживания. Когда вы рисуете гладкую линию, некоторые пиксели рядом с линией почти прозрачны, но не полностью прозрачны. This fiddle иллюстрирует проблему. Таким образом, вы должны более тщательно объединить альфа-канал. Простейшее решение заключается в добавление значения альфа-канале к исходному значению, вместо того, чтобы заменить его полностью:

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

This fiddle показывает эффект. Ну, линия выглядит густо, чем оригинальная линия. Я полагаю, вы должны использовать другую формулу для слияния цветов.