如何在h5網(wǎng)頁添加水印

Canvas簡介及實(shí)踐：

成都創(chuàng)新互聯(lián)公司是一家朝氣蓬勃的網(wǎng)站建設(shè)公司。公司專注于為企業(yè)提供信息化建設(shè)解決方案。從事網(wǎng)站開發(fā)，網(wǎng)站制作，網(wǎng)站設(shè)計(jì)，網(wǎng)站模板，微信公眾號(hào)開發(fā)，軟件開發(fā)，微信小程序開發(fā)，十余年建站對(duì)效果圖設(shè)計(jì)等多個(gè)領(lǐng)域，擁有多年的網(wǎng)站制作經(jīng)驗(yàn)。

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

一、創(chuàng)建Canvas元素

二、通過JavaScript來繪制

canvas 元素本身是沒有繪圖能力的。所有的繪制工作必須在 JavaScript 內(nèi)部完成。

?1:JavaScript使用id來尋找canvas元素。

?2:創(chuàng)建context對(duì)象。getContext(“2d”)對(duì)象是內(nèi)建的HTML5對(duì)象。

3:繪制一個(gè)紅色的矩形。fillStyle方法將其染成紅色，fillRect方法規(guī)定了形狀、位置和尺寸

三、實(shí)例-圖像?把一幅圖像放置到畫布上：

四、水印生成主流程

1、建立一個(gè)畫布：

2、生成水印字符串：

3、CanvasElement.toDataURL()?方法返回一個(gè)包含圖片展示的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給一個(gè)站內(nèi)所有圖片加上水印

!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;

//準(zhǔn)備canvas環(huán)境

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實(shí)現(xiàn)圖片添加水印

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

碼云倉庫

Github倉庫

javascript 水印怎么寫？

javascript 無法做水印，除非用ajax進(jìn)行交互。需要服務(wù)端的支持。