canvas 为图片添加水印
2018-08-20 本文已影响15人
肆意木
原理：在图片上面定义 canvas，固定的位置添加水印文字
源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<canvas id="watermark" width="500px" height="500px"></canvas>
</div>
<script>
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);
}
</script>
</body>
</html>
效果图：
watermark.png
