如何在h5网页添加水印

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上

第一步，下载“U速水印工厂”软件并安装。选择左侧的【图像水印】功能按钮，然后点击【添加文件】按钮，将需要水印的图像导入软件，软件支持批处理。请一次全部添加。第二步，设置水印，首先选择水印类型(文字水印或图片水印，单个或多个)；然后设置水印文本内容或者上传logo；最后设置水印样式:大小/颜色/字体/透明度/缩放/旋转角度/水印密度(数量)/位置/边距等。以上实时预览，点击放大预览。第三步，如下图所示，设置好输出目录(文件保存在哪个文件夹)后，点击【开始转换】按钮，启动软件程序。所有图片加水印后，软件会自动打开输出目录文件夹。第四步，从案例中可以看出，所有图片都添加了统一的水印。

---