如何在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上

网页图片中添加水印有两种方法：

一、给每一张需要上传的网站用ps软件手动添加水印。

二、网站系统后台设置自动添加水印，例如织梦网站系统后台设置水印的步骤是：系统----系统基本参数----附件设置-----图集是否使用水印(小图也会受影响)，选择是

网站系统后台大部分都有，需要设置水印，可按照自己网站的后台设置。

为页面添加文字水印设置方法如下：

1、可以用电脑上的“Word”来给做文字水印，首先要打开电脑上的“Word”。

2、打开之后，点击界面中的“水印”图标。

3、然后选择点击d出选项中的“自定义水印”。

4、在水印设置界面中，输入要设置成水印的文字，再点击“确定”。

5、这样设置好之后，文字水印就设置好了。

---