图片添加水印

图片添加单行文字水印

使用canvas创建图片画布，再添加文字水印

直接上代码

//watermark.js
export const watermarkImg = url=> {
  let content = 'xxxxx' //水印文字内容
  let imageConnew
  if (url) {
    imageConnew = img //获取图片地址
  }
  let canvas = document.createElement('canvas') //创建canvas容器
  let ctx = canvas.getContext('2d') //获取2d画笔

  // new img   解决canvas跨域报错
  let image = new Image()
  image.crossOrigin = 'anonymous' 
  image.src = imageConnew
  //图片加载完成后
  image.onload = () => {
    canvas.width = image.width //设置canvas容器宽度为原图片宽度
    canvas.height = image.height //设置canvas容器高度为原图片高度
    //在canvas画布上绘制图片 ctx.drawImage(图片, x位置, y位置,  图像宽度, 图像高度);
    ctx.drawImage(image, 0, 0, image.width, image.height)
    //设置文本画笔的样式
    ctx.textAlign = 'left' //设置文本对齐方式
    ctx.textBaseline = 'top' //设置文本基线
    // 计算字体大小
    	//图片宽度太大会导致字体太小看不清，宽度太小文字超出显示不全
    let fontSize = image.width / 3 > 12 * 9 ? Math.ceil(image.width / 3 / 9) : 12
    // ctx.font = '14px Microsoft Yahei' //设置文本字体属性
    ctx.font = `${fontSize}px SourceHanSerif` //设置文本字体属性
    ctx.fillStyle = 'rgba(255, 255, 255,0.8)' //设置文本字体颜色
    // 设置文字阴影的颜色为黑色，透明度为20%
    ctx.shadowColor = 'rgba(0, 0, 0, 1)'
    // 将阴影向右移动15px，向上移动10px
    ctx.shadowOffsetX = 2
    ctx.shadowOffsetY = 2
    // 轻微模糊阴影
    ctx.shadowBlur = 5

    //在canvas画布上绘制文字 ctx.fillText(文字内容, x位置, y位置, 文本最大宽度)
    ctx.fillText(
      content,
      image.width - (content.split('').length * fontSize + 10),
      image.height - (fontSize + 10),
      image.width
    ) //14为文字大小
    //把canvas装换为blob对象 方便下载
    canvas.toBlob(blob => {
      // console.log('base64', blob)
      // a标签下载
      const link = document.createElement('a')
      link.style.display = 'none'
      link.href = URL.createObjectURL(blob)
      // 设置下载名称
      link.setAttribute('download', 'test.jpg')
      document.body.appendChild(link)
      link.click()
      // 下载完清除标签
      document.body.removeChild(link)
    })
    //单纯前端展示
       //watermarkImg =img=>{
       		return new Promise((resolve,reject)=>{
       			...
       			 image.onload = () => {
       				let base64 = canvas.toDataURL('image/png') //把canvas转base64输出
       				resove(base64)
       			 }
       			 image.onerror= () => {
       				reject()
       			 }
       		})
       }
  }