使用canvas在前端实现图片合成

曾经终败给现在 2022-05-31 13:13 776阅读 0赞

看着总结的不错，我也就拿来主义了，做个记录，侵权必删

图片合成最常见的需求有验证码图片，亦或者图片加水印等，这种实现一般都是后端实现的。

随着HTML5发展和现代浏览器的占比越来越高，我们其实也可以在前端直接进行图片的合成。优点在于，响应更快，体验更好；如果是和文字进行合成，我们可以利用客户端字体，视觉展现效果更丰富；同时展示和合成全部都是前端完成，因此更利于维护。

这里通过举个例子，演示如何在前端实现多个图片合成的效果，主要是借助HTML5 `canvas`相关技术。

### 一、使用canvas在前端实现图片水印合成 ###

如果仅仅是普通的合成，例如一个底图和一个PNG水印图片合成，直接使用`canvas`的`drawImage()`方法即可，语法如下：

context.drawImage(img,x,y);
    context.drawImage(img,x,y,width,height);
    context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

各个参数示意为：

<table style="background:rgb(167,191,232);font-size:12px;color:rgb(51,51,51);font-family:Arial;text-align:justify;"> 
 <tbody> 
  <tr> 
   <th style="border-width:3px;border-color:rgb(255,255,255);background:rgb(240,243,249);text-align:center;">参数</th> 
   <th style="border-width:3px;border-color:rgb(255,255,255);background:rgb(240,243,249);text-align:center;">描述</th> 
  </tr> 
  <tr> 
   <td style="padding:2px 4px;border-width:3px;border-color:rgb(255,255,255);background:rgb(249,249,249);"><em>img</em></td> 
   <td style="padding:2px 4px;border-width:3px;border-color:rgb(255,255,255);background:rgb(249,249,249);">用来被绘制的图像、画布或视频。</td> 
  </tr> 
  <tr> 
   <td style="padding:2px 4px;border-width:3px;border-color:rgb(255,255,255);background:rgb(249,249,249);"><em>sx</em></td> 
   <td style="padding:2px 4px;border-width:3px;border-color:rgb(255,255,255);background:rgb(249,249,249);">可选。img被绘制区域的起始左上x坐标。</td> 
  </tr> 
  <tr> 
   <td style="padding:2px 4px;border-width:3px;border-color:rgb(255,255,255);background:rgb(249,249,249);"><em>sy</em></td> 
   <td style="padding:2px 4px;border-width:3px;border-color:rgb(255,255,255);background:rgb(249,249,249);">可选。img被绘制区域的起始左上y坐标。</td> 
  </tr> 
  <tr> 
   <td style="padding:2px 4px;border-width:3px;border-color:rgb(255,255,255);background:rgb(249,249,249);"><em>swidth</em></td> 
   <td style="padding:2px 4px;border-width:3px;border-color:rgb(255,255,255);background:rgb(249,249,249);">可选。img被绘制区域的宽度（如果没有后面的width或height参数，则可以伸展或缩小图像）。</td> 
  </tr> 
  <tr> 
   <td style="padding:2px 4px;border-width:3px;border-color:rgb(255,255,255);background:rgb(249,249,249);"><em>sheight</em></td> 
   <td style="padding:2px 4px;border-width:3px;border-color:rgb(255,255,255);background:rgb(249,249,249);">可选。img被绘制区域的高度（如果没有后面的width或height参数，则可以伸展或缩小图像）。</td> 
  </tr> 
  <tr> 
   <td style="padding:2px 4px;border-width:3px;border-color:rgb(255,255,255);background:rgb(249,249,249);"><em>x</em></td> 
   <td style="padding:2px 4px;border-width:3px;border-color:rgb(255,255,255);background:rgb(249,249,249);">画布上放置img的起始x坐标。</td> 
  </tr> 
  <tr> 
   <td style="padding:2px 4px;border-width:3px;border-color:rgb(255,255,255);background:rgb(249,249,249);"><em>y</em></td> 
   <td style="padding:2px 4px;border-width:3px;border-color:rgb(255,255,255);background:rgb(249,249,249);">画布上放置img的起始y坐标。</td> 
  </tr> 
  <tr> 
   <td style="padding:2px 4px;border-width:3px;border-color:rgb(255,255,255);background:rgb(249,249,249);"><em>width</em></td> 
   <td style="padding:2px 4px;border-width:3px;border-color:rgb(255,255,255);background:rgb(249,249,249);">可选。画布上放置img提供的宽度（可能会有图片剪裁效果）。</td> 
  </tr> 
  <tr> 
   <td style="padding:2px 4px;border-width:3px;border-color:rgb(255,255,255);background:rgb(249,249,249);"><em>height</em></td> 
   <td style="padding:2px 4px;border-width:3px;border-color:rgb(255,255,255);background:rgb(249,249,249);">可选。画布上放置img提供的高度（可能会有图片剪裁效果）。</td> 
  </tr> 
 </tbody> 
</table>

而PNG水印图片的合成，直接连续在使用`drawImage()`把对应的图片绘制到`canvas`画布上就可以，原理就是这么简单。

我们直接案例吧，您可以狠狠地点击这里：[JS canvas水印图片合成demo][JS canvas_demo]

demo页面的功能如下：

1.  选择自己电脑中的图片；
2.  合成；

例如，我们点击“选择图片”按钮，如下截图：

![选择图片][2017-05-17_001002.png]

选择一张小于50K的图片，例如这张：  
![图片选择示意][2017-05-17_001734.png]

结果变成这样子，白色的YUX字样是后来合成上去的：

![合成后预览效果图][2017-05-17_001750.png]

> 不要疑惑为什么不使用这张图片？
> 
> ![mm1.jpg][]
> 
> 因为图片有大片浅色区域，水印看不清楚。

此时，我们直接右键就可以保存这张合成的图片了：  
![右键保存图片示意][2017-05-17_002105.png]

![保存到桌面的图片信息展示][2017-05-17_002213.png]

此demo有`3`处需要特别说明的技术点，一是本地选择图片转化成`base64`地址，相关代码如下：

inputFile.addEventListener('change', function (event) {
        var reader = new FileReader();
        var file = event.target.files[0];
        reader.onload = function(e) {
          var base64 = e.target.result;
        };
        reader.readAsDataURL(file);
    });

主要是借助HTML5 `FileReader`读取文件的base64信息；

二是把这个图片的base64地址绘制到canvas画布上，核心JS代码如下：

var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');
    
    // 这是上传图像
    var imgUpload = new Image();
    imgUpload.onload = function () {
        // 绘制
        context.drawImage(imgUpload, 0, 0, 180, 180);
    };
    imgUpload.src = base64;

三是在已经绘制好了本地图片的画布上继续画水印图片，并借助canvas的`toDataURL()`方法把我们的`canvas`画布转换成`base64`无损PNG地址。假设水印图片DOM对象名称是`eleImgCover`，则：

// 绘制
    context.drawImage(imgUpload, 0, 0, 180, 180);
    // 再次绘制水印
    context.drawImage(eleImgCover, 0, 0, 180, 180);
    // 此时canvas.toDataURL('image/png')的结果就是最终合成的base64图片信息
    
    var finalResult = canvas.toDataURL('image/png');

更完整的代码参见demo演示页面。

### 二、使用canvas实现更为复杂的图片合成 ###

具有透明背景的水印图片合成是`canvas`图片合成中最基本最简单的，如果遇到更为复杂的合成，例如各取`50%`透明度进行合成，或者经典的[mix-blend-mode混合模式][mix-blend-mode]的，此时可能就需要借助算法来实现了。

原理为，使用HTML5 `canvas` `getImageData()`方法获取图片完整的像素点信息，通过已知我自己设计的混合算法，对多个图片的像素信息进行合成，合并，重计算，最后把新的图片像素信息通过`putImageData()`方法重新绘制到画布上，从而实现更为复杂的图片合成效果。

其中，`getImageData()`方法返回`ImageData`对象，该对象拷贝了画布指定矩形的像素数据。

`ImageData`中有个`data`属性，这个属性是个巨大的数组，而这个数组每四个值为一组，分别对应图片中的每个像素的RGBA值，值范围如下：  
R – 红色 (0-255)  
G – 绿色 (0-255)  
B – 蓝色 (0-255)  
A – alpha 通道 (0-255; 0 是透明的，255 是完全可见的)

只要对这些数字进行重新处理，再`putImageData()`重新放到画布上，图像的效果就会发生变化。

由于高级图像合成不是本文的重点，因此这里就点到为止，重在介绍原理和提供思路。

本人转载自博客   [zhangxinxu][]

by [zhangxinxu][] from [http://www.zhangxinxu.com/wordpress/?p=6165][http_www.zhangxinxu.com_wordpress_p_6165]

[JS canvas_demo]: http://www.zhangxinxu.com/study/201705/js-canvas-image-watermark-synthesis.html
[2017-05-17_001002.png]: /images/20220531/dd5b889e121f432ab6171cb8fe7b361a.png
[2017-05-17_001734.png]: /images/20220531/458950cf367843cd81ac26423a2b56df.png
[2017-05-17_001750.png]: /images/20220531/ecefbb4e91ad4bd792b249b746a38b1d.png
[mm1.jpg]: /images/20220531/bcf4a26c042c4d55b76a6e4b86035cb8.png
[2017-05-17_002105.png]: /images/20220531/34cb2f5f14c84e5e86122957dfaea27d.png
[2017-05-17_002213.png]: /images/20220531/b92f49e31f0d48b198f588c3d724a7a3.png
[mix-blend-mode]: http://www.zhangxinxu.com/wordpress/2015/05/css3-mix-blend-mode-background-blend-mode/
[zhangxinxu]: http://www.zhangxinxu.com/
[http_www.zhangxinxu.com_wordpress_p_6165]: http://www.zhangxinxu.com/wordpress/?p=6165