I have a pdf with encoding UniJIS-UCS2-H. i want to convert it in to base 64 in javascript.
i wrote the code like this. It converting it in to pdf but the content is not visible.
my code is showing below.
function getBinary(file){
var xhr = new XMLHttpRequest();
xhr.open("GET", file, false);
xhr.overrideMimeType("application/pdf; charset=UniJIS-UCS2-H");
xhr.send(null);
return xhr.responseText;
}
function base64encode(binary) {
return btoa(unescape(encodeURIComponent(binary)));
}
var binary = getBinary('http://localhost/first.pdf');
var base64encoded = base64encode(binary);
data = "data:application/pdf;base64,"+base64encoded;
the data is contain only a plain pdf. how can i resolve it ?
Related
I am trying to input a file and get the same output as php's file_get_contents() but doing so in javascript. My javascript code is below:
var xhr = new XMLHttpRequest();
xhr.open( "GET", "http://localhost:3000/line.png", true );
xhr.responseType = "arraybuffer";
xhr.onload = function( e ) {
var arrayBufferView = new Uint8Array( this.response );
console.log(arrayBufferView);
var blob = new Blob( [ arrayBufferView ], { type: "image/png" } );
var reader = new FileReader();
reader.onloadend = function () {
var blobStr = reader.result;
console.log(blobStr);
}
reader.readAsText(blob, "iso-8859-1");
};
xhr.send();
When I use the above code I get what appears to be the exact same output as php's file_get_contents(). However it ends up being different output because when I md5 each string, I get different results. My example image is below:
Looking at the javascript string outputted in a div, I see this:
Looking at the php string outputted in a div, I see this:
As you can see, both look the same, except for maybe some formatting differences? Would this be the cause of my issues? How would I force the javascript version to have the same output as the php version?
I need to download an image file when user click a download button.
I have the content of the file in utf-8 format returned from the server.
ex: "�PNG IHDR#�v/j�sRGB���gAMA�� �a pHYs���o�d��IDATx^�� �TՕ�_�~��^>�~��N�M�:/��t�Iw�I^��̜8���I#шH��DC�(*" ..... "
( The exact file string displayed in http://codepen.io/jduprey/details/xbale when I upload the same file in this web site)
Now I need to create the blob of the file and save it in the client side.
I tried FileSaver( https://github.com/eligrey/FileSaver.js) library as follows
var blob = new Blob( [ utfFileString ], { type: 'image/png' });
saveAs(blob, aData.name );
But downloaded files are in incorrect format and and cannot be opened.
Appreciate if someone can help me on this.
Thanks!
Png files are not utf-8 encoded, notice all those invalid code sequence replacement characters(�) in the string.
You need to get the data in binary format, such as blob or array buffer. Something like
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if (this.readyState == 4 && this.status == 200){
...
var blob = this.response; //The binary data
...
saveAs(blob, aData.name);
...
}
}
xhr.open('GET', 'path/to/file');
xhr.responseType = 'blob'; // the response will be a blob and not text
xhr.send();
I'm trying to render vtk objects which are send from a webserver directly on the client using XTK without storing them to the disk. According to the XTK Documentation I just have to pass the vtk file as string into X.Mesh.filedata, but it just doesn't display anything when I'm trying to do that.
I want to do something like this:
var data = recieveVTKFileAsStringFromServer();
var r = new X.renderer3D();
r.init();
// create a mesh from a .vtk file
var dataset = new X.mesh();
// dataset.file = 'someFile.vtk';
dataset.filedata = data;
// add the object
r.add(dataset);
// .. and render it
r.render();
When I load the file from the file everything works just fine, setting it using filedata doesn't. Where is my mistake?
I also came up with the similar scenario to load the binary data directly using filedata instead of setting file attribute. I did this by passing dummy name in a file attribute along with actual binary data set in filedata and everything works fine.
var xhr = new XMLHttpRequest();
xhr.open('GET', '/test.nii', true);
xhr.responseType = 'arraybuffer';
xhr.send();
xhr.onreadystatechange = function (e) {
if (this.readyState === 4) {
var r = new X.renderer2D();
r.container = 'myImg';
r.orientation = 'Z';
r.init();
volume = new X.volume();
volume.file = "abc.nii";
volume.filedata = this.response;
r.add(volume);
r.render();
}
};
i have a medium blob data type on my database, it is storing pictures with gif,jpg,png,bmp types.
i am retrieving the blob using jsf.
i have read this question -> Using Javascript to Display Blob
but i was confused how he converted his blob to base64.
this is what i have done so far.
var blob;
var base64;
var image;
<ui:repeat value="#{testController.allItems}" var="item">
blob = "#{item.logo}";
base64 = btoa(blob);
image = document.createElement('img');
image.src = 'data:image/png;base64,'+ base64 ;
$('#testDiv').append(image);
</ui:repeat>
the above code just gives me a broken link pictures.
sample blob from inspect element
blob = "[B#2d8f2913";
and the image inside the div
<img src="data:image/png;base64,W0JAMmQ4ZjI5MTM=">
UPDATED my code based on Ian's suggestion
i created a method RenderLogo
public String RenderLogo(byte[] rawLogo) {
String base64String = Base64.encodeBase64URLSafeString(rawLogo);
return base64String;
}
now on my js:
var base64;
var image;
<ui:repeat value="#{testController.allItems}" var="item">
base64= '#{testController.RenderLogo(item.logo)}';
image = document.createElement('img');
image.src = 'data:image/png;base64,'+ base64;
$('#testDiv').append(image);
</ui:repeat>
it gives me a console error in inspect element
GET data:image/png;base64,_9j_4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP_sABFEdWNreQABA…CAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgP__Z
this is whats written in the js when i inspect element
blob = '_9j_4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP_sABFEdWNreQABAAQAAAA8AAD_7gAOQWRvYmUAZMAAAAAB_9sAhAAGBAQEBQQGBQUGCQYFBgkLCAYGCAsMCgoLCgoMEAwMDAwMDBAMDg8QDw4MExMUFBMTHBsbGxwfHx8fHx8fHx8fAQcHBw0MDRgQEBgaFREVGh8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx__wAARCADLAMgDAREAAhEBAxEB_8QAsgABAAIDAQEBAAAAAAAAAAAAAAUGAwQHAQIIAQEAAgMBAQAAAAAAAAAAAAAAAwQCBQYBBxAAAQQBAQQFBQsHDAMAAAAAAQACAwQRBSExEgZBUWEiE3GBkTIHobHB0UJSYnIjFBWCkqKyM3M28MLSQ5OzJDRUdDUW4eIXEQACAQMABwQJAwUAAwAAAAAAAQIRAwQhMUFREgUGYXGBwfCRobHR4SIyE2IUNPFCUjMWcoIV_9oADAMBAAIRAxEAPwD9UoAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAxy2K8X7WVkf1nBvvr1I8cktZi_FNN_1cP8AaM-Ne8L3GP5I70Zop4JRmKRsg-iQfeXjRkpJ6j7Xh6EAQBAEAQBAEAQBAEAQBAEAQBAEAQBAEBHaprlSgC1x8Sfoibv_ACj0LOMGyK5eUe8rF3mHU7RI8TwY_mR930neplbSKU78pEaSSck5J3krMhPEB61zmkFpII3Eb0BJ0eY9SrEBz_Hj6WSbT5nb1g7aZNDIku0tGmazT1BuIzwTAZdC7f5usKCUGi7buqRvrElCAIAgCAIAgCAIAgCAIAgCAIAgCAhuYNc-5N-71zm04ZJ3hgPT5VJCFSvfvcOhaynPe57i55LnOOS47SSrBr2zxAEAQBAEB9RyPje18bi17TlrgcEFAnQueg62L8fhTYFqMbfpD5w-FV5wobGze4tD1ksoycIAgCAIAgCAIAgCAIAgCAIAgNfULjKdOSw7bwDut63HYAvYqrMLk-FVOfzTSTSvlkPFI8lzj2lW0qGrbq6s-EPDd0zSbWoSFsQ4Y2-vK7cPjKxlJIkt2nPUWipyzpkDR4jDO_pc_d-aNihdxsuxx4rtNz8L0zGPukP9m34ljxPeSfjjuRpXOWNNnaTE015OhzNoz2tPwLJXGiKePF6tBV9S0u1Ql4JhljvUkHqu_wDKnjJMp3Lbi9Jpr0jMtaxLWnZPEcSRnIPwI1U9jJp1R0Clajt1Y7EfqyDOOo7iPMVUaozawlxKpmXhkEAQBAEAQBAEAQBAEAQBAEBWecLR4oKoOzBkePcb8KmtLaU8qWpFaUxTM9GpJbtx12b5DgnqG8nzBeSdEZQjxOhdp59O0TS3TSnwqtZuXHpJ-FzitdlZMbUHcm_pRusbGlckrcFpZyrmDnvWtVlc2KV1OnnDIIiWkj6bhtPvL55n89v320nwQ3LzfojucLk9myqtcU978kVwSSB_GHEPzniBOc-Vafida7Ta8KpQs_LvP-saZKyO1I67Szh0ch4ntHWx52-Y7Fu-X8-vWGlN8cNz1-DNRncmtXlWK4J9mrxR1LNDWdMa-NwlrWG8Ucg3jt7CCvoWPfjcipwdYs4bIx3FuE1Roo1qtJWsSQSevG4tPb2-dbBOpppRo6GJDwtHJ9omOeq4-oRIwdh2O-BQ3VtLuLLQ0WNQlsIAgCAIAgCAIAgCAIAgCAICk8zvLtYmB-QGNH5oPwqzb1GuyH9bIpZkBYOT4A61PMRtjYGj8s_-qiuvQWsVaWyF9q-pSeJS01pxHwmxKOskljPRhy4XqrJdYWlq-5-5eZ3PTdhUlc26vN-Rz1cedQEAQHSPZRqUj69zTnklkJbND2B-Q8ekArtelcluM7b2aV46zkuo7CUo3Ft0PyJHm6FrNQjkH9ZGOLytJHvYXbWnoOKyl9VSCUhWJjlSQt1UN-fG5vvO-BR3dRYxn9Rc1XNgEAQBAEAQBAEAQBAEAQBAEBSOZWkazOT8oMI_MA-BWbeo1uR97ItZkJY-TZQJrMXS5rXDyNJH85RXkW8R6Wiue1ik9t-ldx9nJEYSeoscXe7xrgeq7LVyFzY409Tr5nd9N3VwShtTr6_6FDXJnShAEB0P2TU5OLULhGI8Mhaegu2ud6NnpXY9KWX9c9mhefwOW6kur6IbdLJjnCRpuwxjeyPJ_KJ-Jdza1HD5T-pEApSqS_KzC7V2n5jHE-jHwrC7qJ8ZfWXRVjYhAEAQBAEAQBAEAQBAEAQBAVXnCsW2IbIHde3gce1pyPcKntPYUcqOlMrylKpt6VeNK9HPvaDiQDpadhXko1RnbnwyqW3W9Ipa9pLqsju5IA-CZu0tdjuvH8ty1GfgxybTty8HuZv8LMlYuKcf6o45rWgano9kwXYi0ZIjmG2N462u-DevmubgXcaXDNdz2PuO_wATNt341g_DaiOVItEnoXLmqa1ZEVSM-GD9rYdsjYO09fYNqv4PLruTKkFo2vYinmZ1vHjWb07trOyaXp1HQtIZWjPDBXaXSSHe529zj2k_EvpWFhxsW1bhs9r3nz_My5Xpu5L-hTdQuOuXJbDtnGe6Opo2AehbWKoqGjuT4nU1l6YFl5OrHisWSNmBG0_pO-BQ3XsLmLHWyzKEuBAEAQBAEAQBAEAQBAEAQBAaWsUBeoSQj9oO9EfpDd6dyyhKjI7sOKNChOa5ri1ww4HBB3ghWjVniAl9G1-Wh9jKDJVJzwj1m5-b8SwnCpPavuOh6i0RXNL1GExh0c7H-tC8A-ljlVuWk1SSqjYWr-msXRmsOVOWhJ4n4ZX4urw28P5uMKj_APKxa1_HH1F7_wCjkUpxy9ZsT6hpenRcDnsiDNjYYwM-QNar9u1RUiqIoXLyrWT0lV1nXZtQPhtBjrNOQzpd2uVmEKGvu3nLuItZkJ9RsfI9rGDie4hrWjpJ2BAlUv8AplJtKlHXG1zRl563HaVVk6s2tuHDGhtLEzCAIAgCAIAgCAIAgCAIAgCAICt8yaG55derNy7fPGOn6Q-FTW57GU8iz_cisKYphAEB9-NMW8PG7h6snCUPas-EPAgCAtfLmhugxcstxKR9lGfkg9J7VBcnXQi9j2aaWWBRFoIAgCAIAgCAIAgCAIAgCAIAgCAICD1blmGy501UiKY7XMPqOPm3FSxuU1la7jp6VrKxboW6j-GxE6PqJGw-Q7iplJMpSg46zXXpiEAQGzT0-5cdw14nP63bmjyuOxeOSRnG25ai06Ry3BULZrBE1gbQPkNPZ1ntUErlS7ax1HS9ZMqMsBAEAQBAEAQBAEAQBAEAQBAEAQBAEAQHjmNe0tcA5p3gjIQNGhNoGkSnLqzWnrZlnuNICzU2ROxB7DB_1bSM54H46uIr38rMf20DYh0HSYTltZpPW_L_ANYleObMlZgthvNa1oDWgBo3AbAsCU9QBAEAQBAEAQBAEAQBAEAQBAEAQBAEAQBAEAQBAEAQBAEAQBAEAQBAEAQBAEAQBAfMsjIo3SPOGMBc49QAyUR43Qq1Pmi47UGeO4Cq9-C3AHCHbBt7FO7aoUoZL4tOotagLwQHjnNa0ucQ1rRkk7AAF43TSz1KpR9e9p9StI6DSohae04Nh5Iiz9EDvO9xctndTQg-GyuN73q-fsOiw-n5TXFdfCt235FcPP3Olok1n8Izuhga4Ds7zXrTPn2dc-1-qK-DNsuTYkPuXrl_Qy1PabzHXkxaZFYaPWa9nhu8xbjHoWdrqXJg_rUZeFPcYXOn8eS-luPjUvPLfOWla4PDjzBcAy6tIdpA3ljtzh7vYuq5dzi1laF9M_8AF-W85zP5Xdx9L0w3_HcTy2xrDllz2l8xQ254mNr8McjmNyx2cNcQPlLgr3UmTGbS4dDez5nZ2uQY8opvi0rf8jD_APUOZfm1_wCzd_SUf_T5X6fV8zP_AJ7H_V6_ket9qXMgOTHWcOosfj3HherqjJ3Q9T-IfT2Pvl618Cx8u-0qrfsMqajCKk0h4Y5mnMRcdwOdrc-dbnl_UkLslC4uBvbs-Rqs7kMrcXK2-JLZt-ZdV05zxWYdf1F-riqXN8IzGPHDt4eLG9TOCpUpq_Ljp2lmUJcCAxWpHR1ppG-sxjnN8oBK9Wsxk6JkFoGt37t4wzlpZwF2xuNoIUs4JIrWL0pSoyxKEthAEAQBAQfNd7waTazT37B731G7T6SpbUdNStkzoqbytS6fNFQhuO_ZzOc0dmN3p2qZS00KbttRTLhoF775p0bnHMsf2cnlbuPnCrzjRl-xPiiSKwJjnntN5kka5uiVn8ILQ-44bzna2P8AnHzLjupuYtP8EX2y8l5-o6np_ATX5pf-vm_Iw8h8j1rdduq6ozxIXn_C1j6rgDjjf1jO4KPkXJI3I_muqq_tXmyTnHN5Ql-K26Pa_JHR4ooooxHExscbdjWNAaAOwBdnGCiqJURykpOTq3Vmlq2haVq0Biu12yZGGyYAkb2tfvCrZeDayI0uRr27fBk-NmXbLrB093qORcwaLe5a1kMjkcAD4tOy3YS3Ozd8obivnfMMK5hX6J9sX6bTucLLhl2atdkkdV5V10a1o0Vw4E4zHYaNwkbv9IIK77lWd-5sKf8Adqff6aTi-Y4f7e84bNa7jDz1_CeofUb_AHjVFzz-JPuXvRJyf-VDv8mVD2Tf8jf_AHLf1lzvSn-yf_iveb3qT_XDvOlSRxyMLJGh7HbHNcAQR2grt5RUlR6UcjGTTqjjfPml09N5hkhqNEcMjGy-E3cwuyCAOgbMr5tz3FhZyXGGhNJ03He8myJ3bCc9LTpXedX5fsS2dD0-eXJlkrxOeTvJLBk-feu_wLjnYhJ63Fe44rNgoXpxWpSfvKtW_iJv-5P662j-00kf9niXhVjZBAYL_wDkbH7p_wCqV7HWYz-1lV5T_wCUP7p3vhT3dRRxvuLiq5sAgCAIAgKRqMr9V1rgiOWucIoj1NB9b3yrMVwxNbcfHPQWu7p0U-mOpMGAGARdhb6vvKBSo6l6dtONCs8s3XVdRNeTusn7jgeh49X4lNcVUU8efDKm8uSrmwOGcyTPucyag_OS-y9jc9TXcDfcAXyvmM3cyZvfNr20R9GwIKGPBfpXxO3Va0dWrDWiGI4WNjYB1NGAvqFq2oQUVqiqHzy5cc5OT1t1MqkMAgKZ7U6ccuhQ2cfaV5wA76MgIcPSGrmuqLKljqW2Mvf6I3_Tt1q847JR93oyN9ktl3iajVJ7pEcrR1EFzT6chUek7jrch3P3lzqW3ohLvRaOev4T1D6jf7xq3vPP4k-5e9Gm5P8Ayod_kzmHKvNEnL9ieZlcWDOwMILi3GDnoBXDcr5m8STko8XEt9DsOY8vWTFJvhoWKT2tXSwiPT42v6HOkc4egBvvrcy6rnTRBV7zVR6ahXTN-ohdN0bXebNWdbmDhHK7Ni45uGNaNnCzrIGwALWY2HkcwvcctTemWzw-Bsb-VZwrXCta1R2-J2GCCOCCOCIcMUTWsY3qa0YAX0a3BQiorUlQ4Oc3KTk9bKVW_iJv-5P66uP7TVx_2eJeFWNkEBgv_wCRsfun_qlex1mM_tZVeU_-UP7p3vhT3dRRxvuLiq5sAgCAICO1-99002RzTiSX7OPyu3nzBZwjVkN-fDEptG9LSsCeINMgBA4hkDPnCsSVTXwm4uqJL_tmqdUX5p-NYfiRN-5kRdi1JNZdZOGSPdxng2Di6wpEqKhDKVXUvemXW3KMVges4YeOpw2FVZKjNnbnxRqcZ5qrSUuZtQZjhIndKzySHxG7-xy-V80tu1lTX6q-vSj6Ry64rmPB_pp6tB2mhciuUoLcRzHPG2Rv5Qyvpti8rkIzWqSqfPr1p25uL1p0M6lIwgKT7VL8cWj16eftbE3Hj6EYOf0nBcx1TfUbMYbZS9i9EdD07ZbuueyK9rNL2S1HcOoXCO6THCw9oy53vtVXpSzonPuXm_IsdSXfsh3v09pZuev4T1D6jf7xq3fPP4k-5e9Go5P_ACod_kyk-zGhQuX7rblaKy1kTS1szGvAPFvHECuY6ZsW7lyanFS0bVXadD1BenbhFwk46djobXtK5arVY6-pUK7IIf2NiOJoY0E7WO4WgDbtBPkU_UnLY21G7biox1Oip3P07CHkOfKbdubbetV9vp3lh9nmuDUtDbXkdmzRxE_rLMfZu9Ax5luOn8781jhf3Q0eGz4eBq-d4f4r3Evtnp8dpaFvjTFHr7OYm52f4oj9NWX9prY_7PEvCrGyCAwagQKFkncIn5_NK9jrMZ_ayq8pAnVHdkTs-kKe7qKOL9xcVXNgEAQBAU_me46zqIrR95sHdAHS92_4lYtqiqa_InWVNxZdOoR1aUUBaC5re-cA5cdp91QylVly3BRjQ2fCi-Y30BY1M6I0Nb05lrTpGMYPFZ348DblvR5ws4SoyK9b4okNyle4J303nuy9-P6wG30j3lJdjtK-LOjoR_tK5ZktRN1iozilgbwWmNG0xjaH_k9PZ5FxvUnLXcX5oLTH7u7f4e7uOy5DnqD_ABSeh6u_d4-mshuRueI9LZ-HaiT9yJJhmALjETvBA28J37FreSc7Vhfiu_Zse75F_m_KHef5Lf37Vv8AmdMqXqVyMSVZ452EZDo3B3vLuLV-FxVhJSXYchcsztukk0-0j9Z5r0TSYnOs2GvmA7teMh8hPkG7ylU8zmtjHVZS07lpfp3lrF5devv6Y6N71HKNRv6rzTroc2MummIjrwN2hjB0Z7N7iuAyL93Pv6F9T0Jbl6a2drYs2sOzpehaW979NR13l7RotH0mCjGeJzBxSyfOkdtcfi7F9D5fhrGsq2tmvte04fNynfuub8O4jed7tN_K-oRsnjdIWtAYHtLsiRvRlUud3oPFmlJVpv7UW-UWprJg2nTu7GVL2WWIIdQvGaRsYMTQC9wbnvdq5_pe5GNyfE0vpXvN31FCUoRoq6Tol-nU1XTJ6rnNkgssLONpDgD0OGOlrhldjkWYZFpwemMl6eo5WzdlZuKS0Sizk_LGoTct80eFb7kfGatwdABOOLzEA56l8_5ZkSwsuk9Crwy-Pn3HbcwsLLxqx1_dH4HX4rlSZ3BFPHI7GeFjmuOPICvosb0JOiaficLK1KKq00VHmGnLT1M2WZDJXeJG8dDxtPu7Vctuqoay_BxlUn9M5gpW42iR7YbG5zHHAJ-iTvUUoNFq3fUu8kHWK7G8T5WNb1lwAWNCVyRX-YNfrvrvqVHeIX7JJR6oHUD05UtuG1lS_fTVEffKVF8cUlt4x4vcj-qN585Xl2Ww9xYUVSwqIthAEB4_j4HcGOPB4c7s9GUDK_p_LViLUGWrUrJA1xeQM5L94O0Dp2qaVzRRFSGO1KrLCoS2EAQFdl5ZtN1E2qksbGh_iRtdnIO_GwblMripRlR474qosXRt84UJbObe0DQuVqT_AB2SPq35wXtrQsD2O2-sQS0M29R8y4nn-DiWnxJuNyWxKqfup6aDreS5mTcVGlKC2t6fn6aSgrkjpia5f0HTtTkDbWrQUjnbG8O4yOwu4GbfrLacvwbV9_XdjDsev20XtNfm5lyyvptyn6eL9h1Tl3QND0iLg0_hkmeMyWC4PkcPKNw7Au95dgWMdUt6Xv1tnF52bevutzQt2wmVsigc0tey3V5rU0zbdcNke54B484cSfmriLvS96U2-KOl9vwOut9Q2oxS4ZaF2fExf_KNZ_1lf9P-io_-Vv8A-Ufb8DP_AKO1_jL2fEvnLGkzaTodbT5ntklg4-J7M8J45HPGMgHc5dZyzElj2I25OrjXV2ts5rmGSr96VxKidPckQHOHIU-s6k29Tmihe5gbYbJxd5zdjXDhB6NnmWo5vyGWTd_JBqLppqbTlnOVYt8E03p0UPnk_kbUNE1Y3bFiGWMxOj4Y-LOXEHpA6k5RyO5i3uOUotUpoqOZ83t5FrgimnWukuFqrBahdDOwPjd0HoPWF06dDnZRUlRldtcnv4ias4LTubLkEedoPvKZXd5Uli7mazeUtTJ2viaOviPwNXv5UYftZEjR5SrxvD7UnjEbfDaOFvn6SsJXdxNDFS1k-1oaA1ow0bABuAURaCAIAgCAIAgCAIAgCA17On0bUkUtmvHNJASYXPaHcJdvxnyKG5j25tOUU3HVXYS2784JqLaT1mK9omkXozHbpxStxgEtAcPI4YcPMVHfwrN1UnGL8DOzl3bbrGTRTtU9lNd7y_TLZhB_qZhxtHkeNvpBXOZXSsW62pU7Hp9pvsfqOSVLka9q-BO8mcqnQKkzZntltWHgySMzgNaMNaM4PSStpyblf7SDUmnOT2bthrua8x_czVFSMSwrcmqCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAc42b-hAVyDm2SV8UIq4nlEcfDxHAscbG2Izs3RNlDs9O3ZsQG1qPMLqN41XwcWDC_jDjsgk4_ElOz-r8M58oQHkvMLodMq6jLBivZMhOCctj4HyQndveGNGOtyAz6PrEmoOlDoREK7WMnPFnhs5cJotw2M4W7enKAxa7rs-nNsmCBsxp1X3Z_EeWZY3IDWYa7Lu6f5FAe6zrstCwytBVfamdE-csY2VxLWEDhb4bJO87PysAdKAyPvXv-wVqbGsFOSrJPJxZEgc17WjHR8tARFLnptnmkaIKzXQSyTwwXI3vIMlZvHI1wdGxu75rjhAYH8_TnXG0I6LDVOo_hZndNiXxGjL3-Fw-rt2HKAla_MNyfmu3osdNpr02RyTXPEwQJWFwHBjbl2zegI2jz2-1qVSl91Y02b9uk4iTJa2q0OD8Y-VncgLJql8UabrHB4jg-ONjCeEF8sjY2cTsHhHE8ZONgQGG5qFupVg8SKN1yxM2CNge4RBziTkvLc4DW59XfsQGs7Xp_wAP8Ztdv3kWxRfFxnw_EMvhcQfw5LdufVygPNL163atxwWKzIWzG0xjmSF546UwhkyCxmxzslvYO1ATSAIAgCAIAgCAIAgCA126fRbI2RteMSMkfMxwaMiSQEPeD1uDjkoD6mpU53ufNCyR7o3QOc4AkxPxxM-qcbQgPZKlWSFkEkTHQsLCyMgcIMZDmYH0S0YQHyaFEwzwGCMw2S51iPhHDIXjDi4dOelAaetaDX1ZrY7Bb4XC6OTMbHPLH44g17hlucfyIBQG5aoUrfB95gZN4eSwvaDjO_GevG1Afb6teSeKw-Nrp4Q4RSEd5oeMOAPbjagNWPQtFjv_AIhHRgZeLnPNlsbRJxPHC48QGckHagNLU-UtKu6lU1FsbK9ytZZZkmjY0PlMYIDXu34QErHSqR2pbccLG2Zw1s0wADnhmxocenCA1maBojLxvsoQNul5kNlsbRIXkEF3EBnJyUBsmlTMc0RgjMVgl07C0Fry4YcXA7DkDpQHz-HUPun3M12Grv8ABLQW5zxZweni2oD1tGk2COBsDGwROD4ow0BrXNdxAgDpDtqA9jpVI3tfHCxr2GRzHAAEGZ3HIR9d20oDMgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgP__Z';
image = document.createElement('img');
image.src = 'data:image/png;base64,'+ blob ;
UPDATE 2
ahh! fixed it! now its working.
changed Base64.encodeBase64URLSafeString(rawLogo); to Base64.encodeBase64String(rawLogo);
I wouldn't be surprised if the problem is that the way the JSP renders item.logo on the page is messing it up. Since you have no use for the byte array in JavaScript, you can convert it in Java before printing it on the page. Also, this relieves the need for window.btoa, which isn't natively supported in IE before version 10.
Try creating a method in your class that returns the base64 encoded value of the logo property, called something like getLogo64...then in your JSP, you can reference it like: base64 = "#{item.logo64}"; and not even deal with the logo property. So an example is:
public String getLogo64() {
return Base64.encodeBase64String(this.logo);
}
At the same time, you can add a basic method that accepts a byte[] and converts it (which is what you have found to work):
public String RenderLogo(byte[] rawLogo) {
String base64String = Base64.encodeBase64String(rawLogo);
return base64String;
}
and use it like #{testController.RenderLogo(item.logo)}.
Reference:
encodeBase64String: http://commons.apache.org/proper/commons-codec/apidocs/org/apache/commons/codec/binary/Base64.html#encodeBase64String(byte%5B%5D)
If the resource you're loading has the appropriate protocol and CORS headers available, you could load it as a Blob, then add it to your document like this using the URL.createObjectURL(data) method to get the img src:
function urlToDataBlob(file_url, callback){
var xhr = new XMLHttpRequest();
xhr.open('GET', file_url, true);
xhr.responseType = 'blob';
xhr.onload = function(e) {
console.log('urlToDataBlob: load: ', e);
if (this.status == 200) {
callback(this.response);
}
};
xhr.send();
}
// eg:
urlToDataBlob('https://the.url/to.some.jpg', function(data){
console.log('data: ', data);
var _img = '<img src="'+ URL.createObjectURL(data) +'">';
// add to your document..
});
See : https://www.html5rocks.com/en/tutorials/file/xhr2/
Is it possible to view the raw data for an image file in javascript?
I'm trying to write a script that converts an image into its hex dump.
How can I view the data I'm writing to the image file?
You can do this with XHR:
var xhr = new XMLHttpRequest();
xhr.open('GET', '/my/image/file.png', true);
xhr.responseType = 'arraybuffer'; // this will accept the response as an ArrayBuffer
xhr.onload = function(buffer) {
var words = new Uint32Array(buffer),
hex = '';
for (var i = 0; i < words.length; i++) {
hex += words.get(i).toString(16); // this will convert it to a 4byte hex string
}
console.log(hex);
};
xhr.send();
Look at the doc for ArrayBuffers and TypedArrays
And you can see how I use it in testing here
Is it possible to get the source code of a file in javascript?
Find the URL for the script and load that into your browser. (Or use Firebug)