從SignaturePad導出圖像，但沒有透明背景

Question

我無法正確地將SignaturePad圖像保存到我的服務器。 uri正確地從Javascript傳遞給PHP，因爲我可以在html中自己渲染uri。但是，當我嘗試將它導出爲png文件時，我無法看到圖像。我已經在下面發佈了一個示例uri。如果您將其粘貼到瀏覽器中，它將正確呈現。但是，它不能正確保存爲png文件。它是黑色的，不應該是。我試圖從其他來源（不是SignaturePad）導出各種其他uri，並且它們將正確保存到png。另外，signaturepad中的背景設置爲白色，所以不應該是問題。

Uri does not render correctly as png: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABFEAAAGQCAYAAABmlf8RAAAgAElEQVR4Xu3dT6hed1oH8EwbpUEwQWcxQWaSIREqyjTZSBYJ7cbNDEiKYsauhGTcCUkRTBdVlELqxgR3MslCkGm7kHQWzkZh2mmgFJHEheNiEtpUcAoqk4q0wWmszzuei6dvb29+9973z/ec8xk4vO977++c8zyf58dl+iXv+35uj/8RIECAAAECBAgQIECAAAECBAg8VOBzD11hAQECBAgQIECAAAECBAgQIECAwB4hik1AgAABAgQIECBAgAABAgQIEGgQEKI0IFlCgAABAgQIECBAgAABAgQIEBCi2AMECBAgQIAAAQIECBAgQIAAgQYBIUoDkiUECBAgQIAAAQIECBAgQIAAASGKPUCAAAECBAgQIECAAAECBAgQaBAQojQgWUKAAAECBAgQIECAAAECBAgQEKLYAwQIECBAgAABAgQIECBAgACBBgEhSgOSJQQIECBAgAABAgQIECBAgAABIYo9QIAAAQIECBAgQIAAAQIECBBoEBCiNCBZQoAAAQIECBAgQIAAAQIECBAQotgDBAgQIECAAAECBAgQIECAAIEGASFKA5IlBAgQIECAAAECBAgQIECAAAEhij1AgAABAgQIECBAgAABAgQIEGgQEKI0IFlCgAABAgQIECBAgAABAgQIEBCi2AMECBAgQIAAAQIECBAgQIAAgQYBIUoDkiUECBAgQIAAAQIECBAgQIAAASGKPUCAAAECBAgQIECAAAECBAgQaBAQojQgWUKAAAECBAgQIECAAAECBAgQEKLYAwQIECBAgAABAgQIECBAgACBBgEhSgOSJQQIECBAgAABAgQIECBAgAABIYo9QIAAAQIECBAgQIAAAQIECBBoEBCiNCBZQoAAAQIECBAgQIAAAQIECBAQotgDBAgQIECAAAECBAgQIECAAIEGASFKA5IlBAgQIECAAAECBAgQIECAAAEhij1AgAABAgQIECBAgAABAgQIEGgQEKI0IFlCgAABAgQIECBAgAABAgQIEBCi2AMECBAgQIAAAQIECBAgQIAAgQYBIUoDkiUECBAgQIAAAQIECBAgQIAAASGKPUCAAAECBAgQIECAAAECBAgQaBAQojQgWUKAAAECBAgQIECAAAECBAgQEKLYAwQIECBAgAABAgQIECBAgACBBgEhSgOSJQQIECBAgAABAgQIECBAgAABIYo9QIAAAQIECBAgQIAAAQIECBBoEBCiNCBZQoAAAQIECBAgQIAAAQIECBAQotgDBAgQIECAAAECBAgQIECAAIEGASFKA5IlBAgQIECAAAECBAgQIECAAAEhij1AgAABAgQIECBAgAABAgQIEGgQEKI0IFlCgAABAgQIECBAgAABAgQIEBCi2AMECBAgQIAAAQIECBAgQIAAgQYBIUoDkiUECBAgQIAAAQIECBAgQIAAASGKPUCAAAECBAgQIECAAAECBAgQaBAQojQgWUKAAAECBAgQIECAAAECBAgQEKLYAwQIECBAgAABAgQIECBAgACBBgEhSgOSJQQIECBAgAABAgQIECBAgAABIYo9QIAAAQIECBAgQIAAAQIECBBoEBCiNCBZQoAAAQIECBAgQIAAAQIECBAQotgDBAgQIECAAAECBAgQIECAAIEGASFKA5IlBAgQIECAAAECBAgQIECAAAEhij1AgAABAgQIECBAgAABAgQIEGgQEKI0IFlCgAABAgQIECBAgAABAgQIEBCi2AMECBAgQIAAAQIECBAgQIAAgQYBIUoDkiUECBAgQIAAAQIECBAgQIAAASGKPUCAAAECBAgQIECAAAECBAgQaBAQojQgWUKAAAECBAgQIECAAAECBAgQEKLYAwQIECBAgAABAgQIECBAgACBBgEhSgOSJQQIECBAgAABAgQIECBAgAABIYo9QIAAAQIECBAgQIAAAQIECBBoEBCiNCBZQoAAAQIECBAgQIAAAQIECBAQotgDBAgQIECAAAECBAgQIECAAIEGASFKA5IlBAgQIECAAAECBAgQIECAAAEhij1AgAABAgQIECBAgAABAgQIEGgQEKI0IFlCgAABAgQIECBAgAABAgQIEBCi2AMECBAgQIAAAQIECBAgQIAAgQYBIUoDkiUECBAgQIAAAQIECBAgQIAAASGKPUCAAAECBAgQIECAAAECBAgQaBAQojQgWUKAAAECBAgQIECAAAECBAgQEKLYAwQIECBAgAABAgQIECBAgACBBgEhSgOSJQQIECBAgAABAgQIECBAgAABIYo9QIAAAQIECBAgQIAAAQIECBBoEBCiNCBZQoAAAQIECBAgQIAAAQIECBAQotgDBAgQIECAAAECBAgQIECAAIEGASFKA5IlBAgQIECAAAECBAgQIECAAAEhij1AgAABAgQIECBAgAABAgQIEGgQEKI0IFlCgAABAgQIECBAgAABAgQIEBCi2AMECBAgQIAAAQIECBAgQIAAgQYBIUoDkiUECBAgQIAAAQIECBAgQIAAASGKPUCAAAECBAgQIECAAAECBAgQaBAQojQgWUKAAAECBAgQIECAAAECBAgQEKLYAwQIECBAgAABAgQIECBAgACBBgEhSgOSJQQIECBAgAABAgQIECBAgAABIYo9QIAAAQIECBAgQIAAAQIECBBoEBCiNCBZQoAAAQIECBAgQIAAAQIECBAQotgDBAgQIECAAAECBAgQIECAAIEGASFKA5IlBAgQIECAAAECBAgQIECAAAEhij1AgAABAgQIECBAgAABAgQIEGgQEKI0IFlCgAABAgQIECBAgAABAgQIEBCi2AMECBAgQIAAAQIECBAgQIAAgQYBIUoDkiUECBAgQIAAAQIECBAgQIAAASGKPUCAAAECBAgQIECAAAECBAgQaBAQojQgWUKAAAECBAgQIECAAAECBAgQEKLYAwQIECBAgAABAgQIECBAgACBBgEhSgOSJQQIECBAgAABAgQIECBAgAABIYo9QIAAAQIECBAgQIAAAQIECBBoEBCiNCBZQoAAAQIECBAgQIAAAQIECBAQotgDBAgQIECAAAECBAgQIECAAIEGASFKA5IlBAgQIECAAAECBAgQIECAAAEhij1AgAABAgQIECBAgAABAgQIEGgQEKI0IFlCgAABAgQIECBAgAABAgQIEBCi2AMECBAgQIAAAQIECBAgQIAAgQYBIUoDkiUECBAgQIAAAQIECBAgQIAAASGKPUCAAAECBAgQIECAAAECBAgQaBAQojQgWUKAAAECBAgQIECAAAECBAgQEKLYAwQIECBAgAABAgQIECBAgACBBgEhSgOSJQQIECBAgAABAgQIECBAgAABIYo9QIAAAQIECBAgQIAAAQIECBBoEBCiNCBZQoAAAQIECBAgQIAAAQIECBAQotgDBAgQIECAAAECBAgQIECAAIEGASFKA5IlBAgQIECAAAECBAgQIECAAAEhij1AgAABAgQIECBAgAABAgQIEGgQEKI0IFlCgAABAgQIECBAgAABAgQIEBCi2AMECBAgQIAAAQIECBAgQIAAgQYBIUoDkiUECBAgQIAAAQIECBAg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CBAgQIAAgYUICFEWwugiBAgsQeCjuuaj3XUP1+PdJdzDJQkQIECAAAECBAgQINAsIERpprKQAIEVCpype73c3e9+Pe5b4b3digABAgQIECBAgAABApsKCFFsDAIEEgX+rYr6fFfYj+rx5xKLVBMBAgQIECBAgAABAtMSEKJMa966JTAUgdkHyT7SFftuPR4aSuHqJECAAAECBAgQIEBgvAJClPHOVmcEhipwsgp/o1f8tXp+bqjNqJsAAQIECBAgQIAAgfEICFHGM0udEBiLwNVq5GyvmQv1/MpYmtMHAQIECBAgQIAAAQLDFRCiDHd2KicwVoHXqrEne835OzXWSeuLAAECBAgQIECAwMAE/MfJwAamXAITELhXPe7v+ny/Hg9MoGctEiBAgAABAgQIECAwAAEhygCGpEQCExO4Xv2e7nq+VY/HJ9a/dgkQIECAAAECBAgQCBUQooQORlkEJi4w+3DZX6jjlYk7aJ8AAQIECBAgQIAAgSABIUrQMJRCgAABAgQIECBAgAABAgQI5AoIUXJnozICBAgQIECAAAECBAgQIEAgSECIEjQMpRAgQIAAAQIECBAgQIAAAQK5AkKU3NmojAABAgQIECBAgAABAgQIEAgSEKIEDUMpBAgQIECAAAECBAgQIECAQK6AECV3NiojQIAAAQIECBAgQIAAAQIEggSEKEHDUAoBAgQIECBAgAABAgQIECCQKyBEyZ2NyggQIECAAAECBAgQIECAAIEgASFK0DCUQoAAAQIECBAgQIAAAQIECOQKCFFyZ6MyAgQIECBAgAABAgQIECBAIEhAiBI0DKUQIECAAAECBAgQIECAAAECuQJClNzZqIwAAQIECBAgQIAAAQIECBAIEhCiBA1DKQQIECBAgAABAgQIECBAgECugBAldzYqI0CAAAECBAgQIECAAAECBIIEhChBw1AKAQIECBAgQIAAAQIECBAgkCsgRMmdjcoIECBAgAABAgQIECBAgACBIAEhStAwlEKAAAECBAgQIECAAAECBAjkCghRcmejMgIECBAgQIAAAQIECBAgQCBIQIgSNAylECBAgAABAgQIECBAgAABArkCQpTc2aiMAAECBAgQIECAAAECBAgQCBIQogQNQykECBAgQIAAAQIECBAgQIBAroAQJXc2KiNAgAABAgQIECBAgAABAgSCBIQoQcNQCgECBAgQIECAAAECBAgQIJArIETJnY3KCBAgQIAAAQIECBAgQIAAgSABIUrQMJRCgAABAgQIECBAgAABAgQI5AoIUXJnozICBAgQIECAAAECBAgQIEAgSECIEjQMpRAgQIAAAQIECBAgQIAAAQK5AkKU3NmojAABAgQIECBAgAABAgQIEAgSEGrhp6QAAAueSURBVKIEDUMpBAgQIECAAAECBAgQIECAQK6AECV3NiojQIAAAQIECBAgQIAAAQIEggSEKEHDUAoBAgQIECBAgAABAgQIECCQKyBEyZ2NyggQIECAAAECBAgQIECAAIEgASFK0DCUQoAAAQIECBAgQIAAAQIECOQKCFFyZ6MyAgQIECBAgAABAgQIECBAIEhAiBI0DKUQIECAAAECBAgQIECAAAECuQJClNzZqIwAAQIECBAgQIAAAQIECBAIEhCiBA1DKQQIECBAgAABAgQIECBAgECugBAldzYqI0CAAAECBAgQIECAAAECBIIEhChBw1AKAQIECBAgQIAAAQIECBAgkCsgRMmdjcoIECBAgAABAgQIECBAgACBIAEhStAwlEKAAAECBAgQIECAAAECBAjkCghRcmejMgIECBAgQIAAAQIECBAgQCBIQIgSNAylECBAgAABAgQIECBAgAABArkCQpTc2aiMAAECBAgQIECAAAECBAgQCBIQogQNQykECBAgQIAAAQIECBAgQIBAroAQJXc2KiNAgAABAgQIECBAgAABAgSCBIQoQcNQCgECBAgQIECAAAECBAgQIJArIETJnY3KCBAgQIAAAQIECBAgQIAAgSABIUrQMJRCgAABAgQIECBAgAABAgQI5AoIUXJnozICBAgQIECAAAECBAgQIEAgSECIEjQMpRAgQIAAAQIECBAgQIAAAQK5AkKU3NmojAABAgQIECBAgAABAgQIEAgSEKIEDUMpBAgQIECAAAECBAgQIECAQK6AECV3NiojQIAAAQIECBAgQIAAAQIEggSEKEHDUAoBAgQIECBAgAABAgQIECCQKyBEyZ2NyggQIECAAAECBAgQIECAAIEgASFK0DCUQoAAAQIECBAgQIAAAQIECOQKCFFyZ6MyAgQIECBAgAABAgQIECBAIEhAiBI0DKUQIECAAAECBAgQIECAAAECuQJClNzZqIwAAQIECBAgQIAAAQIECBAIEhCiBA1DKQQIECBAgAABAgQIECBAgECugBAldzYqI0CAAAECBAgQIECAAAECBIIEhChBw1AKAQIECBAgQIAAAQIECBAgkCsgRMmdjcoIECBAgAABAgQIECBAgACBIAEhStAwlEKAAAECBAgQIECAAAECBAjkCghRcmejMgIECBAgQIAAAQIECBAgQCBIQIgSNAylECBAgAABAgQIECBAgAABArkCQpTc2aiMAAECBAgQIECAAAECBAgQCBIQogQNQykECBAgQIAAAQIECBAgQIBAroAQJXc2KiNAgAABAgQIECBAgAABAgSCBIQoQcNQCgECBAgQIECAAAECBAgQIJArIETJnY3KCBAgQIAAAQIECBAgQIAAgSABIUrQMJRCgAABAgQIECBAgAABAgQI5AoIUXJnozICBAgQIECAAAECBAgQIEAgSECIEjQMpRAgQIAAAQIECBAgQIAAAQK5AkKU3NmojAABAgQIECBAgAABAgQIEAgSEKIEDUMpBAgQIECAAAECBAgQIECAQK6AECV3NiojQIAAAQIECBAgQIAAAQIEggSEKEHDUAoBAgQIECBAgAABAgQIECCQKyBEyZ2NyggQIECAAAECBAgQIECAAIEgASFK0DCUQoAAAQIECBAgQIAAAQIECOQKCFFyZ6MyAgQIECBAgAABAgQIECBAIEhAiBI0DKUQIECAAAECBAgQIECAAAECuQJClNzZqIwAAQIECBAgQIAAAQIECBAIEhCiBA1DKQQIECBAgAABAgQIECBAgECugBAldzYqI0CAAAECBAgQIECAAAECBIIEhChBw1AKAQIECBAgQIAAAQIECBAgkCsgRMmdjcoIECBAgAABAgQIECBAgACBIAEhStAwlEKAAAECBAgQIECAAAECBAjkCghRcmejMgIECBAgQIAAAQIECBAgQCBIQIgSNAylECBAgAABAgQIECBAgAABArkCQpTc2aiMAAECBAgQIECAAAECBAgQCBIQogQNQykECBAgQIAAAQIECBAgQIBAroAQJXc2KiNAgAABAgQIECBAgAABAgSCBIQoQcNQCgECBAgQIECAAAECBAgQIJArIETJnY3KCBAgQIAAAQIECBAgQIAAgSABIUrQMJRCgAABAgQIECBAgAABAgQI5AoIUXJnozICBAgQIECAAAECBAgQIEAgSECIEjQMpRAgQIAAAQIECBAgQIAAAQK5AkKU3NmojAABAgQIECBAgAABAgQIEAgSEKIEDUMpBAgQIECAAAECBAgQIECAQK6AECV3NiojQIAAAQIECBAgQIAAAQIEggSEKEHDUAoBAgQIECBAgAABAgQIECCQKyBEyZ2NyggQIECAAAECBAgQIECAAIEgASFK0DCUQoAAAQIECBAgQIAAAQIECOQKCFFyZ6MyAgQIECBAgAABAgQIECBAIEhAiBI0DKUQIECAAAECBAgQIECAAAECuQJClNzZqIwAAQIECBAgQIAAAQIECBAIEhCiBA1DKQQIECBAgAABAgQIECBAgECugBAldzYqI0CAAAECBAgQIECAAAECBIIEhChBw1AKAQIECBAgQIAAAQIECBAgkCsgRMmdjcoIECBAgAABAgQIECBAgACBIAEhStAwlEKAAAECBAgQIECAAAECBAjkCghRcmejMgIECBAgQIAAAQIECBAgQCBIQIgSNAylECBAgAABAgQIECBAgAABArkCQpTc2aiMAAECBAgQIECAAAECBAgQCBIQogQNQykECBAgQIAAAQIECBAgQIBAroAQJXc2KiNAgAABAgQIECBAgAABAgSCBIQoQcNQCgECBAgQIECAAAECBAgQIJArIETJnY3KCBAgQIAAAQIECBAgQIAAgSABIUrQMJRCgAABAgQIECBAgAABAgQI5AoIUXJnozICBAgQIECAAAECBAgQIEAgSECIEjQMpRAgQIAAAQIECBAgQIAAAQK5AkKU3NmojAABAgQIECBAgAABAgQIEAgSEKIEDUMpBAgQIECAAAECBAgQIECAQK6AECV3NiojQIAAAQIECBAgQIAAAQIEggSEKEHDUAoBAgQIECBAgAABAgQIECCQKyBEyZ2NyggQIECAAAECBAgQIECAAIEgASFK0DCUQoAAAQIECBAgQIAAAQIECOQKCFFyZ6MyAgQIECBAgAABAgQIECBAIEhAiBI0DKUQIECAAAECBAgQIECAAAECuQJClNzZqIwAAQIECBAgQIAAAQIECBAIEhCiBA1DKQQIECBAgAABAgQIECBAgECugBAldzYqI0CAAAECBAgQIECAAAECBIIEhChBw1AKAQIECBAgQIAAAQIECBAgkCsgRMmdjcoIECBAgAABAgQIECBAgACBIAEhStAwlEKAAAECBAgQIECAAAECBAjkCghRcmejMgIECBAgQIAAAQIECBAgQCBIQIgSNAylECBAgAABAgQIECBAgAABArkCQpTc2aiMAAECBAgQIECAAAECBAgQCBIQogQNQykECBAgQIAAAQIECBAgQIBAroAQJXc2KiNAgAABAgQIECBAgAABAgSCBIQoQcNQCgECBAgQIECAAAECBAgQIJArIETJnY3KCBAgQIAAAQIECBAgQIAAgSABIUrQMJRCgAABAgQIECBAgAABAgQI5AoIUXJnozICBAgQIECAAAECBAgQIEAgSECIEjQMpRAgQIAAAQIECBAgQIAAAQK5AkKU3NmojAABAgQIECBAgAABAgQIEAgSEKIEDUMpBAgQIECAAAECBAgQIECAQK6AECV3NiojQIAAAQIECBAgQIAAAQIEggSEKEHDUAoBAgQIECBAgAABAgQIECCQKyBEyZ2NyggQIECAAAECBAgQIECAAIEgASFK0DCUQoAAAQIECBAgQIAAAQIECOQKCFFyZ6MyAgQIECBAgAABAgQIECBAIEhAiBI0DKUQIECAAAECBAgQIECAAAECuQL/Czi8D6CSuaJJAAAAAElFTkSuQmCC 

PHP代碼

$data_uri=$data['image'];//Replace this with the uri's above for testing. 
$encoded_image = explode(",", $data_uri)[1]; 
$encoded_image= str_replace(' ','+',$encoded_image); 
$decoded_image = base64_decode($encoded_image); 

/*Save the signature image to a file*/ 
$fileType='png'; 
$uploadDir = getcwd() . '/uploads/'; 
$uniqueIDX=uniqid(); 
$fileName= $uniqueIDX . '.png'; 
$fileDirectory = $uploadDir . $fileName; 
file_put_contents($fileDirectory, $decoded_image); 

任何幫助將非常感激。如果您需要更多信息，請與我們聯繫。

Answer 1

PNG文件包含透明背景。您可以通過在黑色背景的html文件中使用數據uri來測試。這也是png（從Firefox保存）在paint.net中的樣子。它具有透明背景：

向我們展示您用於在網站中建立簽名板的代碼並獲取圖像。您需要確保將SignaturePad的backgroundColor參數指定爲非透明顏色。

var signaturePad = new SignaturePad(c, { 
    backgroundColor: "white", 
    minWidth: 5, 
    maxWidth: 10, 
    penColor: "black" 
}); 

Answer 2

謝謝！我有一個調整大小的事件，即使我之前設置了背景，也會從圖像中刪除背景。現在全部設置。