JS 实现前端给图片加水印 及 叠加图片

效果展示图片来自网络代码可在vue项目中运行如只需要叠加图片则只需要1-2处的代码只需要水印可以把1-2去掉!--叠加图片组件-- template div div clickexportImage 叠加图片 /div div原始图 img :srcbaseImgOrginal alt基础背景图 / /div div叠加图 img :srcoverlayImgOrginal alt叠加图 / /div /div /template script setup import { ref, reactive } from vue //基础背景图 const baseImgOrginal ref( https://img0.baidu.com/it/u1886241991,1074114300fm253fmtautoapp138fJPEG?w247h439 ) //叠加图 const overlayImgOrginal ref( https://img0.baidu.com/it/u2689048786,1779443774fm253fmtautoapp138fJPEG?w664h500 ) const imageData reactive({ baseImgImages: null, overlayImgImages: null, }) // 图片加载工具函数 const loadImage (url) new Promise((resolve, reject) { const img new Image() img.crossOrigin Anonymous img.onload () resolve(img) img.onerror reject img.src url }) // 图片加载方法 const loadImages async () { try { const [baseImg, overlayImg] await Promise.all([ loadImage(baseImgOrginal.value), loadImage(overlayImgOrginal.value), ]) imageData.baseImgImages baseImg imageData.overlayImgImages overlayImg } catch (error) { console.error(图片加载失败:, error) } } // 日期格式化工具 const getFormattedDate () { const today new Date() return ${today.getFullYear()}年${today.getMonth() 1 }月${today.getDate()}日 } // 水印绘制方法 const drawWatermark (ctx, canvas, x, y, fillText) { const fontSize Math.max(12, canvas.width * 0.015) ctx.font bold ${fontSize}px Arial ctx.fillStyle black ctx.textAlign left const textX canvas.width / x const textY canvas.height * y ctx.shadowColor rgba(0, 0, 0, 0.5) ctx.shadowBlur 2 ctx.fillText(fillText, textX, textY) ctx.shadowColor transparent } // 导出图片 const exportImage async () { await loadImages() if (!imageData.baseImgImages || !imageData.overlayImgImages) { alert(请先加载图片) return } // 创建画布 const exportCanvas document.createElement(canvas) const exportCtx exportCanvas.getContext(2d) // 设置画布尺寸 exportCanvas.width imageData.baseImgImages.width exportCanvas.height imageData.baseImgImages.height // 绘制背景图 exportCtx.drawImage(imageData.baseImgImages, 0, 0) // 开始叠加图片 1 // 计算叠加图位置和尺寸 const overlayHeight Math.max(12, exportCanvas.width * 0.1) // 根据需要调整 const overlayWidth (overlayHeight * imageData.overlayImgImages.width) / imageData.overlayImgImages.height const posX imageData.baseImgImages.width * 0.38 - overlayWidth / 2 // 根据需要调整叠加的位置 const posY imageData.baseImgImages.height * 0.533 - overlayHeight / 2 // 根据需要调整叠加的位置 // 绘制叠加图 exportCtx.drawImage( imageData.overlayImgImages, posX, posY, overlayWidth, overlayHeight ) // 叠加图片结束 2 // 添加动态日期水印 3 drawWatermark(exportCtx, exportCanvas, 5, 0.357, getFormattedDate()) // 根据需要调整叠加的位置 //动态水印结束 4 // 创建下载链接 const link document.createElement(a) link.href exportCanvas.toDataURL(image/png) link.download 合成图片_${getFormattedDate()}.png link.click() } /script style/style