HTML5/JavaScript 图像边缘羽化— 打造图像处理类库第二步

ゝ一世哀愁。 2022-07-13 15:59 676阅读 0赞

由于之前略忙，主要也还是因为自己太懒，拖了好久才把这篇博客写完。这篇博客是关于**图像边缘羽化（柔化）**的，也是 JavaScript 图像处理这一系列的第二篇。上一篇是关于Gamma校正的，有兴趣的朋友可以看看： [HTML5/JavaScript 图像自动Gamma校正 — 打造图像处理类库第一步][HTML5_JavaScript _Gamma_ _]

按照习惯，我们还是先来看看，今天这篇文章最后所要达到的图像边缘羽化效果：

![Center][]

由于gif图画质不是太好，所以看起来效果有点欠缺。要想看到真实的效果，可以去文末下载源码运行，还可以将 **Get Data** 之后得到的**Base64**数据转存成图片，看看羽化之后图片发生了什么变化。

1. 什么是图片边缘羽化

羽化又可以称为柔化，大致的定义是使图片边缘达到朦胧的效果，羽化值越大，则朦胧范围越宽。我最早是在 **PhotoShop** 接触到羽化这个名词的，用过 **PhotoShop** 的朋友应该大都接触过羽化，让我们一起来看看PS中羽化到底是一种什么样的效果：

① 设定好羽化值；② 选择选框工具，并框选好图像羽化区域；③ 点击 **Ctrl+Shift+i** 反选后，点击  **Delete** 键，羽化也就完成了。

![Center 1][]

最后完成的图像效果如下：

![Center 2][]

2. 实现图片羽化功能的思考

接下来，我想先和大家分享一下之前考虑实现这个功能的一些思考过程：  
① 一开始想到的方案是直接利用 **CSS **来实现羽化效果，就是利用 **CSS** 中 **box-shadow **实现边缘羽化效果，下图是实现的代码和效果图（利用在线调试平台**JS Bin**运行的代码）：

![Center 3][]

② 第二种想到的方案是将要做羽化的图片以及透明度渐变的边框图片一起放置 **<svg>** 元素标签下，边框图片大小和要做羽化的图片大小保持一致，并覆盖在该图片之上。具体代码就不贴了，具体过程也就是将如下的左右两张图片，叠加到一起之后实现羽化效果（下方最后一张图片）。

![Center 4][]   ![Center 5][]

![Center 6][]

③ 第三种方案是将通过调用 **drawImage()** 方法将图片绘制到 **canvas** 上，再通过一系列的处理，达到边缘羽化的效果，这个也是最终选定的方案，后面再详细的介绍一下。

仔细看前两个方案，你会发现其实本质上这两个方案是没有区别的，因为都只是在图片上覆盖一个边框，乍一看效果似乎和羽化差不多，但是实际上覆盖了边框之后，图片四周依然还是不透明的，所以还是没有真正实现羽化。

之前没有考虑清楚就开始实践，首先通过 **CSS** 实现了看起来和羽化差不过的效果后，我就开始想这个效果只是在  **<div>** 上的，如何才能得到图片数据，把这个效果保存下来，我就往 **html to canvas** 方向考虑了，先把**DOM元素**绘制到 **canvas** 上，绘制完成后再利用 **toDataURL()** 方法得到图片数据，整套流程完成之后，也得到了图片数据，发现得到数据只是 **<img>** 数据，**<div> **的 **box-shadow** 效果并没有体现出来，这时我觉得应该是 **CSS** 的效果没办法绘制到 **canvas** 上，所以就放弃了这个方案。

其实这个时候我并没有意识到第①个方案就算实现了，也没有达到真正意义上的羽化，因为没有发现这个问题，所以就有了第二个方案。方案②完全就是朝着 **CSS** 效果没有成功绘制到 **canvas** 去的，我当时想着只要解决了这个问题，边缘羽化就大功告成了。然后朝着这个方向做了一系列调查，最终得到了图片数据，这个时候才发现这种方案实现的不是真正的羽化效果，图片四周是不透明的。方案②的具体实现步骤就是先将要做羽化的图片添加到 **<svg>** 中，在将边框图片添加到 **<svg>** ，两张图片大小保持一致；然后将 **svg **绘制到  **canvas** 上，利用 **toDataURL()** 方法得到图片数据。这里稍微贴一下将 **<svg>** 转成 **base64** 数据的代码吧：

var svg_data = (new XMLSerializer()).serializeToString(document.getElementById("mySvg"));
    var src = "data:image/svg+xml;base64," + btoa(svg_data);
    var tempImg = new Image();
    tempImg.onload = function(evt) {
    	var ctx = document.createElement('canvas').getContext('2d');
    	ctx.canvas.width = this.width;
    	ctx.canvas.height = this.height;
            
    	ctx.drawImage(tempImg, 0, 0);
    	var dataURL = ctx.canvas.toDataURL("image/png");
    }
    tempImg.src = src;

写这段也是想告诉大家，在实现某一个功能之前，应该把可行的方案考虑好定下来再去实施，不要急于实现，导致花费了一些不必要的时间，影响工作进度；当然如果你是在学习过程中，鼓励大家多去尝试，考虑各种各样的方式实现，像我为了完成图片边缘羽化这个效果，有很多自己的思考在里面，虽然前两个方案对于最后的功能没什么用，但是在实现自己的想法的过程中我做了很多调查研究，通过这两个方案也学习了不少新知识，对自己来说也是一个积累的过程。

3. 相关知识点

3.1 CanvasRenderingContext2D对象

CanvasRenderingContext2D 接口提供了一系列的函数用来在 <canvas> 上绘制的图形。我们今天所讲的图像处理操作都是基于这个接口对象所提供的方法来完成的，要获取这个接口的对象，需要通过调用 <canvas> 元素的 getContext() 方法：

var canvas = document.getElementById('id');
    // var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');

3.2 绘制矩形

① CanvasRenderingContext2D.clearRect()

可清除指定范围的内容的方法。以点 (x, y) 为起点，并根据设定的 **width **和 **height **所围成的矩形区域，在这个范围内的所有像素变成透明，并擦除之前绘制的所有内容。

② CanvasRenderingContext2D.fillRect()

这是一个绘制填充矩形的方法。矩形的起点在 (x, y) 位置，矩形的尺寸是 **width** 和 **height** ，可利用**fillStyle** 属性来设定矩形的样式，下一小节会详细介绍和这个属性相关的方法。

上面**两个函数**所传的4个参数如下表所示：

<table style="border-collapse:collapse"> 
 <tbody> 
  <tr style="background:#497aea; color:white; font-size:20px; font-style:normal; border-color:#4a4949; text-align:center"> 
   <td>函数参数</td> 
   <td>描述</td> 
  </tr> 
  <tr> 
   <td>&nbsp;x</td> 
   <td>&nbsp;矩形起点的 x 轴坐标</td> 
  </tr> 
  <tr style="background:gainsboro"> 
   <td>&nbsp;y</td> 
   <td>&nbsp;矩形起点的 y 轴坐标</td> 
  </tr> 
  <tr> 
   <td>&nbsp;width</td> 
   <td>&nbsp;矩形的宽度</td> 
  </tr> 
  <tr style="background:gainsboro"> 
   <td>&nbsp;height</td> 
   <td>&nbsp;矩形的高度</td> 
  </tr> 
 </tbody> 
</table>

3.3 渐变效果

① CanvasRenderingContext2D.fillStyle

**      fillStyle** 属性设置或返回用于填充绘图的颜色，渐变或图案。要使用渐变来填充区域，只需要把②或③方法返回的**CanvasGradient**对象赋给**fillStyle**属性即可。

② CanvasRenderingContext2D.createLinearGradient()

根据传入的坐标参数创建出线性渐变，这个方法会返回一个线性 **CanvasGradient** 对象。

<table style="border-collapse:collapse"> 
 <tbody> 
  <tr style="background:#497aea; color:white; font-size:20px; font-style:normal; border-color:#4a4949; text-align:center"> 
   <td>函数参数</td> 
   <td>描述</td> 
  </tr> 
  <tr> 
   <td>&nbsp;x0</td> 
   <td>&nbsp;渐变起始点的 x 轴坐标</td> 
  </tr> 
  <tr style="background:gainsboro"> 
   <td>&nbsp;y0</td> 
   <td>&nbsp;渐变起始点的 y 轴坐标</td> 
  </tr> 
  <tr> 
   <td>&nbsp;x1</td> 
   <td>&nbsp;渐变终点的 x 轴坐标</td> 
  </tr> 
  <tr style="background:gainsboro"> 
   <td>&nbsp;y1</td> 
   <td>&nbsp;渐变终点的 y 轴坐标</td> 
  </tr> 
 </tbody> 
</table>

③ CanvasRenderingContext2D.createRadialGradient()

根据传入的参数确定两个圆的坐标，绘制放射性渐变的方法。这个方法同样会返回 **CanvasGradient** 对象。

<table style="border-collapse:collapse"> 
 <tbody> 
  <tr style="background:#497aea; color:white; font-size:20px; font-style:normal; border-color:#4a4949; text-align:center"> 
   <td>函数参数</td> 
   <td>描述</td> 
  </tr> 
  <tr> 
   <td>&nbsp;x0</td> 
   <td>&nbsp;开始圆的 x 轴坐标</td> 
  </tr> 
  <tr style="background:gainsboro"> 
   <td>&nbsp;y0</td> 
   <td>&nbsp;开始圆的 y 轴坐标</td> 
  </tr> 
  <tr> 
   <td>&nbsp;r0</td> 
   <td>&nbsp;开始圆的半径</td> 
  </tr> 
  <tr style="background:gainsboro"> 
   <td>&nbsp;x1</td> 
   <td>&nbsp;结束圆的 x 轴坐标</td> 
  </tr> 
  <tr> 
   <td>&nbsp;y1</td> 
   <td>&nbsp;结束圆的 y 轴坐标</td> 
  </tr> 
  <tr style="background:gainsboro"> 
   <td>&nbsp;r1</td> 
   <td>&nbsp;结束圆的半径</td> 
  </tr> 
 </tbody> 
</table>

注意， **createLinearGradient()** 和  **createRadialGradient()** 方法并没有为渐变指定任何颜色。需要使用返回对象的 **addColorStop()** 来完成颜色的指定

④ CanvasGradient.addColorStop()

**      addColorStop()** 方法用于设定渐变中的某一点的颜色变化。

<table style="border-collapse:collapse"> 
 <tbody> 
  <tr style="background:#497aea; color:white; font-size:20px; font-style:normal; border-color:#4a4949; text-align:center"> 
   <td>函数参数</td> 
   <td>描述</td> 
  </tr> 
  <tr> 
   <td>&nbsp;offset</td> 
   <td>&nbsp;这是一个范围在 0 到 1 之间的浮点值，表示渐变的开始点和结束点之间的一部分。offset 为 0 对应开始点，offset 为 1 对应结束点。若不在0到1之间，将抛出INDEX_SIZE_ERR错误</td> 
  </tr> 
  <tr style="background:gainsboro"> 
   <td>&nbsp;color</td> 
   <td>&nbsp;以一个 CSS 颜色字符串的方式，表示在指定 offset 显示的颜色。沿着渐变某一点的颜色是根据这个值以及任何其他的颜色色标来插值的。如果颜色值不能被解析为有效的CSS颜色值，将抛出SYNTAX_ERR错误</td> 
  </tr> 
 </tbody> 
</table>

下面通过两个简单的例子，一起来看看两种渐变的效果：

（1）线性渐变

var canvas = document.getElementById("id");
    var ctx = canvas.getContext("2d");
    
    var gradient = ctx.createLinearGradient(0,0,200,0);
    gradient.addColorStop(0, "green");
    gradient.addColorStop(1, "yellow");
    ctx.fillStyle = gradient;
    ctx.fillRect(10,10,200,100);

![Center 7][]

（2）放射性渐变

var canvas = document.getElementById("id");
    var ctx = canvas.getContext("2d");
    
    var gradient = ctx.createRadialGradient(100,100,100,100,100,0);
    gradient.addColorStop(0,"white");
    gradient.addColorStop(1,"green");
    ctx.fillStyle = gradient;
    ctx.fillRect(0,0,200,200);

![Center 8][]

3.4 CanvasRenderingContext2D.globalCompositeOperation

**      **设置**globalCompositeOperation**属性值，可以改变源（新的）图像绘制到目标（已有）的图像上的方式，下面以表格的形式，直观的了解一下各个属性值的含义及效果：

假设目标（已有）的图像【左】、源（新的）图像【右】，如下所示（这里使用了**MDN**的图像来演示各属性效果）：

![Center 9][]     ![Center 10][]

<table style="border-collapse:collapse"> 
 <tbody> 
  <tr style="background:#497aea; color:white; font-size:20px; font-style:normal; border-color:#4a4949; text-align:center"> 
   <td>属性值</td> 
   <td>描述</td> 
   <td>效果</td> 
  </tr> 
  <tr> 
   <td>&nbsp;source-over</td> 
   <td>&nbsp;这是默认值，新图形会覆盖在原有内容之上。</td> 
   <td style="text-align:center"><img src="https://img-blog.csdn.net/20170228235723718?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMzM0NzI0MQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt=""></td> 
  </tr> 
  <tr> 
   <td>&nbsp;source-in</td> 
   <td>&nbsp;新图形会仅仅出现与原有内容重叠的部分。其它区域都变成透明的。</td> 
   <td style="text-align:center"><img src="https://img-blog.csdn.net/20170301000923552?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMzM0NzI0MQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt=""></td> 
  </tr> 
  <tr> 
   <td>&nbsp;source-out</td> 
   <td>&nbsp;只有新图形中与原有内容不重叠的部分会被绘制出来。</td> 
   <td style="text-align:center"><img src="https://img-blog.csdn.net/20170301002500418?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMzM0NzI0MQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt=""></td> 
  </tr> 
  <tr> 
   <td>&nbsp;source-atop</td> 
   <td>&nbsp;新图形中与原有内容重叠的部分会被绘制，并覆盖于原有内容之上。</td> 
   <td style="text-align:center"><img src="https://img-blog.csdn.net/20170301002535409?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMzM0NzI0MQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt=""></td> 
  </tr> 
  <tr> 
   <td>&nbsp;destination-over</td> 
   <td>&nbsp;会在原有内容之下绘制新图形。</td> 
   <td style="text-align:center"><img src="https://img-blog.csdn.net/20170301002550190?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMzM0NzI0MQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt=""></td> 
  </tr> 
  <tr> 
   <td>&nbsp;destination-in</td> 
   <td>&nbsp;原有内容中与新图形重叠的部分会被保留，其它区域都变成透明的。</td> 
   <td style="text-align:center"><img src="https://img-blog.csdn.net/20170301002604472?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMzM0NzI0MQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt=""></td> 
  </tr> 
  <tr> 
   <td>&nbsp;destination-out</td> 
   <td>&nbsp;原有内容中与新图形不重叠的部分会被保留。</td> 
   <td style="text-align:center"><img src="https://img-blog.csdn.net/20170301002620185?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMzM0NzI0MQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt=""></td> 
  </tr> 
  <tr> 
   <td>&nbsp;destination-atop</td> 
   <td>&nbsp;原有内容中与新内容重叠的部分会被保留，并会在原有内容之下绘制新图形。</td> 
   <td style="text-align:center"><img src="https://img-blog.csdn.net/20170301002718060?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMzM0NzI0MQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt=""></td> 
  </tr> 
 </tbody> 
</table>

因为我们今天的重点内容不是这个，所以这里只介绍了前8个，总共大概有26个，想了解更多详尽内容可访问MDN官网： [https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation][https_developer.mozilla.org_en-US_docs_Web_API_CanvasRenderingContext2D_globalCompositeOperation]

4. 具体实现

**      **下面来看看怎么利用之前的api实现羽化功能。

4.1 HTML代码

<!DOCTYPE html>
    <html>
    	<head>
    		<title>Feather image(Soft image edge) by canvas</title>
    		<link type="text/css" rel="stylesheet" href="css/soft_edge.css">
    		<script type="text/javascript" src="lib/jquery.js" οnlοad="window.$ = window.jQuery"></script>
    		<script type="text/javascript" src="js/soft_edge.js"></script>
    	</head>
    	<body>
    		<div class="btn_area">
    			<button id="feather" class="btn_feather" οnclick="featherImage()">Feather</button>
    			<button id="get_data" class="btn_feather" οnclick="getImgData()">Get Data</button>
    		</div>
    		<img id="original_image" class="img_feather" src="original_image.png">
    		<img id="new_image" class="img_feather">
    	</body>
    </html>

4.2 CSS代码

body {
    	text-align: center;
    }
    
    .img_feather {
    	max-width: 500px;
    	max-height: 500px;
    	margin-top: 30px;
    	float： left;
    }
    
    .btn_feather {
    	width: 100px;
    	height: 60px;
    }

4.3 JavaScript代码

**        注意：Chrome浏览器运行这个程序，或者说操作canvas时会报错，因为Chrome的安全策略问题导致，解决方案可以参考我的上一篇博客：**[HTML5/JavaScript 图像自动Gamma校正 — 打造图像处理类库第一步 ][HTML5_JavaScript _Gamma_ _]**文末的内容。**

**      **下面简单说一下js代码，实现羽化效果，主要是通过 **addFrameMask()**方法在图像的上、下、左、右四个方向添加线性渐变，在左上、右上、左下及右下四角添加放射性渐变，之前把 **globalCompositeOperation**属性值为 **destination-out** ，这步是实现羽化的**关键**。还有就是羽化的**size**是我自己定的比例，大家可以自行修改代码达到想要的效果。其他内容就不再赘述了，大家有问题或有更好的想法，都欢迎大家随时和我交流，如果文中有不足或错误的地方，也希望大家能指出来。代码链接就贴在文末了。

程序源代码：

[HTML5/JavaScript 图像边缘羽化][HTML5_JavaScript]

[HTML5_JavaScript _Gamma_ _]: http://blog.csdn.net/u013347241/article/details/52988863
[Center]: /images/20220709/92b1457e6dfc48ce9d4ac8807f5fc26d.png
[Center 1]: /images/20220709/8b7bfac1b4e14f4fbb510e6ac663cbea.png
[Center 2]: /images/20220709/715946098c13418db36e38ecb36621f2.png
[Center 3]: /images/20220709/3c5a34a3dca2437f9132a813ba0160dd.png
[Center 4]: https://img-blog.csdn.net/20170223002227093?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMzM0NzI0MQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 5]: /images/20220709/c77229f5768540f9800e1c0a44541d93.png
[Center 6]: /images/20220709/9d545490fd0141d0939dac23f90bceb0.png
[Center 7]: /images/20220709/76032e1909ae4541b0db547d9f76aee6.png
[Center 8]: /images/20220709/50dbfd7735eb4e428fe67a01fe324b1d.png
[Center 9]: https://img-blog.csdn.net/20170228234742606?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMzM0NzI0MQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 10]: /images/20220709/e9b81f8d8d804176807c75520314e8e6.png
[https_developer.mozilla.org_en-US_docs_Web_API_CanvasRenderingContext2D_globalCompositeOperation]: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
[HTML5_JavaScript]: http://download.csdn.net/detail/u013347241/9767809