如何将背景图像添加到签名板答案

【问题标题】：how to add a background image to signature pad如何将背景图像添加到签名板
【发布时间】：2016-08-11 11:14:29
【问题描述】：

如何与背景图片一起导出？

演示：http://59.127.247.144/AmhsGlassrecord/

Javascript

var wrapper = document.getElementById("signature-pad"),
    clearButton = wrapper.querySelector("[data-action=clear]"),
    saveButton = wrapper.querySelector("[data-action=save]"),
    canvas = wrapper.querySelector("canvas"),
    signaturePad;

function resizeCanvas() {
    var ratio = Math.max(window.devicePixelRatio || 1, 1);
    canvas.width = canvas.offsetWidth * ratio;
    canvas.height = canvas.offsetHeight * ratio;
    canvas.getContext("2d").scale(ratio, ratio);
}

window.onresize = resizeCanvas;
resizeCanvas();

signaturePad = new SignaturePad(canvas);
var signaturePad = new SignaturePad(canvas);
signaturePad.minWidth = 1;
signaturePad.maxWidth = 1;
signaturePad.penColor = "rgb(66, 133, 244)";

clearButton.addEventListener("click", function (event) {
    signaturePad.clear();
});

saveButton.addEventListener("click", function (event) {
    if (signaturePad.isEmpty()) {
        alert("Please do not blank.");
    } else {
        //document.getElementById("hfSign").value = signaturePad.toDataURL();
        window.open(signaturePad.toDataURL());
    }
});

【问题讨论】：

标签： javascript html signaturepad

【解决方案1】：

您需要使用 Javascript 在画布上绘制图像，CSS 不起作用。
您在签名板中的背景图片来自另一个域，它必须在您的域中，否则您无法导出它，否则您会收到 tainted canvas 错误。

要绘制图像，请使用以下代码（但请确保图像托管在您应用的同一域中）：

为您的画布提供一个 ID，而不仅仅是包装器：

var canvas = document.getElementById("ID-of-your-canvas"),
ctx = canvas.getContext("2d");

var background = new Image();
// The image needs to be in your domain.
background.src = "http://dkpopnews.fooyoh.com/files/attach/images4/14989425/2015/1/14995985/thumbnail_725x300_ratio.jpg";

// Make sure the image is loaded first otherwise nothing will draw.
background.onload = function() {
    ctx.drawImage(background, 0, 0);
};

function action() {
    // draw the image on the canvas
    ctx.drawImage(background, 0, 0);

    //// Then continue with your code 
    var wrapper = document.getElementById("signature-pad"),
        clearButton = wrapper.querySelector("[data-action=clear]"),
        saveButton = wrapper.querySelector("[data-action=save]"),
        canvas = wrapper.querySelector("canvas"),
        signaturePad;

    function resizeCanvas() {
        var ratio = Math.max(window.devicePixelRatio || 1, 1);
        canvas.width = canvas.offsetWidth * ratio;
        canvas.height = canvas.offsetHeight * ratio;
        canvas.getContext("2d").scale(ratio, ratio);
    }

    window.onresize = resizeCanvas;
    resizeCanvas();

    signaturePad = new SignaturePad(canvas);
    var signaturePad = new SignaturePad(canvas);
    signaturePad.minWidth = 1;
    signaturePad.maxWidth = 1;
    signaturePad.penColor = "rgb(66, 133, 244)";

    clearButton.addEventListener("click", function(event) {
        signaturePad.clear();
    });

    saveButton.addEventListener("click", function(event) {
        if (signaturePad.isEmpty()) {
            alert("Please do not blank.");
        } else {
            //document.getElementById("hfSign").value = signaturePad.toDataURL();
            window.open(signaturePad.toDataURL());
        }
    });
}

这首先适用于图像。请注意，当用户单击清除按钮时，您需要重新绘制图像。

以下演示使用颜色而不是图像来工作：

var canvas = document.getElementById("ID-of-your-canvas"),
ctx = canvas.getContext("2d");

function setBackground(color){
    ctx.fillStyle = color;
    ctx.fillRect(0, 0, canvas.width, canvas.height);
}

//// Then continue with your code 
var wrapper = document.getElementById("signature-pad"),
    clearButton = wrapper.querySelector("[data-action=clear]"),
    saveButton = wrapper.querySelector("[data-action=save]"),
    canvas = wrapper.querySelector("canvas"),
    signaturePad;

function resizeCanvas() {
    var ratio = Math.max(window.devicePixelRatio || 1, 1);
    canvas.width = canvas.offsetWidth * ratio;
    canvas.height = canvas.offsetHeight * ratio;
    canvas.getContext("2d").scale(ratio, ratio);
}

window.onresize = resizeCanvas;
resizeCanvas();

signaturePad = new SignaturePad(canvas);
var signaturePad = new SignaturePad(canvas);
signaturePad.minWidth = 1;
signaturePad.maxWidth = 1;
signaturePad.penColor = "rgb(66, 133, 244)";
setBackground("#0e2630");

clearButton.addEventListener("click", function(event) {
    signaturePad.clear();
    setBackground("#0e2630");
});

saveButton.addEventListener("click", function(event) {
    if (signaturePad.isEmpty()) {
        alert("Please do not blank.");
    } else {
        //document.getElementById("hfSign").value = signaturePad.toDataURL();
        window.open(signaturePad.toDataURL());
    }
});

结果：

【讨论】：

喜欢蝙蝠侠主题（个人资料和result 图像）:-)

【解决方案2】：

你可以只为 signaturePad 设置 backgroundColor。

var signaturePad = new SignaturePad(canvas,
{
    backgroundColor: "rgba(0, 0, 0, 1)"
});

【讨论】：

我想要的是图片。