fromDataURL error: ERR_INVALID_URL

[jerlabCGI]

I am using fromDataURL function passing the string that I received from the toDataURL function and I receive ERR_INVALID_URL. First why is it called fromDataURL when clearly in the exeample you are not passing an URL and second why am I doing wrong, here is my code:

var signaturePad = new SignaturePad(canvas, {
backgroundColor: 'rgb(250,250,250)'
});

signaturePad.fromDataURL("data:image/png;base64,iVBORw0KGgoA...)

thanks!

[UziTech]

Can you provide the actual code so we can reproduce it.

A data url is not the same as a regular url. "data:image/png;base64,... is the start of a data url

[jerlabCGI]

Hi Tony,

thanks for the quick reply and for the clarification for the dataURL. Here is my code:

Getting signature data url and put it in a hidden field:

if (!signaturePad.isEmpty()) { let data = signaturePad.toDataURL(); $('#DirectorSignature').val(data); }

Then take the data url I got from previous code and set it in the signature pad using fromDataURL:

signaturePad.fromDataURL("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA+IAAADCCAYAAADNXnjgAAAAAXNSR0IArs4c6QAAGSJJREFUeF7t3TGIXMUfB/AnCB4iGIhwgSs8SSSFRYqAFkJy4F2bIoVdrGwVFMTGFHKxSGVhKwg5q3Q2gsbGiIKBFAoWkiYiZxRSWAQJGvz/+S3M/efef+9u727vt2/f+zw4drPZfTPzmUm47868eY/9/fff/2kcBAgQIECAAAECBAgQIECAQIrAY4J4irNCCBAgQIAAAQIECBAgQIDASEAQNxAIECBAgAABAgQIECBAgECigCCeiK0oAgQIECBAgAABAgQIECAgiBsDBAgQIECAAAECBAgQIEAgUUAQT8RWFAECBAgQIECAAAECBAgQEMSNAQIECBAgQIAAAQIECBAgkCggiCdiK4oAAQIECBAgQIAAAQIECAjixgABAgQIECBAgAABAgQIEEgUEMQTsRVFgAABAgQIECBAgAABAgQEcWOAAAECBAgQIECAAAECBAgkCgjiidiKIkCAAAECBAgQIECAAAECgrgxQIAAAQIECBAgQIAAAQIEEgUE8URsRREgQIAAAQIECBAgQIAAAUHcGCBAgAABAgQIECBAgAABAokCgngitqIIECBAgAABAgQIECBAgIAgbgwQIECAAAECBAgQIECAAIFEAUE8EVtRBAgQIECAAAECBAgQIEBAEDcGCBAgQIAAAQIECBAgQIBAooAgnoitKAIECBAgQIAAAQIECBAgIIgbAwQIECBAgAABAgQIECBAIFFAEE/EVhQBAgQIECBAgAABAgQIEBDEjQECBAgQIECAAAECBAgQIJAoIIgnYiuKAAECBAgQIECAAAECBAgI4sYAAQIECBAgQIAAAQIECBBIFBDEE7EVRYAAAQIECBAgQIAAAQIEBHFjgAABAgQIECBAgAABAgQIJAoI4onYiiJAgAABAgQIECBAgAABAoK4MUCAAAECBAgQIECAAAECBBIFBPFEbEURIECAAAECBAgQIECAAAFB3BggQIAAAQIECBAgQIAAAQKJAoJ4IraiCBAgQIAAAQIECBAgQICAIG4MECBAgAABAgQIECBAgACBRAFBPBFbUQQIECBAgAABAgQIECBAQBA3BggQIECAAAECBAgQIECAQKKAIJ6IrSgCBAgQIECAAAECBAgQICCIGwMECBAgQIAAAQIE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QIAAgUQBQTwRW1EECBAgQIAAAQIECBAgQEAQNwYIECBAgAABAgQIECBAgECigCCeiK0oAgQIECBAgAABAgQIECAgiBsDBAgQIECAAAECBAgQIEAgUUAQT8RWFAECBAgQIECAAAECBAgQEMSNAQIECBAgQIAAAQIECBAgkCggiCdiK4oAAQIECBAgQIAAAQIECAjixgABAgQIECBAgAABAgQIEEgUEMQTsRVFgAABAgQIECBAgAABAgQEcWOAAAECBAgQIECAAAECBAgkCgjiidiKIkCAAAECBAgQIECAAAECgrgxQIAAAQIECBAgQIAAAQIEEgUE8URsRREgQIAAAQIECBAgQIAAAUHcGCBAgAABAgQIECBAgAABAokCgngitqIIECBAgAABAgQIECBAgIAgbgwQIECAAAECBAgQIECAAIFEAUE8EVtRBAgQIECAAAECBAgQIEBAEDcGCBAgQIAAAQIECBAgQIBAooAgnoitKAIECBAgQIAAAQIECBAgIIgbAwQIECBAgAABAgQIECBAIFFAEE/EVhQBAgQIECBAgAABAgQIEBDEjQECBAgQIECAAAECBAgQIJAoIIgnYiuKAAECBAgQIECAAAECBAgI4sYAAQIECBAgQIAAAQIECBBIFBDEE7EVRYAAAQIECBAgQIAAAQIEBHFjgAABAgQIECBAgAABAgQIJAoI4onYiiJAgAABAgQIECBAgAABAoK4MUCAAAECBAgQIECAAAECBBIFBPFEbEURIECAAAECBAgQIECAAAFB3BggQIAAAQIECBAgQIAAAQKJAoJ4IraiCBAgQIAAAQIECBAgQICAIG4MECBAgAABAgQIECBAgACBRAFBPBFbUQQIECBAgAABAgQIECBAQBA3BggQIECAAAECBAgQIECAQKKAIJ6IrSgCBAgQIECAAAECBAgQICCIGwMECBAgQIAAAQIECBAgQCBRQBBPxFYUAQIECBAgQIAAAQIECBAQxI0BAgQIECBAgAABAgQIECCQKCCIJ2IrigABAgQIECBAgAABAgQICOLGAAECBAgQIECAAAECBAgQSBQQxBOxFUWAAAECBAgQIECAAAECBARxY4AAAQIECBAgQIAAAQIECCQKCOKJ2IoiQIAAAQIECBAgQIAAAQKCuDFAgAABAgQIECBAgAABAgQSBQTxRGxFESBAgAABAgQIECBAgAABQdwYIECAAAECBAgQIECAAAECiQKCeCK2oggQIECAAAECBAgQIECAgCBuDBAgQIAAAQIECBAgQIAAgUQBQTwRW1EECBAgQIAAAQIECBAgQEAQNwYIECBAgAABAgQIECBAgECigCCeiK0oAgQIECBAgAABAgQIECAgiBsDBAgQIECAAAECBAgQIEAgUUAQT8RWFAECBAgQIECAAAECBAgQEMSNAQIECBAgQIAAAQIECBAgkCjwXwQ1Z9X51geIAAAAAElFTkSuQmCC");

Thanks again!

[UziTech]

I see + in your data url which should be a +. That makes it not a valid base64 string.