前端利用canvas给图片添加水印

本文发布于个人我的网站： http://wintc.top/article/27，转载请注明。

　　前两天给我的网站添加了一个小功能，就是在文章编辑上传图片的时候自动给图片加上水印。给网页图片添加水印是个常见的功能，也是互联网内容做者保护本身版权的方法之一。本文简单记录一下借助canvas在前端实现图片添加水印的实现方法。
　　canvas元素其实就是一个画布，咱们能够很方便地绘制一些文字、线条、图形等，它也能够将一个img标签里渲染的图片画在画布上。
　　在上传文件到后端的时候，使用input标签读取用户本地文件后获得的实际上是一个Blob对象（更精确的说是File对象，特殊的Blob对象）；而在页面上展现一个图片使用的是img标签；绘制功能用canvas实现。添加水印的功能须要在img标签、canvas画布、Blob对象这三者之间相互转换，经过一些API能够完成这个工做：

　　咱们能够从本地读取图片Blob，而后渲染到img标签，使用canvas绘制img内容而且绘制水印内容到画布，再将canvas内容转为Blob对象上传服务器，这样就完整实现了图片+水印的功能。

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

　　本地读取图片文件将会获得一个Blob对象，咱们能够借助FileReader.readAsDataURL方法读取Blob的内容，并获得一个Base64编码的文件内容，能够将该内容赋值给img.src从而在浏览器上渲染出本地的图像。固然，img并不是必须渲染到DOM树。读取操做是个异步操做，读取完成会触发load事件，为了便于以后的调用，咱们能够用一个Promise包装这个操做，最后返回一个Promise对象。

function blobToImg (blob) {
  return new Promise((resolve, reject) => {
    let reader = new FileReader()
    reader.addEventListener('load', () => {
      let img = new Image()
      img.src = reader.result
      img.addEventListener('load', () => resolve(img))
    })
    reader.readAsDataURL(blob)
  })
}

2、将img标签内容绘制到canvas画布

　　调用canvas元素画布上下文对象的drawImage方法便可实现将img内容绘制到画布。

function imgToCanvas (img) {
  let canvas = document.createElement('canvas')
  canvas.width = img.width
  canvas.height = img.height
  let ctx = canvas.getContext('2d')
  ctx.drawImage(img, 0, 0)
  return canvas
}

　　drawImage这个方法能够传入多个参数，以定义绘制的图像的范围，这里传入的0, 0定义从图像左上角开始绘制，后面能够继续传入两个参数来定义图像的绘制终点，不过这里整个图片都要绘制到canvas，因此采用默认值便可。

3、canvas画布上绘制水印并转换为Blob对象

　　在图片上传的时候，咱们一般采用FormData，图片文件以一个Blob对象的形式放到FormData中，因此咱们须要把canvas再转为Blob以便文件上传等操做。利用HTMLCanvasElement.toBlob方法：

function watermark (canvas, text) {
  return new Promise((resolve, reject) => {
    let 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、图片添加水印完整接口

　　将以上三个步骤结合起来，就完整地实现了从图片添加水印，下面是一个简单的使用示例：从本地选择一个图片文件，而后添加水印后，在传入的dom元素下预览添加水印后的图片。

function imgWatermark (dom, text) {
  let input = document.createElement('input')
  input.setAttribute('type', 'file')
  input.setAttribute('accept', 'image/*')
  input.onchange = async () => {
    let img = await blobToImg(input.files[0])
    let canvas = imgToCanvas(img)
    let blob = await watermark(canvas, text)
    // 此处将Blob读取到img标签，并在dom内渲染出来；若是是上传文件，能够将blob添加到FormData中
    let newImage = await blobToImg(blob)
    dom.appendChild(newImage)
  }
  input.click()
}

　　给页面加一个id为container的div元素，而后以下调用：

let dom = document.querySelector('#container')
imgWatermark(dom, '水印文字')

　　这样就完整地给图片添加了水印效果，下面看一下实际效果，你也能够在线体验。

　　添加水印前：

　　添加水印后（水印内容：“腾冲·清凉山”）：

5、总结

　　本文仅仅介绍了图像+水印文字的简单实现，只是作了一些示例性的介绍，其实能够实现更复杂的水印效果，好比图像、半透明或渐变色文字等，可是原理都是同样的。另外文中涉及的一些接口其实颇有用，好比一个常见功能是头像上传的预览和剪裁，这时候你能够利用FileReader来读取文件内容预览，利用CanvasRenderingContext2D.drawImage来实现剪裁功能。关于本文涉及接口的更多详细用法，能够参照MDN文档，文章中的API都使用了连接的形式，你能够快速查看它们的文档。