Develop Reference

Download canvas.todataurl via window.location (How to change filename?)

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

How to Download a PDF file in the background

How do I download a file in the background of a mobile browser without leaving the current page.
I've taken a look at this StackOverflow post: easiest way to open a download window without navigating away from the page
which works for displaying the file( in this case a pdf) in the same window using this code:
var file_path = 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf';
var a = document.createElement('A');
a.href = file_path;
a.download = file_path.substr(file_path.lastIndexOf('/') + 1);
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
This works fine if you want to display the PDF immediately in the current window.
However, how can you keep the current view and have the file download/display a dialogue showing a download in progress?
The goal is to not open a new tab or window to keep the user engaged with the current page. I've looked through S/O & on the web but haven't found a solution to this. Thanks for any solutions to this issue.

you can use HTML web worker https://www.w3schools.com/html/html5_webworkers.asp
var w;
function stopWorker() {
w.terminate();
w = undefined;
}
function downloadPDFBackground() {
if (typeof(Worker) !== "undefined") {
if (typeof(w) == "undefined") {
w = new Worker("pdf_workers.js");
}
w.onmessage = function(event) {
var file_path = 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf';
var a = document.createElement('A');
a.href = file_path;
a.download = file_path.substr(file_path.lastIndexOf('/') + 1);
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
stopWorker();
};
} else {
document.getElementById("result").innerHTML = "Sorry! No Web Worker support.";
}
}

HTML2Canvas works on desktop but not on mobile. How to fix?

The point of the website is to download an image of a signed consent form. Everything works how I would like on desktop, but it does not work on mobile unfortunately. I tried chrome, brave, firefox, and safari. I either get the image showing but not downloading, or some weird page distortion. How can I adjust the code to fix it?
this is the source code:
https://github.com/jacelecomte/wwvhSigns
The methods that deal with the saving of the image are here:
function finalizeScreenshot() {
html2canvas(document.body).then(function (canvas) {
document.body.appendChild(canvas);
saveScreenshot(canvas);
});
}
function injectScript(uri) {
const document = window.document;
const script = document.createElement("script");
script.setAttribute("src", uri);
//document.body.appendChild(script);
}
function injectHtml2canvas() {
injectScript("//html2canvas.hertzen.com/dist/html2canvas.js");
}
injectScript('./src/html2canvas.js');
injectHtml2canvas();
finalizeScreenshot();
function saveScreenshot(canvas) {
const fileName = "Consent Form";
const link = document.createElement("a");
link.download = fileName + ".png";
//console.log(canvas);
canvas.toBlob(function (blob) {
console.log(blob);
link.href = URL.createObjectURL(blob);
link.click();
});
}
//these 3 functions are run in a row to create and download the screenshot.
injectScript('./src/html2canvas.js');
injectHtml2canvas();
finalizeScreenshot();

Change the viewport just before calling html2canvas, then change it back afterwards. This answer was derived from html2canvas issue fix on github
This should fix it:
1: give your <meta name="viewport"../> an id, like this:
<meta name="viewport" content="width=device-width, initial-scale=1.0" id="viewportMeta" />
revised function
function finalizeScreenshot() {
var vp = document.getElementById("viewportMeta").getAttribute("content");
document.getElementById("viewportMeta").setAttribute("content", "width=800");
html2canvas(document.body).then(function (canvas) {
document.body.appendChild(canvas);
saveScreenshot(canvas);
}).then(function () {
document.getElementById("viewportMeta").setAttribute("content", vp);
}); }

You should also be able to set your own windowWidth setting which should trigger the relevant media queries:
html2canvas( document.body, {
windowWidth: '1280px'
} ).then( function( canvas ) {
document.body.appendChild( canvas );
} );
See the available html2canvas options.

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

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