canvas给图片添加静态文字水印

前言

记录一下canvas给图片添加静态文字水印。

提示：需要对canvas画布有一定的了解

第一步我们把需要添加水印的图片画在画布上

  function canvasImage (image) {
            let canvas = document.createElement('canvas')
            let context = canvas.getContext('2d')
            canvas.width = image.width
            canvas.height = image.height
            // document.body.appendChild(canvas)
            context.drawImage(image,0,0)
            return canvas
        }

第二步在canvas上画出我们需要的文字，其中gradient给文字添加了一个渐变颜色

function canvasText(canvas,text){
           
                let context = canvas.getContext('2d')
            let gradient = context.createLinearGradient(canvas.width -80,canvas.height - 20,canvas.width,canvas.height )
            gradient.addColorStop(0,'blue')
            gradient.addColorStop(0.25,'yellow')
            gradient.addColorStop(0.5,'orange')
            gradient.addColorStop(0.75,'hotpink')
            gradient.addColorStop(1,'green')
            context.fillStyle = gradient
            // 书写文字
            context.font = 'italic 700 30px Arial'
            context.fillText(text,canvas.width -80,canvas.height - 20)
      console.log(canvas.toDataURL('image/png'))
    //   canvas.toDataURL('image/png')这个方法必须放在服务器上跑
    // 将添加完水印的图片渲染在页面上
      document.getElementById('img').src = canvas.toDataURL('image/png')
        }

第三步：等待图片加载完成去执行画布

let image = new Image()
//处理画布图片跨域问题
        image.setAttribute('crossOrigin', 'anonymous') //关键
        //将自己的图片替换
        image.src = '2.jpg'
        
        image.onload =  () => {
           let canvas =  canvasImage(image)
             canvasText(canvas,'水印')
            
           
      
        }

---

最终图片：

总结：静态文字水印较为简单，主要流程是现在画布画入图片，然后再画布里面添加文字水印，最后可以使用 canvas.toDataURL将画布变成一个base64的图片赋值给img标签