javascript - 从 SignaturePad 导出不带透明背景的图像

Question

我无法将 SignaturePad 图像正确保存到我的服务器。 uri 正确地从 Javascript 传递到 PHP，因为我可以在 html 中单独渲染 uri。但是，当我尝试将其导出为 png 文件时，我无法显示图像。我在下面发布了一个示例 uri。如果将其粘贴到浏览器中，它将正确呈现。但是，它不会正确保存为 png 文件。它是黑色的，不应该是黑色的。我尝试从其他来源(不是 SignaturePad)导出各种其他 uri，它们将正确保存为 png。此外，签名板的背景设置为白色，因此这应该不是问题。

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