canvas应用之前端实现为图片添加水印功能

canvas应用之前端实现为图片添加水印功能

技术杂谈小彩虹2021-08-16 11:51:25340A+A-

前言

最近翻看面试题目,无意中发现了这个题目。所以自己就写一个demo。感觉很有趣,特分享出来。

实现思路

我们分析一下,什么叫图片添加水印?常见的添加水印都是在图片上面添加一个图层(内容:防伪标识或者是公司的logo之类)。 我们去淘宝找人设计的话,一般都是给添加了水印的图片。只要不给你原型图,基本上无法去除水印。

写到这里我们基本上可以判断,所谓的水印技术,就是两张图片。一张是我们的原图,另一种就是水印图片,然后水印图片就是那种透明背景的图片,这样两张图片叠加,既可以看见原图的内容,还加了标识。

方向确定了。现在我们需要考虑的就是如何让两张图片上下覆盖(请不要想着css实现,因为我们最终是要以图片的形式展示)。因为最后是要形成一张照片,所以就需要两张照片融合。

联想现实,我们如何让两个物体融合,固体肯定是无法直接融合。那么我们就需要将两块固体分别融化,然后按照规则,合并到一起。接着变回固体。

思路清晰了。 首先我们就是将两张图片,原图以及logo图片分别,变成二进制流(base64)。然后以canvas为画板,就像刷油漆一样,先画一层原图的样式,然后再将我们的logo覆盖上去。

在这里插入图片描述

实现:将图片变成二进制流

这个地方实现思路比较简单,主要是借助HTML5 的FileReader读取文件的信息,并将其转为base64。

/**
 * 将文件转换为base64
 * 这个函数我在 大文件上传那篇文章里也用过,感兴趣的同学可以去看看
 */
function fileParse (file, type) {
	 const caseType = {
	     'base64': 'readAsDataURL',
	     'buffer': 'readAsArrayBuffer'
	 }
	 const fileRead = new FileReader()
	 return new Promise(resolve => {
	     fileRead[caseType[type]](file)
	     fileRead.onload = (res) => {
	     resolve(res.target.result)
	     }
	 }) 
}

实现:刷油漆式的在canvas上绘制两张图片

利用了canvas 的 drawImage方法。

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
参数 描述
img 规定要使用的图像、画布或视频。
sx 可选。开始剪切的 x 坐标位置。
sy 可选。开始剪切的 y 坐标位置。
swidth 可选。被剪切图像的宽度。
sheight 可选。被剪切图像的高度。
x 在画布上放置图像的 x 坐标位置。
y 在画布上放置图像的 y 坐标位置。
width 可选。要使用的图像的宽度。(伸展或缩小图像)
height 可选。要使用的图像的高度。(伸展或缩小图像)

水印图片的形成,就是利用drawImage 方法在canvas上绘制就可以了。

总结

整体来讲思路比较简单,具体实现还是有些小细节。具体代码可以关注我的公众号聪明可爱小轩轩回复 mergeImg 领取。需要注意的一点上,代码需要运行的服务下,建议使用http-serve。

同时,我的例子还有很多扩展的地方,比如我们可以移动我们的的水印的位置,这个在drawImage 中就可以配置。 当然这个例子有个鸡肋的地方,就是需要有一个水印图片。其实利用我们的所学知识就可以实现。我们正常中,可以将html生成图片下载,给用户一个输入框,输入水印文字,然后生成图片,再走上面的流程。文字大小,字体颜色,字体位置均可以。

这是我的一个实现思想,不一定对,但是确实可以尝试,明天争取实现这个功能,并分享出来。

如果感觉我的文章对你有帮助,请点赞,关注公众号【聪明可爱小轩轩】。您的点赞,关注就是我持续创作的动力。感谢!!!

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示 | 支付宝红包
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1
本网站由 提供CDN/云存储服务

联系我们