前端使用Canvas给图片加水印

今天呢, 我们来实现一个加水印的功能, 这种使用场景还很多, 比如我现在写作的微信公众平台, 或者一些后台的审核等等

那么这种功能如何实现呢?

我们先来准备一个按钮, 当用户点击的时候展示

img标签我们也加一下, 最后用于展示

const image = document.querySelector(‘img’)
基础部分准备好之后, 现在我们写功能部分

我们使用image构造函数的方式来加载一个

const imgs = new Image()
imgs.src = ‘oss链接…’
imgs.onload = () => {
// 我们需要加水印了
}
加载完成之后, 我们获取一下的宽高, 用于后面的水印位置展示及canvas的大小

const width = imgs.width
const height = imgs.height
现在呢, 我们创建一下canvas并设置大小

// 创建一个canvas元素
const canvas = document.createElement(‘canvas’);
const context = canvas.getContext(‘2d’)
// 设置宽高
canvas.width = width
canvas.height = height
随后我们使用canvas的deawImage方法来绘制

context.drawImage(imgs,0,0,width, height);
添加文字样式

context.fillStyle = ‘#fff’;
context.font = ’30px Arial’;
// 设置位置
context.textBaseline = ‘bottom’;
context.textAlign = ‘right’;
开始绘制文字

context.fillText(‘她的码农’, width-10, height-10);
最后生成并展示即可

// 生成
const baseImageUrl = canvas.toDataURL(‘image/png’);
// 展示
image.src = baseImageUrl
我们看一下效果

效果我们就实现了

今天就讲解到这里

我们下期见