前端利用canvas給圖片添加水印
來源 |?https://wintc.top/article/27
一、本地讀取圖像文件渲染到img標(biāo)簽
function blobToImg (blob) {return new Promise((resolve, reject) => {let reader = new FileReader()reader.addEventListener('load', () => {let img = new Image()img.src = reader.resultimg.addEventListener('load', () => resolve(img))})reader.readAsDataURL(blob)})}
二、將img標(biāo)簽內(nèi)容繪制到canvas畫布
function imgToCanvas (img) {let canvas = document.createElement('canvas')canvas.width = img.widthcanvas.height = img.heightlet ctx = canvas.getContext('2d')ctx.drawImage(img, 0, 0)return canvas}
三、canvas畫布上繪制水印并轉(zhuǎn)換為Blob對(duì)象
function watermark (canvas, text) {return new Promise((resolve, reject) => {let ctx = canvas.getContext('2d')// 設(shè)置填充字號(hào)和字體，樣式ctx.font = "24px 宋體"ctx.fillStyle = "#FFC82C"// 設(shè)置右對(duì)齊ctx.textAlign = 'right'// 在指定位置繪制文字，這里指定距離右下角20坐標(biāo)的地方ctx.fillText(text, canvas.width - 20, canvas.height - 20)canvas.toBlob(blob => resolve(blob))})}
四、圖片添加水印完整接口
function imgWatermark (dom, text) {let input = document.createElement('input')input.setAttribute('type', 'file')input.setAttribute('accept', 'image/*')input.onchange = async () => {let img = await blobToImg(input.files[0])let canvas = imgToCanvas(img)let blob = await watermark(canvas, text)// 此處將Blob讀取到img標(biāo)簽，并在dom內(nèi)渲染出來；如果是上傳文件，可以將blob添加到FormData中let newImage = await blobToImg(blob)dom.appendChild(newImage)}input.click()}
給頁(yè)面加一個(gè)id為container的div元素，然后如下調(diào)用：
let dom = document.querySelector('#container')imgWatermark(dom, '水印文字')
五、總結(jié)
評(píng)論
圖片
表情