html5 图片去电边缘,在HTML5画布中填充后消除锯齿边缘？(Anti-aliasing edges after floodfill in HTML5 canvas?)...

在HTML5画布中填充后消除锯齿边缘？(Anti-aliasing edges after floodfill in HTML5 canvas?)

我正在尝试实现一个泛泛填充算法，该算法在HTML5画布中生成抗锯齿边缘。

我的初始输入是一个ImageData对象，它包含重叠圆圈和透明背景上的线条的轮廓。 轮廓已经消失了，我有边缘的实际颜色( rgba(51, 51, 51, 255) 51,51,51,255 rgba(51, 51, 51, 255) )，以及通过消除形状产生的一些灰度“边缘”像素(值为rgba(48, 48, 48, 32) rgba(54, 54, 54, 200) rgba(48, 48, 48, 32)和rgba(54, 54, 54, 200) )。

我目前的泛洪填充实现知道这些边缘像素，但它只是将填充颜色应用于它们 - 导致像素化。 我也试图从这个答案应用alpha混合，也导致像素化。

通过混合这些条纹像素的颜色和填充颜色，您会建议使用什么算法来生成平滑边缘？

I am trying to implement a flood-fill algorithm that produces antialiased edges in HTML5 canvas.

My initial input is an ImageData object, which contains the outlines of overlapping circles and lines over a transparent background. The outlines are already antialised, and I have the actual color of the edges (rgba(51, 51, 51, 255)), and some grayscale "fringe" pixels produced by antialising the shapes (with values like rgba(48, 48, 48, 32) and rgba(54, 54, 54, 200)).

My current flood-fill implementation is aware of these fringe pixels, but it simply applies the fill color to them - resulting in pixelation. I also tried to apply the alpha-blending from this answer, also resulting in pixelation.

What algorithm would you recommend for producing smooth edges by blending the colors from these fringe pixels and the fill color?

原文：https://stackoverflow.com/questions/32030269

更新时间：2019-05-25 23:30

最满意答案

我认为你需要将你的条纹像素“混合”在(实心)泛光填充颜色之上。 像这样的东西(伪代码)：

alpha = pixel.alpha / 255;

pixel.r = alpha * pixel.r + (1 - alpha) * fill.r;

pixel.g = alpha * pixel.g + (1 - alpha) * fill.g;

pixel.b = alpha * pixel.b + (1 - alpha) * fill.b;

换句话说，如果条纹像素是不透明的( alpha == 1 )，它只保留其颜色。 如果它是完全透明的( alpha == 0 )，它会收到泛光填充颜色。 在这些极端之间，进行基于alpha的线性插值。

I think you need to blend your fringe pixels "on top of" the (solid) flood fill colour. Something like this (pseudocode):

alpha = pixel.alpha / 255;

pixel.r = alpha * pixel.r + (1 - alpha) * fill.r;

pixel.g = alpha * pixel.g + (1 - alpha) * fill.g;

pixel.b = alpha * pixel.b + (1 - alpha) * fill.b;

In other words, if the fringe pixel is opaque (alpha == 1), it just retains its colour. If it's fully transparent (alpha == 0), it receives the flood fill colour. In between those extremes, do a linear interpolation based on alpha.

相关问答

我认为你需要将你的条纹像素“混合”在(实心)泛光填充颜色之上。 像这样的东西(伪代码)： alpha = pixel.alpha / 255;

pixel.r = alpha * pixel.r + (1 - alpha) * fill.r;

pixel.g = alpha * pixel.g + (1 - alpha) * fill.g;

pixel.b = alpha * pixel.b + (1 - alpha) * fill.b;

换句话说，如果条纹像素是不透明的( alpha == 1

...

抗锯齿功能无法打开或关闭，由浏览器控制。 我可以关闭HTML 元素上的抗锯齿吗？ Anti-aliasing cannot be turned on or off, and is controlled by the browser. Can I turn off antialiasing on an HTML element?

你真的需要乘法吗？ 为什么不使用较低的不透明度混合？ 演示http://jsfiddle.net/wk3eE/ ctx.globalAlpha = 0.6;

for(var i=totalShards;i--;) drawRandomShard();

编辑 ：如果你真的需要乘法，那么留给专业人士 ，因为乘法模式与alpha值有点棘手： 演示2： http ： //jsfiddle.net/wk3eE/2/