Does anyone know of any simple javascript that I can use to turn a base64 string into an image (jpg format preferably), so that I can save the image to a file? This is for a signature pad application. I can get the signature into a base64 format, but need to save the signature as an image file to use for embedding into a Crystal Report.
I have tried this method in a JSP page to print the image from a base64 string, I guess this should hold good for javascript too. Do not have sample data for now to verify, but here's how I would try it.
var oImg=document.createElement("img");
var baseString = null; //the base64 string you have
var imsc = 'data:image/jpg;base64, '+baseString;
oImg.setAttribute('src', imsc);
document.body.appendChild(oImg);
Related
I'm getting an input data in appscript in the form of binary data (docx file data) which looks something like below
I need this data to be converted into Base64 string. I tried using Utilities class to encode it into base64, however, it returns a few character string which is invalid. Is there any way to convert this form of data in appscript?
The current script is as below
function run() {
var inputData = Eventbus.get('encodedData');//this is received as binary data
var convertedData = Utilities.base64Encode(inputData);//need to encode to base64 but doesn't work
Eventbus.set('decodedData',convertedData);
}
Thanks
Saurabh
I have below codes in my frontend:
let reader = new FileReader();
reader.onload = function(e) {
_this.imageBase64 = e.target.result;
alert(_this.imageBase64);
...
}
the alert function shows that the imageBase64 is a base64 string, which is starting with data:image/jpeg;base64.
The problem is that, is there any elegant way that I can get the base64 string of the image, without this prefix? (I don't want to use substring like function).
Since the server end codes will read this string with the assumption that it only contains the base64 representation of the image.
Maybe base64Str.split(',').pop() is my best choice, as string.slice(start, stop) and string.substring(start, stop) require the exact index.
Seems that we are getting a data url(which has the leading meta data prefix) by using the approach I mentioned. The advantage is that that url can be used directly in some src field. This is the reason why we have that prefix in the front end world.
I have a problem to convert binary data to base-64 in JS.
I try all the things that exists on the net include this How to parse into base64 string the binary image from response?, but everyone return a wrong base-64 and I don't find why !
**I try this solution Retrieving binary file content using Javascript, base64 encode it and reverse-decode it using Python but the convert to base-64 not work for me! It's return something wrong .
I get a string binary response from server and I want to convert him to base-64 that I can create a file from him and to show him to user.
This is the response I get from server to png picture for example:
�PNG
IHDRrP6�tEXtSoftwareAdobe ImageReadyq�e<�IDATx�b���?�#6��g��T=;��� >č�&g��:��A�#���LX��0�A�T >[40f��H��>0`B
#��<��0a�+���b�
�o����o0��~�7��'�xlP����e��.3<x��A�����~�w��$�#90���
`���Ivd�1#c�2���F&�ATM��.�p���[���8��p�]�#,�����pyP��q���pB����u�����3l(6A `#qzK�Q���M�8Q�Ӑ&��1�$(�#� R�81H��P�&P�����ҟ1\��V��3P�d��fp0�#;��ld �yt�(����
J{�М��>>#{!А�3%?#/�
0�O�U,{�9IEND�B`�
Now , I want to take this binary string and to convert him .
For example , the real base 64 of png picture is:
iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAaJJREFUeNpi/P//PwO1ACM2wf9njBWAVD0QOwCxApLUAyA+AMSNjCZnH6DoATqKEYtB/UCqgAiHTAAaWIjTMKBB84FUAgk+WwA0MBFmGBOaixJIDKYEqD4wYEIKI7DXHjz/xTBh+SuGD5//YtUNkm+c9Zzhwq1vMKECqH6IN5G9J+h4AWxQgIMAw/oeZQzDFP0uMzx49otBgJeZ4f1+A7h3GYzPJLJAOQEw0fn1CmCFuADIAgVJdmSXMUBjHe4yyhOb8RlGJqBBDlRNtMgu23DgA8PFW98Z9NU4weGGDnDKA10GC7MPQCwAiqnAkrtweVDYGahxwfmgcEKO5fubdYHhxwbTzwAzbAMoNkESIANgGkD0gbOfcXpLgAceURvg6QwIFsITTaQ4UeHTkCaFHOsLMfIkKOxAuCBSDBSGODFIHqYWlgNQ8iZQEBSa+4HYAJHSnzFcuPkdHFagsDNQ52SI9xFmcDDmhQcjEDsC8+cHbBkdZCCxeXQCtCj6gLMIghoKSnvx0JyBnD4+QAN7IdCQAwTLMxwFJQg/QC8Q0Q0DCDAA/k/PVSx73TkAAAAASUVORK5CYII=
When I use any kind of code to convert to base-64 it's return this string :
77+9UE5HDQoaCgAAAA1JSERSAAAAEwAAABMIBgAAAHJQNu+/vQAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHvv71lPAAAAe+/vUlEQVR477+9Yu+/ve+/ve+/vT8D77+9ACM277+977+9Z++/vRXvv71UPRA7AO+/vQLvv73vv70DID4AxI3vv70mZx/vv73vv70BOu+/vRHvv71B77+9QO+/ve+/vQjvv71MABpY77+977+9MO+/vUHvv73vv71UAgk+WwA0MBFmGBPvv73vv70SSAzvv70E77+9PjBgQgoj77+977+9Hjzvv73vv70wYe+/vSvvv70P77+977+9Yu+/vQ3vv71v77+977+977+977+9wq1vMO+/vQLvv71+77+9N++/ve+/vSfvv714AWxQ77+977+9AO+/ve+/vR5lDO+/vRTvv70uMzx477+977+9Qe+/ve+/ve+/ve+/ve+/vX4D77+9dxnvv73vv70k77+9QDkBMO+/ve+/ve+/vQpg77+977+9AO+/vQIFSXZk77+9MUBjHe+/vTLvv70T77+977+9GUYm77+9QQ5UTe+/ve+/vS7vv71w77+9A++/ve+/vVvvv70Z77+977+9OO+/ve+/ve+/vQ5w77+9A10GC++/vQ9ALADvv73vv73vv73vv73vv71weVDvv70Z77+9ce+/ve+/ve+/vXBC77+977+977+977+9de+/ve+/ve+/vQbvv73vv70AM2wDKDZBEiADYBpA9IGzn3F6S++/vQceURvvv73vv70MCBbvv70TTe+/vThR77+905Am77+9HO+/vQsx77+9JCjvv71A77+9IFIMFO+/vTgxSB7vv70W77+9A1Dvv70mUBAU77+977+977+977+9AO+/vdKfMVzvv73vv70dHFbvv73vv70zUO+/vWTvv73vv70RZnAw77+977+9ByMQOwLvv73vv70HbBkdZCDvv715dALvv70o77+977+977+9CO+/vRoKSnvvv73QnO+/ve+/vT4+QAN7IdCQAwTvv70zHAUlCD9ALxDvv70NAwgwAO+/vU/vv71VLHvvv705AAAAAElFTkTvv71CYO+/vQ==
I find this solution for encode to base 64 : https://koding.com/Activity/base64-encoding
And now the encode is closer to what need to be but still not help:
/VBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDb9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5cf1lPAAAAf1JREFUeP1i/f39PwP9ACM2/f1n/RX9VD0QOwD9Av39AyA+AA39Jmcf/f0BOv0R/UH9QP39CP1MABpY/f0w/UH9/VQCCT5bADQwEWYYE/39EkgM/QT9PjBgQgoj/f0ePP39MGH9K/0P/f1i/Q39b/39/f2tbzD9Av1+/Tf9/Sf9eAFsUP39AP39HmUM/RT9LjM8eP39Qf39/f39fgP9dxn9/ST9QDkBMP39/Qpg/f0A/QIFSXZk/TFAYx39Mv0T/f0ZRib9QQ5UTf39Lv1w/QP9/Vv9Gf39OP39/Q5w/QNdBgv9D0AsAP39/f39cHlQ/Rn9cf39/XBC/f39/XX9/f0G/f0AM2wDKDZBEiADYBpAx99xekv9Bx5RG/39DAgW/RNN/ThR/dAm/Rz9CzH9JCj9QP0gUgwU/TgxSB79Fv0DUP0mUBAU/f39/QD9nzFc/f0dHFb9/TNQ/WT9/RFmcDD9/QcjEDsC/f0HbBkdZCD9eXQC/Sj9/f0I/RoKSnv9HP39Pj5AA3shEAME/TMcBSUIP0AvEP0NAwgwAP1P/VUse/05AAAAAElFTkT9QmD9
I try also the soultions here:https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data without convert to base-64 and with 'arrayBuffer' and 'Blob' objects but the picture didn't show . The only way the picture show it's when I convert to a correct base-64 and then create arraybuffer and initialize Blob with him .
But the problem is the same - I cant convert my data to correct base-64.
can anyone save me please ??
Thanks !
Here is the link to this small library that is meant can be useful for u. It can convert base64 to binary and vice versa.
My problem is solved . I use dropzone plugin to get the response from server and because of this I get binary data as a text reponse and it make my problems. I just go to dropzone.js and change 2 minor things to get the response in type of arraybuffer :
xhr.responseType = 'arraybuffer'; ( line 1246)
This is new line to get the response in type of arrayBuffer, and then create a Blob object from the arraybuffer response .
response = xhr.response; (line 1305 )
Change it to get response inseted TextRrsponse..
I hope that it will help somebody...
Thanks everyone !
You could try using the turbocommons library. Just download the minified js file (turbocommons-es5.zip) and write the following code:
<script src="../yourpathtothelibrary/turbocommons-es5.js"></script>
<script>
var ConversionUtils = org_turbocommons.ConversionUtils;
ConversionUtils.stringToBase64('your binary string here');
</script>
I believe it will work in your case as it is extensively tested, Or you can look at the code on how it is done by the library here:
https://github.com/edertone/TurboCommons/blob/master/TurboCommons-TS/src/main/ts/utils/ConversionUtils.ts
More info here:
https://turboframework.org/en/blog/2022-10-26/encode-decode-base64-strings-javascript-typescript-php
Or you can test it online here:
https://turboframework.org/en/app/stringutils/base64-encode
I know that it is possible to display byte arrays as images in html after conversion to Base64 string as explained: Here
Is it possible in html to display the raw byte array as Image without conversion to string?
the window.URL.createObjectURL Method creates a URL for the byte array image directly without conversion
var link = window.URL.createObjectURL(data);
var image = document.getElementById("liveBox");
image.src = link;
I have a base64 string that I got from using Google Charts.
The project is being written in Python/Django/Javascript if that helps.
chartStr = chart.getImageURI()
I want to save this string as a .png on my server.
I've tried
with open('foo.png',"wb") as f:
f.write(chartStr.decode('base64'))
but I get an incorrect padding error. I fix this by adding a '=' at the end of the string chartStr. WHen I do that, the foo.png image is created but when I try to open it I get an error that says
Fatal error reading PNG image file: Not a PNG file
Any advice?
Thanks!
When you added the = to the string the returned string from .decode("base64") was the same as the input string minus the appended =.
To write the .png to a file you need to do the following:
head, data = chartStr.split(",", 1)
with open('foo.png',"wb") as f:
f.write(data.decode('base64'))
This removes the data:image/png;base64, stuff and leaves you with some base64 encoded data.