Using data URI instead of blob in TinyMCE 4 image upload - javascript

Using TinyMCE 4, I am trying to do a basic local file picker such as the one used in their example.
After running their example, I noticed that the generated image source is a blob opposed to a base64.
So my question: is it possible to use base64 instead of a blob?
I thought the first argument of the file_picker_callback callback would be used as the source of the image, so I tweaked the code using this answer where I pass the data URI as the first argument.
file_picker_types: 'image',
// and here's our custom image picker
file_picker_callback: function (cb, value, meta) {
var input = document.createElement('input');
input.setAttribute('type', 'file');
input.setAttribute('accept', 'image/*');
// Note: In modern browsers input[type="file"] is functional without
// even adding it to the DOM, but that might not be the case in some older
// or quirky browsers like IE, so you might want to add it to the DOM
// just in case, and visually hide it. And do not forget do remove it
// once you do not need it anymore.
input.onchange = function() {
var file = this.files[0];
var reader = new FileReader();
reader.onload = function () {
// Note: Now we need to register the blob in TinyMCEs image blob
// registry. In the next release this part hopefully won't be
// necessary, as we are looking to handle it internally.
//var id = 'blobid' + (new Date()).getTime();
//var blobCache = tinymce.activeEditor.editorUpload.blobCache;
//var base64 = reader.result.split(',')[1];
//var blobInfo = blobCache.create(id, file, base64);
//blobCache.add( blobInfo );
// call the callback and populate the Title field with the file name
cb(reader.result, { title: 'hola' });
};
reader.readAsDataURL( file );
};
input.click();
}
However it did not work and instead converted the source into a blob e.g.
<img src="blob:null/c8e90adb-4074-45b8-89f4-3f28c66591bb" alt="" />
If I pass a normal string e.g. test.jpg, it will generate
<img src="test.jpg" alt="" />

The blob: format you see is actually a Base64 encoded binary image. If you were to post the content of TinyMCE to the server you would indeed get the Base64 data.
You can force TinyMCE to immediately send that image to your server to get converted to a "regular" image by following these steps:
https://www.tinymce.com/docs/advanced/handle-async-image-uploads/

Add the below code inside the tinymce\plugins\quickbars\plugin.js at the position as shown in the image
$.ajax({
url: 'saveupload', // Upload Script
enctype : 'multipart/form-data',
type: 'post',
data: {"imageString":base64,"imageType":blob.type,"imageName": blob.name},
success: function(responseText) {
var myJSON = JSON.parse(responseText);
editor.insertContent(editor.dom.createHTML('img', { src: myJSON }));
},
error : function(xhr, ajaxOptions, thrownError) {
}
});
Note: If you ur using minified version convert the same into minified version using any minified tools (e.g: yuicompressor)
I am upload images to the apache
servlet code is below
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, java.io.IOException {
tbaService = new TBAServiceImpl();
File f = new File("path");
response.setContentType("text/html");
PrintWriter out = response.getWriter();
Map<String, String[]> parameterNames = request.getParameterMap();
Gson gson = new Gson();
HttpSession session = request.getSession(true);
long timeinMill = new Date().getTime();
String uniqueFileName = "local_"+timeinMill+"_"+parameterNames.get("imageName")[0].replace(" ", "_");
String fileType = parameterNames.get("imageType")[0].split("/")[1];
try {
BufferedImage image = null;
byte[] imageByte;
BASE64Decoder decoder = new BASE64Decoder();
imageByte = decoder.decodeBuffer(parameterNames.get("imageString")[0]);
ByteArrayInputStream bis = new ByteArrayInputStream(imageByte);
image = ImageIO.read(bis);
bis.close();
// write the image to a file
File outputfile = new File(filePath+uniqueFileName); //filePath = C:/Apache/htdocs/tba/images/
ImageIO.write(image, fileType, outputfile);
out.print(gson.toJson(uploadUrl+uniqueFileName)); //uploadUrl=http://localhost/test/images/
out.flush();
out.close();
} catch (Exception ex) {
ex.printStackTrace();
}
}

Related

Converting <input type=file> contents to Base64 and sending to Spring method expecting MultiPartFile

Because of server issues I need to convert the contents of a file upload to Base64 before it gets submitted to the server.
I've managed the JS side of things using reader.readAsDataURL to get the contents into Base64 in a local JS variable. I've then tried creating a new FormData and setting the base64 variable there - it replaces the name of the but then it also replaces the type - it's no longer a but just binary data - so when I send this to the server - I'm getting Spring error typeMismatch.org.springframework.web.multipart.MultipartFile
Basically - any thoughts how to convert file contents to Base64 (done that ok) but send to existing JAVA method with Spring MultiPartFile?
i.e. without me rewriting and adding extra fields in the FormData for file name and size etc (the stuff I'd get using the MultipartFile on the server end).
JS: (error handling removed)
var input = $(".actualFileInput");
var files = null;
// File data
if (input[0].files.length > 0) {
files = input[0].files;
}
var file = files[0], reader = new FileReader();
reader.onloadend = function () {
var b64 = reader.result.replace(/^data:.+;base64,/, '');
var name = input.attr('name');
input.attr('name', '');
var newFormData = new FormData(form); // New form with all data from the existing one
newFormData.set('uploadFile',b64); // replace with the base64 value of the selected file
var request = new XMLHttpRequest();
request.onreadystatechange = function () {
request.open(form.method, form.action, true);
request.onload = function() {
var url = window.location;
input.attr('name', name);
request.send(newFormData);
};
reader.readAsDataURL(file);
The Java at the server end:
#RequestMapping(method = RequestMethod.POST, params = "upload")
public String upload(#ModelAttribute("uploadDocument") UploadDocument document, BindingResult result,
ModelMap model, HttpServletRequest request, SessionStatus status) throws Exception {
UploadDocument is:
public class UploadDocument implements Serializable {
private static final long serialVersionUID = -3534003705995293025L;
// File upload work area
private MultipartFile uploadFile = null;
private String fileComment = null;
private Integer fileTypeId = null;
... (other fields in the <form>)
All the JAVA stuff works fine if I just submit the form. But in JS reading the file contents as Base64 then sending as a field doesnt get translated to MultiPartFile. Change to byte[] and add new fields for the file metadata myself? Or is there some trick I'm missing.
Thanks folks.
The way to make this JS variable send to a Spring MultiPartFile is:
newFormData.set('uploadFile',new Blob([b64]),files[0].name); // replace with the base64 value of the selected file
i.e. make it a blob, and 3rd arg is the file name the user selected in . This now sends the base64 value of the file contents.

Insert bytes[] in database (Hibernate, JPA, Spring) from input type=file

I've been fighting for days with this problem:insert file into database with Spring Boot, JPA Hibernate and Vue.js frontend.
(Yes I know it's better to store the location to retrieve the file and not the file itself, but I have to store the file, so move on.) I tried different solutions but I didn't manage. First I passed the file path from fontend to backend as a normal field of my json data and used:
String path= json.get("file_name").asText();
File file = new File(path);
byte[] fileInBytes = new byte[(int) file.length()];
FileInputStream fileInputStream = new FileInputStream(file);
fileInputStream.read(fileInBytes);
fileInputStream.close();
c.setFile(fileInBytes);
It worked only if I passed the explicit path, because from my HTML input type=file I always got C:/fakepath/filename and the backend didn't find the file obviously. Is there any way to pass the explicit path? I've searched for a while but I couldn't find a solution, so I changed my mind.
Now I'm passing the base64 encode of the file from the frontend in Vue with this code (thanks to How to convert file to base64 in JavaScript?):
getBase64(file, onLoadCallback) {
return new Promise(function(resolve, reject) {
var reader = new FileReader();
reader.onload = function() { resolve(reader.result); };
reader.onerror = function(error) {
console.log('Error when converting file to base64: ', error);
};
reader.readAsDataURL(file);
});
},
uploadFile: function(event) {
this.input_file = document.getElementById("challenge_file").files[0];
this.base64_file = this.getBase64(this.input_file);
this.base64_file.then(function(result) {
console.log(result);
this.File=JSON.stringify({'file': this.base64_file});
axios.post("/uploadfile",
this.File,
{ headers: {
'Content-type': 'application/json',
}
}).then(function(response){
location.reload(true);
}).catch(function (error){
console.log(error);
});
});
}
this code works and I get a base64 string also in the backend, in which I try to convert it in bytes[] because my file is a #Lob private byte[] file;. This is my code in the backend controller:
System.out.println(json.get("file"));
//print "data:text/plain;base64,aVZCT1J..."
int init= json.get("file").asText().lastIndexOf(",");
String base64file=json.get("file").asText().substring(init+1);
//I get only the part after 'base64,' *(see below)
System.out.println(base64file);
byte[] decodedByte = Base64.getDecoder().decode(base64file);
//I decode it into bytes[]
c.setFile(decodedByte);
*I get only the the part after 'base64,' otherwise if I use all the String I get this error: enter java.lang.IllegalArgumentException: Illegal base64 character 3a
This code has no errors, but the Blob in the database is empty, while in the first way I could open the file preview from Hibernate, but only if I wrote the correct real path, not retrieving it from the input.
Any suggestion? What should I do?
SOLVED:
Thanks to an answer to this question I changed my backend into:
System.out.println(json.get("file"));
String data= json.get("file").asText();
String partSeparator = ",";
if (data.contains(partSeparator)) {
String encodedImg = data.split(partSeparator)[1];
byte[] decodedImg = Base64.getDecoder().decode(encodedImg.getBytes(StandardCharsets.UTF_8));
c.setFile(decodedImg);
}
and now I see the correct file in the db.

turn image binary data into img tag

When i do a post request to a route i have
/generate/image
i get something like: var file =
����JFIF��C��C��� ��
�����+�}Yϭ�F39M>���������>���;��ˋ��uXʽ�w�ڤx\-[2g��k�S���H���m
[�V?[_W����#��v��}6�[��F�F�%����n�...
in the client i do:
var blob = new Blob([file], {type: 'image/png'});
var reader = new FileReader();
reader.onload = function (e) {
$('#result').attr('src', e.target.result);
};
reader.readAsDataURL(blob);
but i get a corrupt image
what can i do?
EDIT:
if i do
img.src = 'data:image/png;base64,' + btoa(file);
i get:
Uncaught InvalidCharacterError: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.
Please don't use base64 and wast bandwidth + CPU
Send the image binary as is and handle them correctly with Ajax.
You should not get the result as a string. set xhr responseType to blob or use fetch's blob method.
fetch("/generate/image").then(res => res.blob())
When you have the blob don't use the file reader to turn it to a url.
Use URL.createObjectURL(blob)
At your backend you can do following:
var fs = require('fs');
fs.readFile(path to image from you file, 'base64', function(err, buf){
/* Here you can send your base64 image data to client. Your base64 data is in buf.
I am using socket. You can just send. Read more about readFile function*/
socket.emit('image upload', { image: true, buffer: buf });
});
As my client receives data from socket, I call a function:
socket.on('image upload', function(data){
displayImage(data);
});
var displayImage = function(data){
var URL = 'data:image/jpg;base64,'+data.buffer;
document.querySelector('#img-id').src = URL;
};
The image will then be showed in img tag.
Hope this works for you.

image downloads as JSON array of ints but i want to render this image by turning into a byte[]

I have a webservice which returns a byte[] to the client, to show images.
This image is stored in a json object, see fiddle: http://jsfiddle.net/FuGN8/
the array of numerics is assigned to result after i do a simple line of:
result = result["d"];
This is fetched via a AJAX call, so i want to render an image from this data.
Naturally, doing something like:
$("img#mytag").attr("src", result);
would not do what i want.
Is there a javascript command which would do what i am intending?
my Server side code I changed to do:
WebClient wsb = new WebClient();
string url = "...";
byte[] resp = wsb.DownloadData(url);
UTF8Encoding enc = new UTF8Encoding();
return enc.GetString(resp);
but on the client side, since i do not know what the image type would be, i was attempting:
src="data:image/*;base64,"+RET_VAL
and it wasnt doing anything. On a similar note, i also tried:
src="data:image;base64,"+RET_VAL
since the above was doing UTF8 encoding, i also added in a the following:
src:"data:image;base64,"+window.btoa(unescape(encodeURIComponent( RET_VAL )))
You are not using Base64 encoding in your image. Use the method Convert.ToBase64String instead. You could also send the image type in the JSON response in order to apply it to the src attribute. I could get it to work with this code:
[WebMethod]
[ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]
public string SendImage()
{
var path = #"C:\teste.png";
byte[] bytes = File.ReadAllBytes(path);
Image image = null;
using (var stream = new MemoryStream(bytes))
image = Image.FromStream(stream);
var json = new Dictionary<string, object>();
json.Add("type", new ImageFormatConverter().ConvertToString(image.RawFormat).ToLower());
json.Add("contents", Convert.ToBase64String(bytes));
return new JavaScriptSerializer().Serialize(json);
}
And this JavaScript code:
$.ajax({
type: 'GET',
url: 'WebService1.asmx/SendImage',
contentType: 'application/json; charset=utf-8',
success: function (response) {
var data = JSON.parse(response.d);
$('<img />').attr('src', 'data:image/' + data.type + ';base64,' + data.contents).appendTo('body');
}
})
Of course you'll have to adapt it as you are using a WebClient to get your image.
The src attribute of your img element expects the image location (its URL), not the actual image bytes.
To put your data as an URL you may use the data URI Scheme. For example, for a .png image:
data:image/png;base64,<your image bytes encoded in base64>

retrieving pictures stored as blob in the database and display it in the html

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/

Categories