如何在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/png;base64,R0lGODdhMAAwAPAAAAAAAP”

4、平铺在background上

如何用js和css给一个站内所有图片加上水印

!DOCTYPE html

html

head

meta charset="UTF-8"

titleDocument/title

script src=""/script

style

.str {

font: normal bold 5px Arial;

/* font-size: 5px;*/

color: rgb(224, 226, 226,0.4);

position: absolute;

padding-left: 16px;

padding-top: 53px;

display: none;

}

.str2 {

font: normal bold 5px Arial;

/* font-size: 5px; */

color: rgb(224, 226, 226,0.4);

position: absolute;

padding-left: 66px;

padding-top: 130px;

display: none;

}

/style

/head

body

divHOMEANGEL/div

divHOMEANGEL/div

img src=";fm=26gp=0.jpg" style="width:100px;height:100px;" /

div id="picture" style="width:100%;margin-left: 60px;"

/div

script

$(function () {

var img = [";fm=26gp=0.jpg"];

GetCanvas(img);

})

function AddCanvas(src, ById) {

var img = new Image();

img.src = src

img.onload = function () {

imgW = img.width;

imgH = img.height;

//准备canvas环境

var canvas = document.getElementById(ById);

canvas.width = img.width;

canvas.height = img.height;

var ctx = canvas.getContext("2d");

// 绘制图片

ctx.drawImage(img, 0, 0, img.width, img.height);

// 绘制水印

ctx.font = "20px bold Arial";

ctx.fillStyle = "rgb(224, 226, 226,0.6)";//这里是颜色

ctx.fillText("watermark watermark", 20, 60);

ctx.fillText("watermark watermark", 120, 160);

ctx.fillText("watermark watermark", 220, 220);

//ctx.fillText("HOMEANGEL", 90, 130);

canvas.style.width = "100px";

canvas.style.height = "100px";

}

}

function GetCanvas(Strhtml) {

if (Strhtml.length 0 Strhtml != "") {

var html = "";

for (var i = 0; i Strhtml.length; i++) {

var str = "sample" + (i + 1);

html += ' canvas id=' + str + ' name="test" src=' + Strhtml[i] + ' "/canvas';

}

$("#picture").html(html);//这里图片添加到html，然后for，添加水印

}

for (var i = 0; i Strimg.length; i++) {

var str = "sample" + (i + 1);

var src = Strhtml[i];

AddCanvas(src, str);//id没传递

}

}

/script

/body

js实现图片添加水印

图片加水印，支持文字水印、图片水印，支持多行

码云仓库

Github仓库

javascript 水印怎么写？

javascript 无法做水印，除非用ajax进行交互。需要服务端的支持。

标题名称：javascript水印,html加水印代码
路径分享：http://kswjz.com/article/dsohgdd.html