js 利用convas添加水印

最新推荐文章于 2024-07-22 17:58:45 发布

Winni_wyl

最新推荐文章于 2024-07-22 17:58:45 发布

阅读量809

点赞数

本文链接：https://blog.csdn.net/wyl1486264100/article/details/79001896

版权

  <canvas id="myCanvas" width="1000" height="500" >您的浏览器不支持Canvas</canvas>

function loadWaterMark() {
    var img = new Image();
    //为新建的img赋值src
    img.src = '/static/content/img/noimage.png';
    // img加载完成
    img.onload = function () {
        //准备canvas
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        // 绘制图片
        context.drawImage(img, 0, 0);
        // 绘制水印
        context.font = "20px microsoft yahei";
        context.fillStyle = "rgb(226, 18, 18)";
        context.fillText("my images", 100, 200);
    }
}