We Keep Coding

Javascript: Temporarily store and display image received from backend as binary data?

I am currently trying to display an image, which I receive from a backend server in a particular way/format, on the screen of the browser.
My problem is acutally closely related to this issue, for which no real answer exists.
Here is a screenshot displaying what the backend server's response looks like:
payload.data contains the data of the image, which is a green cloud (also attached at the end of this post for reference).
My first, probably very stupid, question would be: What kind of format/encoding is that?
Anyway, here is what I then further tried to process the data:
const blob = new Blob([action.payload.data], { //contains the data
type: action.payload.headers["content-type"] // 'image/png'
})
console.log("blob: ", blob);
const url = URL.createObjectURL(blob);
console.log("url : ", url)
As a result, the blob is sucessfully created, as well as the url. However, when I open that link, no image gets displayed.
I am stuck here and would appreaciate any kind of helpful hint pointing out where I am doing a mistake here.
Thanks very much for your support in advance.
PS: As promised, here is the actual png image:

It seems like your data attribute is still in binary format. You need to convert the hex into base64 in order to display the image.
First, if the server you're fetching the image form is yours, I would recommend encoding the image on the server before sending it to the client.
If the server is not yours and you can't change the data that is being returned, try something like this:
function hexToBase64(str) {
return btoa(String.fromCharCode.apply(null, str.replace(/\r|\n/g, "").replace(/([\da-fA-F]{2}) ?/g, "0x$1 ").replace(/ +$/, "").split(" ")));
}
And then use it like this:
const img = document.createElement('img');
img.src = 'data:image/jpeg;base64,' + hexToBase64('your-binary-data');
document.body.appendChild(img);
reference: How to display binary data as image - extjs 4

Is there any way to make the edited image downloadable in javascript

Hi I am making a web app that takes a normal image and helps you to edit it.
> > This is the function for applying the filters on the user image.
function applyFilter() {
var computedFilters = "";
controls.forEach(function (item) {
computedFilters +=
item.getAttribute("data-filter") +
"(" +
item.value +
item.getAttribute("data-scale") +
") ";
});
image.style.filter = computedFilters;
downloadableImage.style.filter = computedFilters;
}
> > > Here I am adding the eventListener for showing the live editing image to the user.
userFile.addEventListener("change", function () {
const reader = new FileReader();
reader.addEventListener("load", () => {
localStorage.setItem("userImage", reader.result);
image.setAttribute("src", localStorage.getItem("userImage"));
downloadableImage.setAttribute("src", reader.result);
downloadLink.setAttribute("href", localStorage.getItem("userImage"));
});
reader.readAsDataURL(this.files[0]);
});
I want to make the image that is downloadable to be edited according to the user.

Just to download the image, you just need to add a download attribute to the download link.
In your case, do downloadLink.setAttribute("download", "download")
EDIT:
Well, I'm not exactly sure about how to do that in your case, but this link may help.
It explains blobs and object URLS, and what you would is:
create a blob and object URL for the image
give the download attribute to the downloadLink
specify the href attribute as the blob URL
and it works!
IMPORTANT
You should also read this mdn doc for more information about ObjectURLS.
Remember that you have to delete (revoke) each URL once an edit has been made and create a new ObjectURL:
Blobs are objects that are used to represent raw immutable data. Blob objects store information about the type and size of data they contain, making them very useful for storing and working file contents on the browser.
They are not changed(the raw, immutable data) and therefore should be deleted when you no longer need them:
Browsers will release object URLs automatically when the document is unloaded; however, for optimal performance and memory usage, if there are safe times when you can explicitly unload them, you should do so
See here and here for more info

Javascript to classify files as images

I have a url in javascript, set as a variable. Like:
var imageurl='example.com/test/real/image.jpg';
I am trying to recognize if this is an image url or not (ending with jpeg, jpg, gif, png etc.).
I tried using charAt but it did not work.
What's the best way to return a 1 if it is an image url and 0 otherwise using javascript?

I am trying to recognize if this is an image url or not (ending with jpeg, jpg, gif, png etc.).
The file extension (if there even is one) has no bearing on whether a URL points to a resource that is an image type. That is only a convention used by some people for static resources.
Looking at the file extension can be enough if you only need it as a general heuristic:
// User browser's built-in URL parsing to discard query string etc
//
var a= document.createElement('a');
a.href= url;
var ext= a.pathname.split('.').pop().toLowerCase();
var mightbeimage= ext=='gif' || ext=='jpeg' || ext=='jpg' || ext=='png';
but for accuracy the only way to find out if a URL points to an image is to fetch that URL and see what comes back. Typically you'd do that by issuing a HEAD request to the URL and seeing if the headers in the response contain Content-Type: image/something.
You can't do that directly from browser JavaScript, but what you can do is create an image element and see if loads OK:
function checkImage(url, callback) {
var img= new Image();
img.onload= function() { callback(true); }
img.onerror= function() { callback(false); }
img.src= url;
}
checkImage('http://www.google.co.uk/images/srpr/logo3w.png', function(isimage) {
if (isimage)
alert('Yes, it is an image');
else
alert('Nope, not an image, or does not exist or other error');
});

here you go:
var imageurl = 'example.com/test/real/image.jpg';
ext = imageurl.split('.').reverse()[0];
if (['jpg','gif','png'].indexOf(ext.toLowerCase()) > -1) {
console.log('true!');
} else {
console.log('false!');
}

If you're just after a way of figuring out things from the string, try using the following:
var imageurl = "some.gif";
imageurl.match("(?:png|jpe?g|gif)$");
// returns ['gif']
It's not a particularly complete or elegant solution, but it works.

Use lastIndexOf and substring to get the file extension and compare that to the different image types you are interested in.

try:
var fileName = "'example.com/test/real/image.jpg'";
alert(fileName.substring(fileName.lastIndexOf('.') + 1));
you get your file extension.As per condition manipulate it.

Upload callback in CKEditor

I'm trying to configure CKEditor to allow the user to upload an image from her computer. I'm using filebrowserUploadUrl, so I can upload the image to the server and get back the URL assigned to it, but I can't figure out how to pass the URL to the actual editor...
Some examples on the net talk about returning from the server something like <script>parent.CKEDITOR.tools.callFunction ..., but I think it's quite ugly, isn't there a way to tell CKEditor "after the image is uploaded, call this function'?

The server shouldn't return javascript for the client to render.
Even though the following is an ugly ugly... ugly hack.. I still prefer it over sending javascript from the server:
(Example of automatically inserting the image in the editor once the image is uploaded - works with 4.4.7)
var onUploadImage = function (dialog) {
// Get the contents in the iframe
var iframe = $('.cke_dialog_ui_input_file iframe');
iframe.one('load', function(ev) {
var fileUrl = ev.target.contentDocument.body.innerText;
dialog.getContentElement('info', 'txtUrl').setValue(fileUrl);
$(".cke_dialog_ui_button_ok span").click();
});
};
var onLoadImageDialog = function () {
var dialog = CKEDITOR.dialog.getCurrent();
// Open default tab
this.selectPage('Upload');
$('.cke_dialog_ui_fileButton').click(onUploadImage.bind(null, dialog));
};
var onDialogDefinition = function( ev ) {
var name = ev.data.name;
var definition = ev.data.definition;
if ( name !== 'image' ) {
return;
}
definition.onLoad = onLoadImageDialog
};
CKEDITOR.on('dialogDefinition', onDialogDefinition);
Of course, the right way would be to create a custom plugin.

Read again the syntax: you get the CKEDITOR object and tell it to call back a function, so it does exactly what you want.

Validate an image path in javascript

I have an image like: img src="" class='listPartialLoader' alt='loading'
I am assigning the 'src' value with data from an ajax call. Some times if the image is not found I want to add a default image path like"Images/default.jpg". But how can I check whether the image is exist or not using javascript? (Basically I want if the image is not found add a default image)

You should be able to check if the image exists with the onerror and onload events.
var myImg = new Image;
myImg.src = 'path/to/image';
myImg.onerror = function(){
console.log("Error!");
}
myImg.onload = function(){
console.log('Loaded!');
}

While you are retrieving the value for src property during the ajax call to the server, why not check if the file exists?
string src = GetSrc(); //whatever you need to do
if(System.IO.File.Exists(HttpContext.Current.Server.MapPath(src)))
{
return src;
}
else
{
return "path/default.jpg");
}

if the image is in the same domain of your script just take the image path (before assign it to image element) and make a simple HEAD ajax request to that path (eg. "images/default.jpg) . If server status is 304 or 200, the image exists