标签：ima 绘制 none height 水印 asd tle raw pen
最近在工作接到了一个任务，就是要生成一个水印图片。在网上查阅了相关的资料，一种是PHP方式，一种是JS的方式，由于不太熟，所以两个都试了一下，现在将JS的方式分享如下。
生成文字水印-watermask
一、读取图像文件渲染到img标签
function blobToImg(blob) {
return new Promise((resolve, reject) => {
let reader = new FileReader()
reader.addEventListener(‘load‘, () => {
let img = new Image()
img.src = reader.result
img.addEventListener(‘load‘, () => resolve(img))
})
reader.readAsDataURL(blob)
})
}
二、将img标签内容绘制到canvas画布
function imgToCanvas(img) {
let canvas = document.createElement(‘canvas‘)
canvas.width = img.width
canvas.height = img.height
let ctx = canvas.getContext(‘2d‘)
ctx.drawImage(img, 0, 0)
return canvas
}
三、canvas画布上绘制水印并转换为Blob对象
function watermark(canvas, text, leftNum, topNum) {
return new Promise((resolve, reject) => {
let ctx = canvas.getContext(‘2d‘)
ctx.font = ‘30px 宋体‘
ctx.fillStyle = ‘#FFF‘
ctx.textAlign = ‘right‘
ctx.fillText(text, leftNum, topNum)
canvas.toBlob(blob => resolve(blob))
})
}
四、图片添加水印接口
function imgWatermark(dom, text, blobObj, leftNum, topNum) {
async function test() {
let img = await blobToImg(blobObj)
let canvas = imgToCanvas(img)
let blob = await watermark(canvas, text, leftNum, topNum)
// 此处将Blob读取到img标签，并在dom内渲染出来；如果是上传文件，可以将blob添加到FormData中
let newImage = await blobToImg(blob)
dom.appendChild(newImage)
}
test()
}
五、最终调用watermask接口函数即可
总结：这个文章在自己的个人博客上也有分享，欢迎大家转载、查看、评论。
标签：ima 绘制 none height 水印 asd tle raw pen
原文地址：https://www.cnblogs.com/liuzhanwei/p/14301906.html
