Develop Reference

Text is not visible after it downloads the image file with HTML2Canvas

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.

chart js download to png with canvas.toDataURL() not working in IE and firefox

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');
}

html2canvas combined with watermarkjs

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);
}
});
}

Converting a table to canvas and then downloading the canvas as image using jQuery

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();
}
});
});

Three JS Javascript Save Canvas as JPG with EXIF Colorspace

This function works great in three.js for saving a canvas image as a JPG snapshot. A few issues though. The image doesn't save with any exif data, no colorspace ect so browsers treat the image colors randomly when uploaded, it often looks very desaturated when uploaded to the web. Is there an easy way to add the exif data to the .jpg image when saving it to add the color profile sRGB IEC61966-2.1? Also, for some reason this doesn't work at all in IE? Throws the error uri is undefined, which it is. Can't figure out what uri should be. Thanks for any help!
function saveAsImage() {
var imgData, imgNode;
try {
var strMime = "image/jpeg";
imgData = renderer.domElement.toDataURL(strMime);
saveFile(imgData.replace(strMime, "image.jpg");
} catch (e) {
alert(e);
console.log(e);
return;
}
}
var saveFile = function (strData, filename) {
var link = document.createElement('a');
if (typeof link.download === 'string') {
document.body.appendChild(link); //Firefox requires the link to be in the body
link.download = filename;
link.href = strData;
link.click();
document.body.removeChild(link); //remove the link when done
} else {
location.replace(uri);
}
}