欢迎您访问 最编程 本站为您分享编程语言代码，编程技术文章！

热门搜索/Hot Search

您现在的位置是： 首页

使用 cavans-index.html 为图像添加水印

最编程 2024-07-06 15:00:45
...
<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>

上一篇： 分布式身份证生成计划摘要

下一篇： 构建简单的网络结构（二元分类的 Pytorch 实现）

推荐阅读