第一种(较复杂)
根据图片路径获取图片数据,转成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属性为