here is the copy of my downloaded file
I am trying to download the image using html5canvas, but the issue is it is downloading the file without text.
Here is the snippet of code I am implementing
<script>
function downloadImage(element = document.body, filename = 'file.png')
{html2canvas(element, {
useCORS: true,
}).then((canvas) => {
const a = document.createElement('a');
a.download = filename;
a.href = canvas.toDataURL('image/png');
a.click();
});
}
</script>
you have mentioned you are using html5canvas but you have applied html2canvas.
Do check it once.
Related
I create a jpeg file over canvas. The image is downloaded and has the name "Download" without file extension. How can I modify the file name for the download via the script?
html2canvas(document.getElementById("rankingTable")).then(function (canvas) {
var image = canvas.toDataURL("image/png", 1)
.replace("image/png", "image/octet-stream");
window.location.href=image;
});
Specify the filename in the download attribute:
function downloadData(linkData, filename) {
let link = document.createElement('a');
link.href = linkData;
link.download = filename;
let target = document.body;
target.appendChild(link); // Firefox requires the link to be in the body
link.click(); // simulate click
target.removeChild(link); // remove the link when done
}
Doc: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download
I am not sure you need to replace the "image/png" with "image/octet-stream", so try this code:
html2canvas(document.getElementById("rankingTable")).then(function (canvas) {
var image = canvas.toDataURL("image/png", 1);
downloadData(image, "ranking-table.png");
});
I'm trying to save the elements i'm creating with svg.js as a .svg file automatically after they are created. The library has the svg() method to export SVG but I haven't found examples to learn how to use it. For example, if I want to save the rect I create in the code below, how could I do it?
html:
<!DOCTYPE html>
<html>
<head>
<title>SVG.js</title>
<script src="https://cdn.jsdelivr.net/npm/#svgdotjs/svg.js#3.0/dist/svg.min.js"></script>
</head>
<body>
</body>
</html>
js:
var draw = SVG().addTo('body').size(300, 300);
var rect = draw.rect(100, 100).attr({ fill: '#f06' });
On http://svgjs.dev there is a searchbar where you can just search for export and you will find what you are looking for:
Exporting the full generated SVG, or a part of it, can be done with the svg() method:
draw.svg()
Exporting works on individual elements as well:
var rect = draw.rect()
var svg = rect.svg()
Now you have generated a string containing your svg. To download this string as a file (creating a file), a quick google search gives you a nice solution:
function downloadString(text, fileType, fileName) {
var blob = new Blob([text], { type: fileType });
var a = document.createElement('a');
a.download = fileName;
a.href = URL.createObjectURL(blob);
a.dataset.downloadurl = [fileType, a.download, a.href].join(':');
a.style.display = "none";
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
setTimeout(function() { URL.revokeObjectURL(a.href); }, 1500);
}
// downloadString("a,b,c\n1,2,3", "text/csv", "myCSV.csv")
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');
}
currently I am making a download button on my page via html2canvas, which I successfully got working. But now I want to add a watermark to it before I download it. After a quick google search the watermarkjs library popup, which adds a watermark to image, but I want to add it to a dataURL or canvas before I transform it. Is there a way to do it?
My not functional code:
var watermarkImage = "https://pravdaovode.cz/wp-content/uploads/2018/07/vodoznak.png";
function getScreen() {
html2canvas(div_box).then(function(canvas) {
if ('msToBlob' in canvas) {
var blob = canvas.msToBlob();
navigator.msSaveBlob(blob, 'pravda_o_vode_cenova_mapa.jpg');
}
else {
var a = document.createElement('a');
a.setAttribute('href', watermark([canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream"), watermarkImage]));
a.setAttribute('target', '_blank');
a.setAttribute('download', 'pravda_o_vode_cenova_mapa.jpg');
a.style.display = 'none';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
});
}
I'm using HTML2Canvas to convert a table to canvas and then I try to download the image using a download button. My code is as below:
$("input[alt='save-image']").click(function() {
html2canvas($("table"), {
onrendered: function(canvas) {
this.href = canvas.toDataURL();
this.download = "mypainting.png";
}
});
});
The table converts to image; however, the image never downloads. Please let me know if I'm doing anything wrong or if you would like to know more information.
You can download image like this -
html2canvas($('table').get(0)).then( function (canvas) {
// document.body.appendChild(canvas);//
var a = document.createElement('a');
// toDataURL defaults to png, so we need to request a jpeg, then convert for file download.
//a.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");
a.href = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
a.download = 'mypainting.png';
a.click();
});
I made it to work, thanks to T.Shah, and here is my final code:
$("input[alt='save-image']").click(function() {
html2canvas($("table").get(0), {
onrendered: function (canvas) {
var a = document.createElement('a');
a.href = canvas.toDataURL("image/png");
a.download = 'Pixel-Drawing.png';
a.click();
}
});
});