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();
});
Related
I managed to download a SVG file created using the following code
$('#download-SVG').click(function() {
var dl = document.createElement("a");
document.body.appendChild(dl); // This line makes it work in Firefox.
console.log(svg.node());
dl.setAttribute("href", svgDataURL(svg.node()));
dl.setAttribute("download", "test.svg");
dl.click();
});
function svgDataURL(svg) {
var svgAsXML = (new XMLSerializer).serializeToString(svg);
var dataURL = "data:image/svg+xml," + encodeURIComponent(svgAsXML);
return dataURL;
}
The file downloads, but does not open. I suspect that the content of the dataURL has an issue
Below is a sample of the content of the dataURL content
data:image/svg+xml,%3Cg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20transform%3D%22translate(700%2C25)scale(.7%2C.7)%22%3E%3Cpath%20class%3D%22link%22%20d%3D%22M352.5%2C555C352.5%2C645%2022.5%2C645%2022.5%2C735%22%2F%3E%3Cpath%20class%3D%22link%22%20d%3D%22M352.5%2C555C352.5%2C645%20132.5%2C645%20132.5%2C735%22%2F%3E%3Cpath%20class%3D%22link%22%20d%3D%22M352.5%2C555C352.5%2C645%20242.5%2C645%20242.5%2C735%22%2F%3E%3Cpath%20class%3D%22link%22%20d%3D%22M352.5%2C555C352.5%2C645%20352.5%2C645%20352.5%2C735%22%2F%3E%3Cpath%20class%3D%22link%22%20d%3D%22M352.5%2C555C352.5%2C645%20462.5%2C645%20462.5%2C735%22%2F%3E%3
Appreciate any insight into the issue.
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);
}
I am using canvas.toDataURL() to download chart.js chart ,it is perfectly working with chrome but not working with IE and Firefox.here is my code
var link = document.createElement('a');
var canvas = document.getElementById('canvasId');
link.href = canvas.toDataURL("image/png");
link.download = 'IMAGE.png';
link.click();
Thank you.
var canvas = document.getElementById('canvasId');
if(canvas.msToBlob){
var blob = canvas.msToBlob();
window.navigator.msSaveBlob(blob, 'image.png');
}
else{
var link = document.createElement('a');
link.href = canvas.toDataURL("image/png");
link.download = 'IMAGE.png';
document.body.append(link);
link.click();
}
The anchor tag you are creating also needs to be added to the DOM in Firefox and IE, in order to be recognized for click events.
In Firefox, you need to do the link.click (though you may not want to do that in Chrome as it results in a double download). However, IE (except for the latest versions of Edge) doesn't support the "download" attribute on the a tag, and you need to save the canvas slightly differently.
var canvas = document.getElementById('canvasId');
var isIE = !!navigator.userAgent.match(/Trident/g) || !!navigator.userAgent.match(/MSIE/g);
if (!isIE) {
let image = canvas.toDataURL("image/jpeg", 1.0);
// we are getting the a tag to add the 'download' attribute and the file contents
let downloadLink = document.getElementById("download");
downloadLink.setAttribute("download", downloadFileName);
downloadLink.setAttribute("href", image);
// For some reason, we need to click the button again in firefox for the download to happen
if (navigator.userAgent.match(/Firefox/g)) {
downloadLink.click();
}
}
if (isIE) {
var blob = canvas.msToBlob();
window.navigator.msSaveBlob(blob, downloadFileName);
}
In the Chart.js API documentation there is a built in function called .toBase64Image() which you may wish to use instead, as you've outlined your file extension as being .png.
As Becky stated above, in Firefox, link.click() needs to be used in order for the file to download. However, the element we created (link) needs to be appended to the body of your HTML document in order for link.click() to function as required. It is important that once this statement has been executed, to remove the link element from your HTML document, so your HTML body doesn't accumulate these elements every time you try to download a chart. IE requires the canvas to be saved differently through the blob functions.
let canvas = document.getElementById('canvasId');
let chart_name = = new Chart(canvas, config);
var isIE = !!navigator.userAgent.match(/Trident/g) || !!navigator.userAgent.match(/MSIE/g);
if (!isIE) {
// Create a hyperlink element.
let link = document.createElement('a');
// Set image URL and filename.
link.href = chart_name.toBase64Image();
link.download = 'IMAGE.png';
// If browser is Firefox, the element we created above must be appended to the
// body of the HTML document & therefore removed after.
if (navigator.userAgent.match(/Firefox/g)) {
document.body.append(link);
link.click();
document.body.removeChild(link);
}
}
if (isIE) {
var blob = canvas.msToBlob();
window.navigator.msSaveBlob(blob, 'IMAGE.png');
}
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+'"/>');
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);