用cavans给图片加水印

最新推荐文章于 2024-10-01 20:12:28 发布

daizikui

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量163

点赞数 2

文章标签： javascript

本文链接：https://blog.csdn.net/daizikui/article/details/136979027

版权

本文介绍了如何在HTML页面中使用Vue.js开发一个脚本，当图片加载完成后在其上添加动态水印。通过JavaScript操作DOM和CanvasAPI，实现在图片右下角显示Watermark的文字水印。

摘要由CSDN通过智能技术生成

原图片

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>

效果