在浏览器中将base64编码的字符串显示为图像时出错？

Question

I am working on a website for a friend which takes in a signature from a wacom STU-300 signature tablet, to then be placed in the database. (as any data type as long it is readable, I tried BLOB and varchar ). After checking the documentation I found out that there is a method where you can retrieve the data as a base64 encoded string after taking the signature. This is an example I printed from a signature after extracting the base64 encoded string:

"RlP5QhsBHAECGUVDFxYZVCQFBwkDBggLBA0MFB0cGhsYFTgCIgUgJx3EG8LuM6ZpqwR8ScEztVwTqbxuB8+gFfRUzHv7lXdFA46EAUMBARcEA1dITxYCASAZIgQgcKIShjL9FJx63Xpnkli3HoFMatdpMwfX7Bg528NKz2JUAgE0JAEBBQoBBQCsTaD5BQIABwoBBQDEE/mABgIBCQgBBQAAkE4EAAMJAmABCAIDXQAQBmcCYOIfBghgkBgoNERQYGhsdISAmJyktLCsoJSMeHBMMAvrz7egHl/5+gHs97/Dy8wvQP128/Lv6+jk3tzX1NEHQ+09jcB3/eDb2tcHVo2OHr+QgYKj5QX212fH17cGZURTYvHx4V/ACGoCYMMHCAhj/QkNEBIBF/QZFBMNBwP9+PPs497WAdO90tPX2drb2Nvf5u/4AAkSHiYxNz5FTVRXVVFQTkxKRkRHRkVCPzsxJRMF+Onc0MjBvLe5vcDCv73BydXl9QQTHicwNDcBNv01Nz49CwfIAQABAQEABAkCYAEIAQNdAEANYAJgYQUIWqA4UGh4kIiAYEgwKCAYgIAGICCA/AgMIEIB8BgoQEH4CgQCAAJP8AAH/yAf4EBgIAA/4gIH6H879gAKBhAgfof73+AgYQTwGCgggUIFv//Pr38/IPf3j0rWYAwIAQUA/wMAAAAUCAEEAKxNAMQTHQ8OBjAQs9uhtgasnhcBsPYcKypNaWNyb3NvZnQ7J1dpbmRvd3MgOCsnOyh1bmtub3duKTs7Ni4zLjk2MDAaFhVTVFU7J1NUVS0zMDAnOzEuMC44OzAbCQgwMDU3O1NUVRgHjJfKqQXgARUKAQTqA+k7tw23DTgBBA=="

Edit: Thanks vjdhama for removing the spaces now it does come up as a valid base64 string however I am still not able to convert this back into an image file. When I tried decoding this back into an image using the base64 decoder at WUtils, it comes up as

FS�BECT$    
8" '���3�i�|I�3�\��nϠ�T�{��wE��CWHO " p��2��z�zg�X��Lj�i3��9��J�bT4$

instead of an image. I need to display the base64 encoded string in image form in the browser with php .

Answer 1

To check for validity of string we could use this regex

var base64 = new RegExp("^(?:[A-Za-z0-9+/]{4})*(?:[A-Za-z0-9+/]{2}==|[A-Za-z0-9+/]{3}=|[A-Za-z0-9+/]{4})([=]{1,2})?$");

Just test your string by

base64.test(str);

You can read more here : RegEx to parse or validate Base64 data

UPDATE :

You can also decode data using window.atob(str) web api method.

You can read more it here : https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/atob

Refer this for more on base64 encoding and decoding : https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding