Develop Reference

open image in new window blank page appearing javascript

after taking the reference from this answer
Open image in new window
i did the the same code.
function openImage() {
var largeImage = document.getElementById('viewImage');
largeImage.style.display = 'block';
largeImage.style.width = 200 + "px";
largeImage.style.height = 200 + "px";
var url = largeImage.getAttribute('src');
window.open(url, 'Image', 'width=largeImage.stylewidth,height=largeImage.style.height,resizable=1');
}
but when this function executed, blank page is showing
when i view image src in console, it is showing proper data.
my img element is also showing me image properly,
but this is how my page is being shown
what do you think what is wrong in my code?

That solution is for image with actual url as src, in your case image src is a base64 encoded string not url.
Base64 support for Window.open is not same across all browsers, it works on firefox but it won't work on chrome and IE.
So, you can try this instead
function openImage() {
var largeImage = document.getElementById('viewImage');
largeImage.style.display = 'block';
largeImage.style.width = 200 + "px";
largeImage.style.height = 200 + "px";
var w = window.open("");
w.document.write(largeImage.outerHTML);
}

Printing and saving base64 encoded image in IE

I'm having problems with printing and saving base64 encoded png images from drawing app, which you can see here: http://test1.spletodrom.com/uganka/index.html
In the bottom left you have 2 icons/buttons, Save and Print.
Variable simpleBoard.getImg() is base64 encoded image string.
Save action is triggered by this code:
$('#save-img').on('click', function(e) {
startLoad();
var img = simpleBoard.getImg();
img = img.replace("image/png", "image/octet-stream");
var link = document.createElement('a');
link.download = 'slika.png';
link.target = '_blank';
link.href = img;
link.click();
endLoad();
});
Print action is triggered by this code:
$('#print-img').on('click', function(e) {
startLoad();
var img = simpleBoard.getImg();
var popup = window.open();
popup.document.write('<img src=' + img + '>');
popup.focus(); //required for IE
popup.print();
endLoad();
});
Browser behaviour:
IE9 & IE10:
click on Save doesn't do anything, click on Print opens base64 encoded image in new tab, but doesn't open print dialog
IE11:
click on Save or Print opens base64 encoded image in new tab, but doesn't open print/save dialog
Firefox:
click on Save doesn't do anything, click on Print works properly
Chrome:
click on Save and Print works properly
There are no errors in console.
Any help would be appreciated.

I've combined solutions found here and this is the solution:
$('#print-img').on('click', function(e) {
startLoad();
var img = simpleBoard.getImg();
var popup=window.open();
popup.document.write('<img src=' + img + '>');
popup.document.close();
popup.focus();
popup.print();
popup.close();
endLoad();
});

Get image dimensions with JavaScript using innerHTML

I'm working on an AJAX function that receives image URLs. However, I won't be using a node append to insert it. I'm using innerHTML, which makes it difficult to get the file dimensions.
At the moment, I'm using a function which is returning somewhat mixed results. Sometimes it gets the actual dimensions, other times it returns "0" as the image dimensions.
This is my function:
var url = "http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg";
var width = getDimensions(url)[0];
var height = getDimensions(url)[1];
var insert = '<img src="'+url+'" width="'+width+'" height="'+height+'" />';
function getDimensions(path) {
var img = new Image();
img.src = path;
return [img.width, img.height];
}
Not sure why it's acting inconsistently though. Does anyone have any suggestions?
I was thinking it might be something to do with the AJAX inserting the image before it loads the dimensions, although not really sure.
Here's a fiddle, which seems to work as expected, but like I said, it's inconsistent.
http://jsfiddle.net/aH5re/1/
EDIT
Here is a second fiddle with a much larger image. I noticed it's a lot more inconsistent than a smaller image file
http://jsfiddle.net/aH5re/2/

You'll have to wait for the image to finish loading before you can get the dimensions properly and reliably. What's currently happening is that it's returning the dimensions before the image is potentially fully loaded. If you have it already cached you may be getting correct dimensions but on a large image uncached you're not going to get reliable results.
Have a look at this demo about how you could perhaps achieve that.
http://jsfiddle.net/robschmuecker/aH5re/5/
Javascript:
var url = "http://www.hdwallpapers.in/download/transformers_4_age_of_extinction-2560x1440.jpg";
var div = document.querySelector('div');
alert('loading image now');
var button = document.querySelector('.test');
getDimensions(url);
button.addEventListener('click', function () {
div.innerHTML = insert;
});
function getDimensions(path) {
var img = new Image();
img.src = path;
img.onload = function () {
alert('loaded');
var width = img.width;
var height = img.height;
insert = '<img src="' + url + '" width="' + width + '" height="' + height + '" />';
button.disabled = false
};
}

Canvas.toDataURL() returns a file without extension

I'm converting an HTML canvas into a jpg when a save button is clicked. I use the code below:
$('#save').click(function(e){
var canvas = $('#myCanvas')[0];
var image = canvas.toDataURL("image/png").replace("image/png","image/octet-stream");
window.location.href=image; // it will save locally
});
Unfortunately, I download file without any extension. What I want is when I click the download button, The browser must download file from the page with a file extension.
Thanks

#K3N's answer didn't work for me because as mentioned:
Ideally you set the href before the click somehow.
I built on top of it and did this and it works great.
var btnSave = document.getElementById('btnSave');
btnSave.addEventListener('click', function() {
var image = photo.toDataURL("image/png");
var anchor = document.createElement('a');
anchor.setAttribute('download', 'myFilename.png');
anchor.setAttribute('href', image);
anchor.click();
});

Assuming your #save element is an anchor tag (<a ...></a>) you can do this:
$('#save').click(function(e){
var canvas = $('#myCanvas')[0];
var image = canvas.toDataURL("image/png");
$('#save').attr({
'download': 'myFilename.png', /// set filename
'href' : image /// set data-uri
});
});
Ideally you set the href before the click somehow.

You should use:
var canvas = document.getElementById("mycanvas");
var img = canvas.toDataURL("image/png");
for loading,you need to use:
document.write('<img src="'+img+'"/>');

Javascript images not being displayed in Firefox and Chrome

I am new to javascript and trying to display an image in a new window.
The code is -
<script type="text/javascript">
function myfunc(){
var new_window = window.open();
var doc = new_window.document;
var image = document.createElement('img');
image.setAttribute('src','imagepath');
image.setAttribute('alt',"image");
doc.appendChild(image);
}
</script>
This image is not being displayed in FireFox and Chrome while 'alt' text is displayed. While in IE nothing is being displayed. Kindly help.

You can't insert a node into the document, you need to specify the body:
var doc = new_window.document.body;
It works fine for me with that correction.

Hope this helps !!
Js Fiddle
<button>Working !!</button>
$('button').off('click').on('click', function(){
var new_window = window.open();
var doc = new_window.document.body;
var image = document.createElement('img');
doc.appendChild(image);
$(doc).find('img').attr({
src: "http://profile.ak.fbcdn.net/hprofile-ak-ash4/276993_573451729347425_460197233_q.jpg",
title: "Image"
});
});

what i found is that dosent works nor newer versions ...
try this
var img = new Image(1,1); //width, height values are optional parameter acc to your requirments
img.src = 'your image url';
hope this will work
it worked for me in chrome
not tested in firefox
but i think it will work in firefox aswell.