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.
Related
I am building a web-app where I can upload a JSON file, update it, then download it. The output JSON is not valid because some characters changed through the process. I don't know where I'm wrong because even when I only do upload => download without updates the JSON is still not valid...
This is how I read the uploaded JSON:
readFile: function () {
var reader = new FileReader();
reader.onload = function(event) {
this.json = JSON.parse(event.target.result);
}.bind(this);
reader.readAsText(this.file);
}
Then I can edit (or not) the json object. Then I can download it with JSON.stringify(json).
When I try to read or validate the output JSON I get errors signaling invalid characters, for example:
Invalid characters in string. Control characters must be escaped for some lines in my editor.
UnicodeDecodeError: ‘utf-8’ codec can’t decode byte 0xac in position X: invalid start byte when I try to load it in python with open('output.json') as json_file: data = json.load(json_file)
Does using JSON.parse then JSON.stringify modifies the encoding or structure of the JSON? How can I avoid this effect?
UPDATE:
Original file can have some characters like \u2013, \u2014, \u201d, \u00e7 but those characters are transformed into things like this � or invisible characters in the output JSON, which I guess make it not valid.
Try to add 'UTF-8' as a second parameter to the readAsText function as follows :
reader.readAsText(this.file,'UTF-8');
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'm working on a VueJS project where I generate SVG images based on input. After they have been generated, I send data from them to a back end API as a base64 encoded string.
Now, whenever I try to encode the string with UTF8 characters, I get the following error:
Uncaught DOMException: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.
I tried to solve the issue with replacing all characters in the HTML with their Unicode code points. However, whenever I try to get the DOM element, the Unicode encoded characters are reverted back to their plain text format.
How can I obtain the HTML as a base64 encoded string?
The issue can be seen in a fiddle here.
I've tried both using XMLSerializer and just running innerHTML.toString():
let svgEl = this.$el.querySelector('.svg-container svg')
if (!svgEl) {
console.log('no poster element')
return
}
// Using XMLSerializer:
console.log(btoa(new XMLSerializer().serializeToString(posterEl))
// Using innerHTML:
console.log(btoa(posterEl.innerHTML.toString()))
Both the above examples yield the same error.
Thanks.
You can follow the answer steps in for this answered question:
Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.
The key of solution is to encode the string by this way:
btoa(unescape(encodeURIComponent(str)));
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
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);