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);
}
Related
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();
});
I am using PhantomJS 2.0 to get screenshot of some webpage. So in this page I have the tag <video> of the HTML5. However, I have been reading that PhantomJS does not suport it. So my idea is to replace this tag to a <img>. Then, for it I will need to get the size of the video content, create a image element with this size and remove the video.
Remember it needs to be inside the PhantomJS.
I tried it, but not works!
var page = require('webpage').create();
page.open('http://webuser.nl', function(status) {
if (status !== 'success') {
phantom.exit();
} else {
page.viewportSize = { width: 1900, height: 1080 }; //these sizes can be others
page.evaluate(function(){
var video = document.getElementsByTagName("video")[0];
var w = video.clientWidth;
var h = video.clientHeight;
console.log("size->" + w + "x" + h);
var img = document.createElement("img");
img.src = 'background.png';
img.width = w;
img.height = h;
var source = video.getElementsByTagName("source")[0];
video.removeChild(source);
video.appendChild(img);
});
page.render(relative_path);
phantom.exit();
}
});
In this code, using the console in the browser (Chrome 46.0.24) is works, I resize the windows and the w and h change, but inside the PhantomJS, independent of the viewport, always is the same size, and I couldn't replace the video to the image.
Does someone have any idea how I could do it or have another idea?
Thanks!
I'm working on a multi part html questionnaire style form that has a lot of text questions along with a few images. On questions that are images the user is selects the image, i create a canvas element and display the resized image in it underneath the file input.
if (window.FileReader)
{
var file = element.files[0];
var $input = $(element);
var $fileName = file.name;
var reader = new FileReader();
reader.onload = function(e) {
var img = document.createElement("img");
img.src = e.target.result;
var dataID = $input.data("questionId");
var canvasID = "canvas_" + dataID;
$("#"+canvasID).remove();
var canvas = document.createElement("canvas");
canvas.setAttribute("id", canvasID);
canvas.setAttribute("height", "200");
canvas.setAttribute("width", "200");
var heightWidth = getHeightWidth(img);
canvas.height = heightWidth[0];
canvas.width = heightWidth[1];
var ctx = canvas.getContext("2d");
ctx.drawImage(img,0,0, canvas.width, canvas.height);
var sectionID = "section_" + dataID;
$("#" + sectionID).append(canvas);
$("#file_title-" + dataID).val($fileName);
}
reader.readAsDataURL(file);
}
else
{
alert("This browser does not support image uploading.");
}
This works fine in chrome but not in safari (safari 8.x) on desktop or iOS. The problem in my code is that on Safari it returns height=0 width=0 from getHeightWidth() which gives me think the img isn't ready to be handled yet. This theory is further validated because if i change to a new picture and change back to the original it displays properly.
I'm really not sure where to start, any help debugging this would be greatly appreciated. Thanks everyone
The code assumes the image loading is synchronous, but it's asynchronous and should be assumed so even with data-URIs. If the image hasn't loaded properly its width and height attributes will be 0.
You can solve this by adding an onload handler for img, then move the code for detecting and setting size inside that handler (remember also to add an onerror handler as well in case the image file is corrupted).
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
};
}
Hi I want to save a canvas locally in IE with execCommand("SaveAs"). Here is my code.
var img = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
window.win = open (img);
setTimeout('win.document.execCommand("SaveAs")', 1000);
However when new window opened the page cannot be displayed. data:image/octet-stream;base64...
How can I solve this problem?
Thank you very much...
You are calling window.open wrong. MDN
You want
var win = window.open(),
img = canvas.toDataURL("image/png")
win.document.body.innerHTML= "<img src='" + img + "'></img>" // With correct delimiters
win.document.close()
setTimeout('win.document.execCommand("SaveAs")', 1000);