html 图片加水印,js给图片加水印的两种方法

第一种(较复杂)

根据图片路径获取图片数据，转成blob类型

用FileReader读取图片blob数据为dataURL

创建img标签，src属性为dataURL

监听img.onload, 创建canvas,将img对象draw在canvas里

添加水印

使用canvas.toBlob转成最终图像

代码

async/await版

/**

*

* @param {图片路径} imgUrl

* @param {图片宽度} width

* @param {图片高度} height

* @param {水印文字} watermarkText

*/

async function watermark(

imgUrl,

width = 300,

height = 300,

watermarkText = "zpfei.ink"

) {

// 1. 根据图片路径获取图片数据，转成blob类型

const fileBlob = await fetch(imgUrl)

.then((r) => r.blob())

.then((file) => file);

// 2. 用`FileReader`读取图片blob数据为dataURL

const reader = new FileReader();

reader.readAsDataURL(fileBlob);

// 3. 创建img标签，src属性为