Wie fügt man dem Unterschriftsfeld ein Hintergrundbild hinzu

Question

Wie kann ich zusammen mit dem Hintergrundbild exportieren?

Demo: http://59.127.247.144/AmhsGlassrecord/

Ich will Ergebnisse erhalten: 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()); 
    } 
}); 

Answer 1

• Sie müssen das Bild auf der Leinwand mit Javascript ziehen, CSS wird nicht funktionieren.
• Das Hintergrundbild, das Sie im Unterschriftenpad haben, stammt aus einer anderen Domäne, es muss in Ihrer Domäne sein, sonst können Sie es nicht exportieren, sonst erhalten Sie den fehlerhaften Zeichenfolgefehler.

das Bild zeichnen den folgenden Code verwenden (aber sicher sein, dass das Bild in der gleichen Domäne Ihrer App gehostet wird):

eine ID auf Ihre Leinwand geben, die Hülle nicht nur:

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

Das würde zuerst mit dem Bild arbeiten. Beachten Sie, dass Sie das Bild erneut zeichnen müssen, wenn der Benutzer auf die Schaltfläche Löschen klickt.

Die folgenden Demo Werke statt eines Bildes unter Verwendung einer Farbe statt:

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

Und das Ergebnis:

Answer 2

können Sie einstellen, nur für Backgroundcolor signaturePad.