javascript - 在页面中添加水印

Question

水印添加

添加水印

function saveScreassenShot(Z) {
    var H = document.getElementById(jwplayer(Z).id);
    var B = (H) ? H.querySelector("video") : undefined;
    if (B) {
    //jwplayer(wqw).pause(!0);
    var F = 1;
    var D = document.createElement("canvas");
    D.width = B.videoWidth * F;
    D.height = B.videoHeight * F;
    Dwidth = window.innerWidth * 0.5;
    Dwidth100 = Dwidth / (D.width / 100);
    Dheight = (D.height / 100) * Dwidth100;
    if (Dheight > 600) {

    var I = document.createElement("a");
    I.innerHTML = "close";
    E = "display: inline-block; margin: 0px auto;background-color: #337ab7;";
    E += "margin-top: 10px; padding: 5px 10px;";
    E += "color: #fff; border-radius: 5px; border: 1px solid #ccc; cursor: pointer;";
    I.setAttribute("style", E);
    I.onclick = function() {
    document.getElementById("popupSave").remove()
    };
    G.appendChild(J);
    G.appendChild(C);
    G.appendChild(I);
    document.body.appendChild(G)
    //jwplayer().play()
    }
    }

感谢大家的帮助:) 非常感谢我找到了一种让它工作的方法！

标签： javascript

Answer 1

要添加水印，首先您应该已经在页面上加载了该水印图像。你的所有代码都应该在它之后运行。

var WI = new Image();
WI.onload = function () {
  // code to activate screenshot button
}
WI.src = "path/to/your/watermark";

其次，您应该将画布的 2d 上下文存储在变量中，以便可以重复使用。并将代码更改为此。

var CT = D.getContext("2d");
CT.drawImage(B, 0, 0, D.width, D.height);
CT.drawImage(WI, D.width - WI.width, 0, WI.width, WI.height);

这应该符合您的要求。

编辑：这里的“WI”是已经加载的水印图像

function saveScreenShot(Z) {
var H = document.getElementById(jwplayer(Z).id);
var B = (H) ? H.querySelector("video") : undefined;
if (B) {
//jwplayer().pause(!0);
var F = 1;
var D = document.createElement("canvas");
D.width = B.videoWidth * F;
D.height = B.videoHeight * F;
Dwidth = window.innerWidth * 0.5;
Dwidth100 = Dwidth / (D.width / 100);
Dheight = (D.height / 100) * Dwidth100;
if (Dheight > 600) {
Dheight = 600;
Dheight100 = Dheight / (D.height / 100);
Dwidth = D.width / 100 * Dheight100
}
D.setAttribute("style", "height:" + Dheight + "px");
var CT = D.getContext("2d");
CT.drawImage(B, 0, 0, D.width, D.height);
CT.drawImage(WI, D.width - WI.width, 0, WI.width, WI.height);
var G = document.createElement("div");
var K = (window.innerHeight - Dheight - 50) / 2 + "px";
var L = (window.innerWidth - Dwidth) / 2 + "px";
if (window.innerWidth < 450) {
L = "0px";
Dwidth = window.innerWidth
}
var C = document.createElement("div");
var E = "position: fixed;z-index: 9999999999999;width:" + Dwidth + "px; left: " + L + ";top:0;margin-top:60px";
E += ";padding-bottom:10px; background: #292929;border-radius:5px;";
E += "text-align: center;";
C.setAttribute("style", "display: block;");
C.appendChild(D);
G.setAttribute("id", "popupSave");
G.setAttribute("style", E);
var J = document.createElement("span");
J.innerHTML = 'Right click to Save your Image..';
J.setAttribute("style", "margin: 10px;display: block;font-weight: bold; color: #fff;");
var I = document.createElement("a");
I.innerHTML = "close";
E = "display: inline-block; margin: 0px auto;background-color: #337ab7;";
E += "margin-top: 10px; padding: 5px 10px;";
E += "color: #fff; border-radius: 5px; border: 1px solid #ccc; cursor: pointer;";
I.setAttribute("style", E);
I.onclick = function() {
 document.getElementById("popupSave").remove()
};
G.appendChild(J);
G.appendChild(C);
G.appendChild(I);
document.body.appendChild(G)
//jwplayer().play()
}
}