给网页图片添加水印是个常见的功能，也是互联网内容作者保护自己版权的方法之一。本文简单记录在前端实现图片添加水印的实现方法。

方式一：利用canvas

canvas元素其实就是一个画布，我们可以很方便地绘制一些文字、线条、图形等，它也可以将一个img标签里渲染的图片画在画布上。

实现思路：

1、上传图片，转换为base64格式的数据，利用Image对象加载图片(src可以直接显示base64数据的图片)。

2、利用canvas写入图片，在再绘制水印文本，具体算法见下文。【canvas绘制文本参考：  Canvas绘图基本使用方法  】

3、最后通过canvas输出添加水印后的base64数据。

一、本地读取图像文件渲染到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)
 })
}

二、将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，所以采用默认值即可。

三、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))
 })
}

四、图片添加水印完整接口

将以上三个步骤结合起来，就完整地实现了从图片添加水印，下面是一个简单的使用示例：从本地选择一个图片文件，然后添加水印后，在传入的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, 'fly63前端网')

方式二：第三方库

比如使用watermark.js，它可用于：图片加水印，支持文字水印、图片水印，支持多行.

github地址：https://github.com/brianium/watermarkjs

安装

# install via npm
npm install watermarkjs

# install via bower
bower install watermarkjs

使用

// watermark by local path
watermark(['img/photo.jpg', 'img/logo.png'])
  .image(watermark.image.lowerRight(0.5))
  .then(img => document.getElementById('container').appendChild(img));

// load a url and file object
const upload = document.querySelector('input[type=file]').files[0];
watermark([upload, 'img/logo.png'])
  .image(watermark.image.lowerLeft(0.5))
  .then(img => document.getElementById('container').appendChild(img));

// watermark from remote source
const options = {
  init(img) {
    img.crossOrigin = 'anonymous'
  }
};
watermark(['http://host.com/photo.jpg', 'http://host.com/logo.png'], options)
  .image(watermark.image.lowerRight(0.5))
  .then(img => document.getElementById('container').appendChild(img));

方式三：在线工具类网站

当你只需要给几张图片加水印，或者偶尔需要用到这个功能的时候，其实完全可以不用写代码，网上已经有很多现成的工具，比如：

工具地址：https://www.fly63.com/tool/watermark/

链接: https://fly63.com/article/detial/12259