JS 实现前端给图片加水印 及 叠加图片
效果展示（图片来自网络）
代码可在vue项目中运行
如只需要叠加图片则只需要1-2处的代码
只需要水印可以把1-2去掉
<!--叠加图片组件--> <template> <div> <div @click="exportImage"> 叠加图片 </div> <div>原始图 <img :src="baseImgOrginal" alt="基础背景图" /> </div> <div>叠加图 <img :src="overlayImgOrginal" alt="叠加图" /> </div> </div> </template> <script setup> import { ref, reactive } from "vue" //基础背景图 const baseImgOrginal = ref( "https://img0.baidu.com/it/u=1886241991,1074114300&fm=253&fmt=auto&app=138&f=JPEG?w=247&h=439" ) //叠加图 const overlayImgOrginal = ref( "https://img0.baidu.com/it/u=2689048786,1779443774&fm=253&fmt=auto&app=138&f=JPEG?w=664&h=500" ) 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>