I'd like to create an input button "Save image" that :
take a screen shot of a div
ask to "Save as" on the user's computer
I've found how to create a screen of a dive using html2canvas and to open it in a new tab, it works perfectly :
function printDiv2(div)
{
html2canvas((div), {
onrendered: function(canvas) {
var img = canvas.toDataURL();
window.open(img);
}
});
}
But for thee Save as part, is a kind of the tough part... I've found interesting topics, as I'm new in JS (and object) coding, I'm a little bit confused... I think I'll have to use the FileSaver.js and to create a new blob
http://eligrey.com/blog/post/saving-generated-files-on-the-client-side/
But I don't get how to implement the saveAs in my html2canvas, how to cast properly a new blob...
function printDiv2(div)
{
html2canvas((div), {
onrendered: function(canvas) {
var img = canvas.toDataURL();
window.open(img);
var blob = new Blob(img, {type: "image/jpeg"});
var filesaver = saveAs(blob, "my image.png");
}
});
}
Also I tried to do something with this, by extracting the base64 generated URL, but it's too complicated for me to understand everyting :
http://bl.ocks.org/nolanlawson/0eac306e4dac2114c752
But someone give me a few tips and help me please ?
You could do this approach:
//Creating dynamic link that automatically click
function downloadURI(uri, name) {
var link = document.createElement("a");
link.download = name;
link.href = uri;
link.click();
//after creating link you should delete dynamic link
//clearDynamicLink(link);
}
//Your modified code.
function printToFile(div) {
html2canvas(div, {
onrendered: function (canvas) {
var myImage = canvas.toDataURL("image/png");
//create your own dialog with warning before saving file
//beforeDownloadReadMessage();
//Then download file
downloadURI("data:" + myImage, "yourImage.png");
}
});
}
Here is the final code, if it can helps you :
function PrintDiv(div)
{
html2canvas((div), {
onrendered: function(canvas) {
var myImage = canvas.toDataURL();
downloadURI(myImage, "MaSimulation.png");
}
});
}
function downloadURI(uri, name) {
var link = document.createElement("a");
link.download = name;
link.href = uri;
document.body.appendChild(link);
link.click();
//after creating link you should delete dynamic link
//clearDynamicLink(link);
}
Have you looked at
http://eligrey.com/demos/FileSaver.js/
Looks like it does what you need
This works fine for me.
function downloadURI(uri, name) {
var link = document.createElement("a");
link.download = name;
link.href = uri;
document.body.appendChild(link);
link.click();
clearDynamicLink(link);
}
function DownloadAsImage() {
var element = $("#table-card")[0];
html2canvas(element).then(function (canvas) {
var myImage = canvas.toDataURL();
downloadURI(myImage, "cartao-virtual.png");
});
}
Nowadays html2canvas has changed to javascript promise. So the updated code should be:
function PrintDiv(div)
{
html2canvas(div).then(canvas => {
var myImage = canvas.toDataURL();
downloadURI(myImage, "MaSimulation.png");
});
}
function downloadURI(uri, name) {
var link = document.createElement("a");
link.download = name;
link.href = uri;
document.body.appendChild(link);
link.click();
//after creating link you should delete dynamic link
//clearDynamicLink(link);
}
Related
I am converting part of the html elements into canvas and converting that into png image. It is working fine but the problem is at the first click it is not converting the html to convas and canvas to png.
//HTML To Image on button click
$("#btn-Convert-Html2Image").on('click', function () {
html2canvas(element, {
onrendered: function (canvas) {
getCanvas = canvas;
}
});
setTimeout(function() {
var imgageData = getCanvas.toDataURL("image/png");
var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
$("#btn-Convert-Html2Image").attr("download", "your_pic_name.png").attr("href", newData);
},400)
});
Is that anything done wrong. Please see the fiddle link
At first click you are binding png dataURL to #btn-Convert-Html2Image anchor and when 2nd time you click on this link already bound data is downloaded you can use this approach to overcome this issue.
function downloadURI(uri, name) {
var link = document.createElement("a");
link.download = name;
link.href = uri;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
delete link;
}
$("#btn-Convert-Html2Image").on('click', function () {
html2canvas(element, {
onrendered: function (canvas) {
var imgageData = canvas.toDataURL("image/png");
var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
downloadURI(newData,"your_pic_name.png");
}
});
});
JSFiddle link
Good news: You make everthing right!
The last line of code says : Set the atribute of the download button to your image. Thast good but to late. You have already clicked the button. So wehn you click the button again the image from the last run will be downloaded and a new one will be generated and linked to the button.
You simply have to force the download AFTER you have generated the image. For example by forcing a URI download ...
I have a problem downloading my drawing from a canvas. This is my code:
function downloadCanvas(link, canvasId, filename) {
link.href = document.getElementById(canvasId).toDataURL();
const le = link.href;
console.log(le);
le.download = filename;
};
download.addEventListener('mousedown', function() {
downloadCanvas(this, 'draw', 'Drawing.jpeg');
}, false);
The console show the value of le, which is the link to download, but the file isn't downloaded... What is wrong here? I'm a beginner.
The issue you have is you're attempting to download a link location, whereas you simply need to be downloading the link file.
To fix this, you should change the const le = link.href; to const le = link;. However, you might as well just get rid of the const le and change le.download to link.download.
Hope that helps!
Edit:
Here's a cleaned up version of the code:
function downloadCanvas(link, canvasId, filename) {
link.href = document.getElementById(canvasId).toDataURL();
link.download = filename;
};
download.addEventListener('mousedown', function() {
downloadCanvas(this, 'draw', 'Drawing.jpeg');
}, false);
I have this function that creates an image:
<script>
domtoimage.toJpeg(document.getElementById('print_screen'), { quality: 0.70 })
.then(function (dataUrl) {
var link = document.createElement('a');
link.download = 'invoice.jpeg';
link.href = dataUrl;
link.click();
});
</script>
The problem is that it launches immediately when loading the page. I want to do a button like:
<a class="btn" href="" onclick="printFunction()">Click here to print</a>
I tried wrapping the domtoimage inside function printFunction but that didn't work. What am I doing wrong? :(
If you are using jQuery, then you can wrap your function in the document.ready function, like this, if not your domtoimage.toJpeg function will be executed when browser parse that tag.
<script>
$(document).ready(function(){
var btnHandler = function(){
domtoimage.toJpeg(document.getElementById('print_screen'), { quality: 0.70 })
.then(function (dataUrl) {
var link = document.createElement('a');
link.download = 'invoice.jpeg';
link.href = dataUrl;
link.click();
};
var $btn = $("a.btn").click(btnHandler);
});
</script>
$('#buttonid').click (function (){
Your code here
});
You are triggering click event in promise callback.
A work around is to comment link.click() in promise callback and trigger the click event inside another function
To do so
comment link.click()
<script>
var link=null;
domtoimage.toJpeg(document.getElementById('print_screen'), { quality: 0.70 })
.then(function (dataUrl) {
link = document.createElement('a');
link.download = 'invoice.jpeg';
link.href = dataUrl;
// Comment the below line
// link.click();
});
</script>
Trigger the click event in custom function like below:
<a class="btn" href="" onclick="printFunction()">Click here to print</a>
<script>
function printFunction(){
// trigger the click event in printFunction
link.click();
}
</script>
in the function write this:
var srciptElement = document.createElement('script');
scriptElement.attr("src",the url of the jquery");
document.getElementsByTagName("BODY")[0].appendChild(scriptElement);
I've this code to generate a download from javascript but I can't/don't know how to make it work on mobile devices.
$('#export').on("click", function (e) {
var Datos = {
"imagen": "asdfASDF123",
"puntos": [{"a":"1"}, {"b":"2"}, {"c":"3"}]
};
stringy = JSON.stringify(Datos);
var blob = new Blob([stringy], {
type: "text/json"
});
var uri = URL.createObjectURL(blob);
var link = document.createElement("a");
link.download = 'datos.json';
link.href = uri;
document.body.appendChild(link);
fireEvent(link, "click");
document.body.removeChild(link);
delete link;
});
Is there something bad in this code? or is there another method to generate a download from javascript that works on mobile devices?
i'm using html2canvas , and i try to download the div as picture
it's work fine on google chrome but in fire fox it's not
this is my code
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.js"></script>
<script type="text/javascript">
$('#save_image_locally').click(function(){
html2canvas([document.getElementById('#mydiv')],
{
onrendered: function (canvas) {
var a = document.createElement('a');
a.href = canvas.toDataURL('image/png');
a.download = 'somefilename.jpg';
a.click();
}
});
});
</script>
This is a working example: https://jsfiddle.net/obkm27v5/4/
$(document).ready(function() {
$('#save_image_locally').click(function(){
html2canvas([document.getElementById('mydiv')],
{
onrendered: function (canvas) {
var a = $("<a>").attr("href", canvas.toDataURL('image/png'))
.attr("download", "output.png")
.appendTo("body");
a[0].click();
a.remove();
}
});
});
You have to add the anchor tag to the DOM before clicking. There was also a wrong id in your canvas selector