canvas 设置背景水印效果，保存canvas为图片

项目中可能会经常用到生成背景水印的需求，前端可通过canvas生成

代码很简单，先看效果：

主要利用 canvas 的 canvas.toDataURL('image/png') 生成对应的图片，代码如下

function waterPrint(str) {
  // canvas 生成背景图片
  const id = 'dha324234'
  const canvas = document.createElement('canvas')
  canvas.width = 180
  canvas.height = 120

  const ctx = canvas.getContext('2d')
  ctx.rotate(-20 * Math.PI / 180)
  ctx.font = '12px'
  ctx.fillStyle = 'rgba(180, 180, 180, 0.6)'
  ctx.textAlign = 'center'
  ctx.textBaseline = 'middle'
  ctx.fillText(str, canvas.width / 20, canvas.height )

	document.getElementById('water-print').style.background = 'url(' + canvas.toDataURL('image/png') + ') left top repeat'

	// canvas 保存为背景图片，提供下载效果
	document.getElementById('save').download = '自定义文件名'
	document.getElementById('save').href = canvas.toDataURL('image/png')
}

waterPrint('测试水印文字')

通过 a 标签可实现点击下载效果，主要依赖代码如下：

document.getElementById('save').download = '自定义文件名'
document.getElementById('save').href = canvas.toDataURL('image/png')

总结：实现代码很简单，掌握原理，可在不同场景框架下使用