前端实现给图片添加水印

一、利用Canvas

::: tip

实现步骤:

上传图片，转换为base64格式的数据，利用Image加载图片
利用canvas写入图片，然后绘制水印
最后通过canvas输出添加水印后的base64数据

:::

1. 本地读取图像文件渲染到img标签

::: tip

通过intpt[type=file]读取文件，将会得到已被Blob对象,借助FileReader.readAsDataURL读取Blob内容并得到Base64编码

读取操作是个异步操作，读取完成后会触发load事件，为了方便之后的使用，使用一个Promise封装这个操作

:::

// blob转图像
const blobToImg = (blob) => {return new Promise((resolve,reject) => {const reader = new FileReader()reader.addEventListener('load',() => {const img = new Image()img.src = reader.resultimg.addEventListener('load',() => resolve(img))})reader.readAsDataURL(blob)})
}

2. 将img的内容绘制到canvas中

::: tip

drawImage这个方法可以传入多个参数，以定义绘制的图像的范围，这里传入的0, 0定义从图像左上角开始绘制，后面可以继续传入两个参数来定义图像的绘制终点

:::

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

3. 在canvas画布上添加水印并转换为Blob对象

const canvasWatermark = (canvas,text) => {return new Promise((resolve,reject) => {const ctx = canvas.getContext('2d')// 设置填充字号和字体，样式ctx.font = "24px 宋体"ctx.fillStyle = "#FFC82C"// 设置右对齐ctx.textAlign = 'right'// 在指定位置绘制文字，这里指定距离右下角20坐标的地方ctx.fillText(text, canvas.width - 20, canvas.height - 20)canvas.toBlob(blob => resolve(blob))})
}

4. 使用方法

  <!-- 只接受图片类型文件 图片上传--><input type="file" id="upload" accept="image/*"><!-- 添加水印后展示区域 --><div id="container"></div>

	const inputEl = document.getElementById('upload')const container = document.getElementById('container')inputEl.addEventListener('change', async (e) => {const waterImg = await imgWaterMark(e.target.files[0], 'Ocean')container.appendChild(waterImg)})// 读取本地文件渲染到imgconst blobToImg = (blob) => {return new Promise((resolve, reject) => {const reader = new FileReader()reader.addEventListener('load', () => {let img = new Image()img.src = reader.resultimg.addEventListener('load', () => resolve(img))})reader.readAsDataURL(blob)})}// 将img内容绘制到canvas画布const imgToCanvas = (img) => {let canvas = document.createElement('canvas')canvas.width = img.widthcanvas.height = img.heightlet context = canvas.getContext('2d')context.drawImage(img, 0, 0)return canvas}// canvas画布上绘制水印并转换为blob对象const waterMark = (canvas, text) => {return new Promise((resolve, reject) => {let ctx = canvas.getContext('2d')// 设置填充的字号 字体 样式ctx.font = "30px Josefin Slab"ctx.fillStyle = "#fff"// 右对齐ctx.textAlign = 'right'// 指定位置绘制文字ctx.fillText(text, canvas.width - 20, canvas.height - 20)canvas.toBlob(blob => resolve(blob))})}// 绘制水印并返回添加水印后的图片const imgWaterMark = async (file, text) => {let img = await blobToImg(file)let canvas = imgToCanvas(img)let blob = await waterMark(canvas, text)// 此处将Blob读取到img标签，并在dom内渲染出来；如果是上传文件，可以将blob添加到FormData中let newImage = await blobToImg(blob)return newImage}