canvas制作图片水印

概述

以前都是后端同学来处理的，现在有了canvas，
前端同学也可以做出水印来了，
而且要比后端同学做的要精美漂亮。

制作水印的几个步骤

1. 在html中准备好canvas标签
2. 将图片绘制到canvas元素上
3. 向图片上添加水印

canvas标签

<canvas id="myCanvas" width="500" height="500">
	你的浏览器不支持canvas标签，请使用最新版的chrome浏览器
</canvas>

将图片绘制到canvas上

加载图片

// 通过ajax从后台获取，这里直接使用一个图片
var img = new Image();   
img.src = './img/bg.jpg'; 

将图片绘制到canvas上

img.onload = function(){ //图片加载完成后
	var canvas = document.getElementById("myCanvas");
	// 获取canvas句柄（上下文）
	var ctx = canvas.getContext("2d");
	// 绘制图片
	ctx.drawImage(im