js上传图片时添加水印

前言

在实际业务开发中，经常会遇到上传图片时要添加上自己网站水印，这个水印各种类型都有，这里主要讲下我在开发中，客户的需要在上传图片时添加上当前录入表单的一些信息，方便后期直接查看图片追溯信息。先放下最终实现的上传成功后缩略图和预览图：

实现该功能主要有2种：原生的canvas实现和使用html2canvas库。当前项目是基于element-ui的一个vue项目，提供思路，代码仅供参考。

原生的canvas

其思路就是File对象–>img DOM元素–>转为canvas–>画水印图片–>画文本–>转为blob–>转为File对象（后端上传需要File对象）–>调用接口上传给服务器

1、获取File对象，并转为DOM元素

element的上传组件自带回调函数里可以获取到当前上传文件的file对象，里面的file.raw就是我们要的File对象，代码如下：

// file为element的上传组件自带回调函数里的一个文件对象file2Img(file) {return new Promise((resolve, reject) => {let img = new Image()img.src = URL.createObjectURL(file.raw)img.addEventListener('load', () => resolve(img))})}

2、DOM元素转为canvas对象

img2Canvas(img) {const canvas = document.createElement('canvas')canvas.width = img.widthcanvas.height = img.heightconst ctx = canvas.getContext('2d')ctx.drawImage(img, 0, 0)return canvas},

3、canvas对象里画水印背景图

// y是画图片的y轴定位坐标drawWatermark(ctx, y) {return new Promise((resolve, reject) => {const img = new Image()img.src = require('@/assets/images/watermark-bg.png')img.addEventListener('load', () => {ctx.drawImage(img, 0, y)console.log(img)resolve()})})},

4、canvas对象里画文本

drawText(ctx, y) {// 设置填充字号和字体，样式ctx.font = '16px 宋体 bold'ctx.fillStyle = 'rgba(255, 255, 255)'// 设置左对齐ctx.textAlign = 'left'ctx.fillText('昭通高速巧家收费站', 100, y + 40)ctx.fillStyle = 'rgba(0, 0, 0)'ctx.fillText('巡查内容：日巡查', 10, y + 86)},

5、canvas对象转为blob对象

canvas2Blob(canvas) {return new Promise((resolve, reject) => {canvas.toBlob(blob => resolve(blob))})},

6、最后通过调用上面的方法在上传前处理下文件即可

// file为element的上传组件自带回调函数里的一个文件对象async addWatermark(file) {// 把上传的图片转为img dom对象const img = await this.file2Img(file)// 把图片画在canvas上，并返回canvas对象const canvas = this.img2Canvas(img)const ctx = canvas.getContext('2d')// 高度是根据固定的水印图片高度计算const y = canvas.height - 240// canvas上画水印图片await this.drawWatermark(ctx, y)// canvas上画文本this.drawText(ctx, y)// 转为blob对象const blob = await this.canvas2Blob(canvas)// 转为后端要的file对象const newFile = new File([blob], file.name, {type: file.raw.type })return newFile}

html2canvas库

使用该库思路较为简单，就是把上传的图片作为背景图（html2canvas不能画背景图，这里用img标签替换），把水印通过html+css方式写在背景图上，然后用html2canvas来把html转化为canvas对象，再把canvas对象转为blob对象，最后转为File对象传给后端。

// html和css省略，主要就是写了一个以上传图片为背景，加上水印样式的domimport html2canvas from 'html2canvas'async addWatermark(file) {// 获取用img标签代替背景图的img DOM元素const uploadImg = document.querySelector('#uploadImg')// file为element的上传组件自带回调函数里的一个文件对象，file.raw是上传文件的File对象，img显示当前上传图片uploadImg.src = URL.createObjectURL(file.raw)// document.querySelector('#capture')获取需要转为canvas的dom节点const canvas = await html2canvas(document.querySelector('#capture'))// 转为blob对象const blob = await this.canvas2Blob(canvas)// 转为后端要的file对象const newFile = new File([blob], file.name, {type: file.raw.type })return newFile}

注意：html2canvas库绘制的DOM必须是可见的，但是实际项目中，用于转为canvas的这个DOM用户是不可见的，简单的方式就是通过css的定位属性，把这个DOM片段定位出浏览器视图外面。

优缺点

从代码里可以看出，原生canvas步骤比较繁琐，且很死板，添加的水印背景图还需要固定大小，那么里面的文字如果是不定的，很容易溢出背景图。而用html2canvas库就没这个顾虑，毕竟写css样式很灵活。但是这个库体量还是较大的，压缩后还有46kb，而且有冗余DOM。所以建议简单水印可用原生canvas，相对复杂的再用这个库。