//通過file數據產生圖片Domfunction createfileImg(file) {return new Promise((resolve, reject) => {let img = new Image()img.src = URL.createObjectURL(file)//img綁定load事件（載入完畢后 返出圖片Dom）img.addEventListener('load', () => resolve(img))})}//畫布配置function handleCanvas(img) {// const canvas = document.createElement('canvas')var canvas = document.getElementById("myCanvas");canvas.width = 300 //也可使用圖片的寬 和 高canvas.height = 300//返回一個用于繪畫的環境const ctx = canvas.getContext('2d')//寫入圖片ctx.drawImage(img, 0, 0, 300, 300)//寫入水印文字ctx.font = '700 20px microsoft yahei'ctx.fillStyle = '#fff'ctx.textAlign = 'left'ctx.fillStyle = 'rgba(255, 255, 255,)'ctx.fillText(`${moment().format("YYYY-MM-DD HH:mm:ss")}`, 20, 290);return canvas}//創建blob對象，用于展示畫布上的圖片function createCanvasBlob(canvas) {return new Promise((resolve, reject) => {canvas.toBlob(blob => resolve(blob))})}async function customRequest(e) {//拿到圖片let fil = document.getElementById('fileId')//創建圖片const img = await createfileImg(fil.files[0])//處理畫布const canvas = handleCanvas(img)const blob = createCanvasBlob(canvas)// 轉為后端要的file對象const newFile = new File([blob], fil.files[0].name, { type: fil.files[0].type })//正常調用上傳的接口........}

效果圖：

?

總結

以上是生活随笔為你收集整理的js 图片上传时加水印的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。