小tips:使用canvas在前端实现图片水印合成

这篇文章发布于 2017年05月17日,星期三,01:09,归类于 Canvas相关。 阅读 67051 次, 今日 5 次 21 条评论

 

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

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

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

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

如果仅仅是普通的合成,例如一个底图和一个PNG水印图片合成,直接使用canvasdrawImage()方法即可,语法如下:

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

各个参数示意为:

参数 描述
img 用来被绘制的图像、画布或视频。
sx 可选。img被绘制区域的起始左上x坐标。
sy 可选。img被绘制区域的起始左上y坐标。
swidth 可选。img被绘制区域的宽度(如果没有后面的width或height参数,则可以伸展或缩小图像)。
sheight 可选。img被绘制区域的高度(如果没有后面的width或height参数,则可以伸展或缩小图像)。
x 画布上放置img的起始x坐标。
y 画布上放置img的起始y坐标。
width 可选。画布上放置img提供的宽度(可能会有图片剪裁效果)。
height 可选。画布上放置img提供的高度(可能会有图片剪裁效果)。

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

我们直接案例吧,您可以狠狠地点击这里:JS canvas水印图片合成demo

demo页面的功能如下:

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

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

选择图片

选择一张小于50K的图片,例如这张:
图片选择示意

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

合成后预览效果图

不要疑惑为什么不使用这张图片?

因为图片有大片浅色区域,水印看不清楚。

此时,我们直接右键就可以保存这张合成的图片了:
右键保存图片示意

保存到桌面的图片信息展示

此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混合模式的,此时可能就需要借助算法来实现了。

原理为,使用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()重新放到画布上,图像的效果就会发生变化。

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

三、结束语

新浪微博今天财报很靓丽,一天股价涨了20%, 我整个人顿时就不好了!

微博股价

倒不是因为我没买微博的股票,而是让我对人生产生了怀疑,新浪微博产品做的这么差,前端这块体验也是问题多多,性能也不咋地,但是这赚钱能力,用户量溜得飞起。让我感觉,前端技术学得再扎实,体验做得再极致好像也没有什么卵用,积极性受到了影响,三观产生了动摇。

不过,很快我就释然了。就好像一个长得很不怎么样,有没有什么钱的男的,娶了个花仙子,不要怀疑人生,有可能人家下盘内功好得惊人!大多数人下盘内功都是普通水准,此时如果外在还又不怎么样,那就真的就惨了,天天只有看别人撒糖,自己独自吃狗粮的份。

(本篇完)

分享到:


发表评论(目前21 条评论)

  1. cee说道:

    安卓浏览器,微信浏览器不显示图片。

  2. 导出图片报错说道:

    toDataURL的方法错误 Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement

  3. yuhui06说道:

    哈哈哈哈哈啊哈

  4. lucien说道:

    我用drawImage()方法绘制图片,出来的大小比原图大非常多(原图的两到三倍),请问有解决办法吗?

  5. 学习使我不快乐说道:

    只要你骂新浪微博,我们就是朋友!不过话虽这么说,还是解释一下我平常用新浪微博的主要原因是关注的画画和写文的大神们、喜欢的明星们都用新浪微博,所以不用没办法,但是很多体验真的不好……

  6. lkf说道:

    早点看到大神的就好了。
    之前做了一个一样的,但是折腾了很久,因为用户要求那个水印可以自己选择放置位置,当时真的弄了好久。
    好像可以通过你另一篇博文,来弄个按钮,直接点击下载canvas的data

  7. undefined说道:

    大神教下盘功夫吗?

  8. 请问底图画到canvas后怎么只出现一角说道:

    请问底图画到canvas后怎么只出现一角,也就是说底图只显示了一部分,怎么把底图全部显示呢

  9. 神秘博士说道:

    花仙子是谁

  10. loki说道:

    张含韵要易主了?! 怎么可能?!

  11. DeathGhost说道:

    哈哈,你的demo 永远是哪个女孩…路过踩下…

  12. 墨丶水瓶说道:

    万年不变的张含韵 ,怕是中了张的毒了吧 ?

  13. 小明说道:

    cover.html:82 Uncaught DOMException: Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’: Tainted canvases may not be exported.

    在chrome中会报上述错误,火狐没问题,这该怎么解决呢?

  14. meepo说道:

    还是应该用张含韵。可以打深色的水印

  15. 多多说道:

    最近更新很频繁呀,每天进来都有收获