本文主要是介绍用cavans给图片加水印，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
原图片
index.html
<html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>images</title><script src="./vue.global.js"></script>
</head><body><div id="app"><div><img id="imageId" src="../static/BB1komM9.jpg"/><img id="imageId2" /></div></div>
</body></html><script>// 创建Vue实例 const vmComputed = Vue.createApp({// new Vue({ el: '#app',mounted() {this.addWatermark();},methods: {addWatermark() {// 获取图片元素 const imgElement = document.getElementById('imageId');// 检查图片是否加载完成 if (imgElement.complete) {this.applyWatermark(imgElement);} else {imgElement.onload = () => {this.applyWatermark(imgElement);};}},applyWatermark(imgElement) {// 创建canvas元素 const canvas = document.createElement('canvas');const ctx = canvas.getContext('2d');// 设置canvas的大小与图片相同 canvas.width = imgElement.width;canvas.height = imgElement.height;// 将图片绘制到canvas上 ctx.drawImage(imgElement, 0, 0, imgElement.width, imgElement.height);// 设置水印文本的样式 ctx.font = '40px Arial';ctx.fillStyle = 'red'; // 红色水印 ctx.textAlign = 'right';ctx.textBaseline = 'bottom';// 将水印文本绘制到canvas上 const watermarkText = 'Watermark';ctx.fillText(watermarkText, canvas.width - 20, canvas.height - 20);// 将canvas转换为图片，并替换原图片元素 const dataURL = canvas.toDataURL('image/png');const newImg = new Image();newImg.src = dataURL;const imageId2 = document.getElementById('imageId2');imgElement.parentNode.replaceChild(newImg, imageId2);}}}).mount("#app")</script>效果
这篇关于用cavans给图片加水印的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
