canvas 怎么实现为ajax返回的图片添加水印

1.文件——打开需要添加水印的图片

2.点击饰品-导入更多饰品-用户自定义-导入-选择水印文件（导入完成后）

3.点击饰品-用户自定义-选择你导入的水印文件

4.用鼠标控制水印的位置。选择好自己想要的位置

5.可以鼠标单击水印————可以调整水印的透明度，方向，大小

6.OK

Canvas简介及实践：

canvas是HTML5新增的元素，主要作用是支持用JS画图。

一、创建Canvas元素

二、通过JavaScript来绘制

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成。

•1:JavaScript使用id来寻找canvas元素。

•2:创建context对象。getContext(“2d”)对象是内建的HTML5对象。

3:绘制一个红色的矩形。fillStyle方法将其染成红色，fillRect方法规定了形状、位置和尺寸

三、实例-图像 把一幅图像放置到画布上：

四、水印生成主流程

1、建立一个画布：

2、生成水印字符串：

3、CanvasElement.toDataURL() 方法返回一个包含图片展示的data URLs，包含了Base64过的图像信息。说明：Data URLs, URLs prefixed with the data: scheme, allow content creators to embed small files inline in documents. 例如：“data:image/pngbase64,R0lGODdhMAAwAPAAAAAAAP”

4、平铺在background上

问题：

设计：

难点：

解决：

1.先画个矩形

demo如下：

water_mark.js

demo.html

使用方法

页面中引入water_mark.js，然后调用 waterMark.init 法。参数是一个可配置的对象。

参数说明：

---