html2canvas给图片添加水印,canvas 为图片添加水印

原理：在图片上面定义 canvas，固定的位置添加水印文字

源代码：

Title

var img = new Image();

//引入图片地址

img.src = "img/watermark.jpg"

img.onload = function () {

var canvas = document.getElementById('watermark');

//返回一个用于在画布上绘图的环境,当前唯一的合法值是2d，二维绘图

var context = canvas.getContext("2d");

/**画布上绘制图像、画布或视频，

* 参数——img：规定要使用的图像、画布或视频

* sx：可选。开始剪切的 x 坐标位置

* sy：可选。开始剪切的 y 坐标位置

swidth：可选。被剪切图像的宽度。

sheight：可选。被剪切图像的高度。

x：在画布上放置图像的 x 坐标位置。

y：在画布上放置图像的 y 坐标位置。

width：可选。要使用的图像的宽度(伸展或缩小图像)。

height：可选。要使用的图像的高度(伸展或缩小图像)。**/

context.drawImage(img, 0, 0);

context.font = "20px microsoft yahei";

context.fillStyle = "#ffffff";

context.fillText("biubiu", 450, 500);

}

效果图：

watermark.png