how to add a background image to signature pad

Question

How do I export together with the background image together?

Demo :http://59.127.247.144/AmhsGlassrecord/

I want to get results : enter image description here

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());
    }
});

score 3 · Accepted Answer · answered Aug 11 '16 at 11:32

You'll need to draw the image on the canvas with Javascript, CSS will not work.
The background image that you have in the signature pad comes from another domain, it needs to be in your domain otherwise you cannot export it or you'll get the tainted canvas error.

To draw the image use the following code (but be sure that the image is hosted in the same domain of your app) :

Give an ID to your canvas, not only the wrapper :

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());
        }
    });
}

That would work at first with the image. Note that you need to draw again the image when the user clicks on the clear button.

The following demo works using instead of an image a color instead :

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());
    }
});

And the result :

loved the batman theme (both the profile and the `result` image) :-) — Thatkookooguy, Aug 11 '16 at 13:20

LiLacTac · Answer 2 · 2016-08-11T12:06:34.907

-1

You can just set backgroundColor for signaturePad.

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

edited Aug 11 '16 at 12:06

answered Aug 11 '16 at 11:36

LiLacTac

61
1
6

What I want is images. – Jiawei0418 Aug 11 '16 at 15:57

how to add a background image to signature pad

2 Answers2