Ⅰ 如何用js和css給一個站內所有圖片加上水印
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></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>
<div>HOMEANGEL</div>
<div>HOMEANGEL</div>
<img src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3252521864,872614242&fm=26&gp=0.jpg" style="width:100px;height:100px;" />
<div id="picture" style="width:100%;margin-left: 60px;">
</div>
<script>
$(function () {
var img = ["https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3252521864,872614242&fm=26&gp=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>
Ⅱ 如何結合WebOffice文檔組件實現水印的添加
1、引入weboffice相關的文件，如：js、cab包；
2、新建html頁面，引入weboffice；
3、書寫測試「添加水印」的按鈕
view sourceprint?
1.<input type="button" value="添加水印" onclick="AddWatermark()" />
4、編寫添加水印的JS方法
view sourceprint?
01.//添加水印
02.function AddWatermark() {
03.//獲取文檔對象
04.var obj = document.all.WebOffice1.GetDocumentObject();
05.//選中某塊區域
06.obj.Sections(1).Range.Select();
07.obj.Application.ActiveWindow.ActivePane.View.SeekView = 9;
08.//設置水印文本
09.obj.Application.Selection.HeaderFooter.Shapes.AddTextEffect(0, "www.stepday.com", "宋體", 1, false,false, 0, 0).Select();
10.obj.Application.Selection.ShapeRange.TextEffect.NormalizedHeight = 0;
11.obj.Application.Selection.ShapeRange.Line.Visible = 0;
12.obj.Application.Selection.ShapeRange.Fill.Visible = -1;
13.obj.Application.Selection.ShapeRange.Fill.Solid();
14.//填充色 為十進制顏色
15.obj.Application.Selection.ShapeRange.Fill.ForeColor.RGB = 10444703;
16.obj.Application.Selection.ShapeRange.Fill.Transparency = 0;
17.//0表示水平 315傾斜45度
18.obj.Application.Selection.ShapeRange.Rotation = 315;
19.obj.Application.Selection.ShapeRange.LockAspectRatio = -1;
20.obj.Application.Selection.ShapeRange.Height = obj.Application.CentimetersToPoints(4.92);
21.obj.Application.Selection.ShapeRange.Width = obj.Application.CentimetersToPoints(19.69);
22.obj.Application.Selection.ShapeRange.WrapFormat.AllowOverlap = true;
23.obj.Application.Selection.ShapeRange.WrapFormat.Side = 3;
24.obj.Application.Selection.ShapeRange.WrapFormat.Type = 3;
25.obj.Application.Selection.ShapeRange.RelativeHorizontalPosition = 0;
26.obj.Application.Selection.ShapeRange.RelativeVerticalPosition = 0;
27.obj.Application.Selection.ShapeRange.Left = -999995;
28.obj.Application.Selection.ShapeRange.Top = -999995;
29.obj.Application.ActiveWindow.ActivePane.View.SeekView = 0;
30.obj.Application.ActiveWindow.ActivePane.VerticalPercentScrolled = 2
31.}