JS中图片生成水印，使用canvas绘图

Hacker_2020

已于 2023-02-25 11:07:37 修改

阅读量568

点赞数 1

分类专栏：前端文章标签： javascript

于 2020-06-10 18:21:10 首次发布

本文链接：https://blog.csdn.net/weixin_40362806/article/details/106672505

版权

前端专栏收录该内容

34 篇文章 5 订阅

订阅专栏

JS中图片生成水印，使用canvas绘图

通过js赋值到页面上，可以根据canvas进行绘图，在这里需要注意的是，要计算好图片的尺寸，不然图片会失真（模糊），下面展示的 代码片.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <style>
        .str {
            font: normal bold 5px Arial;
            /*            font-size: 5px;*/
            color: rgb(224, 226, 226,0.4);
            position: absolute;
            padding-left: 16px;
            padding-top: 53px;
            display: none;
        }

        .str2 {
            font: normal bold 5px Arial;
            /* font-size: 5px; */
            color: rgb(224, 226, 226,0.4);
            position: absolute;
            padding-left: 66px;
            padding-top: 130px;
            display: none;
        }
    </style>
</head>
<body>
    <div class="str">HOMEANGEL</div>
    <div class="str2">HOMEANGEL</div>
    <img src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3252521864,872614242&fm=26&gp=0.jpg" style="width:100px;height:100px;" />
    <div class="layui-input-inline" id="picture" style="width:100%;margin-left: 60px;">

    </div>

    <script>
        $(function () {
            var img = ["https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3252521864,872614242&fm=26&gp=0.jpg"];
            GetCanvas(img);
        })
        function AddCanvas(src, ById) {
            var img = new Image();
            img.src = src
            img.onload = function () {
                imgW = img.width;
                imgH = img.height;
                //准备canvas环境
                var canvas = document.getElementById(ById);
                canvas.width = img.width;
                canvas.height = img.height;
                var ctx = canvas.getContext("2d");
                // 绘制图片
                ctx.drawImage(img, 0, 0, img.width, img.height);
                // 绘制水印
                ctx.font = "20px bold Arial";
                ctx.fillStyle = "rgb(224, 226, 226,0.6)";//这里是颜色
                ctx.fillText("watermark  watermark", 20, 60);
                ctx.fillText("watermark  watermark", 120, 160);
                ctx.fillText("watermark  watermark", 220, 220);
                //ctx.fillText("HOMEANGEL", 90, 130);
                canvas.style.width = "100px";
                canvas.style.height = "100px";
            }
        }
        function GetCanvas(Strhtml) {
            if (Strhtml.length > 0 && Strhtml != "") {
                var html = "";
                for (var i = 0; i < Strhtml.length; i++) {
                    var str = "sample" + (i + 1);
                    html += ' <canvas   id=' + str + ' name="test" src=' + Strhtml[i] + '  "></canvas>';
                }
                $("#picture").html(html);//这里图片添加到html，然后for，添加水印
            }
            for (var i = 0; i < Strimg.length; i++) {
                var str = "sample" + (i + 1);
                var src = Strhtml[i];
                AddCanvas(src, str);//id没传递
            }
        }

    </script>
</body>