如何將背景圖像添加到簽名板

Question

如何將背景圖像一起導出？

演示：http://59.127.247.144/AmhsGlassrecord/

我希望得到的結果： 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

• 你需要通過JavaScript來繪製畫布上的圖像，CSS不管用。
• 您在簽名板中擁有的背景圖像來自另一個域，它需要位於您的域中，否則您無法導出它，否則您將得到污點的畫布錯誤。

繪製圖像使用下面的代碼（但可以肯定的是，圖像在應用中的同一個域託管）：

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

而結果：

Answer 2

您可以只設置的backgroundColor爲signaturePad。

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