Read first two parts here:
First let's define a function for downloading the image:
/**
* Generate image from the canvas then downloads it.
*/
1 function downloadImage() {
2 const dataSrc = cvns.toDataURL("image/png");
3 let hiddenLink = document.querySelector("#hidden-link");
4 hiddenLink.setAttribute("href", dataSrc);
5 hiddenLink.setAttribute(
6 "download",
7 `collage${new Date().getMilliseconds()}`
8 );
9 hiddenLink.click();
10 }
HTMLCanvasElement.toDataURL() as explained by MDN,
returns returns a data URI containing a representation of the image in the format specified by the type parameter.
On line 2 we add the type as image/png even though that's the default, you can add even as jpg.
On line 4 we add the href to the hidden link and put the dataSrc as the url. We also add the attribute of download and a name which starts with collage.
The hidden link is in the index.html file.
Still that won't work as we need to paint the main canvas but first we need to prevent the default of download button so it won't redirect.
Add to upload.js
downloadButton.addEventListener("click", function (e) {
e.preventDefault();
paintThenDownload(downloadImage);
});
We then define the paintThenDownload button.
Add to upload.js:
/**
* Paints the canvas then call the function to download image.
* @param callback Function
*/
function paintThenDownload(callback) {
let img1 = document.querySelector("#img-1");
let img2 = document.querySelector("#img-2");
let query = window.location.search;
let pickedTemplate = query.split("=")[1];
if (img1 !== null && img2 !== null) {
if (pickedTemplate === "1") {
template_1(img1, img2, "main");
} else if (pickedTemplate === "2") {
template_2(img1, img2, "main");
} else if (pickedTemplate === "3") {
template_3(img1, img2, "main");
} else {
template_1(img1, img2, "main");
}
}
callback();
}
It's the same as the previewCollage function on the last section but this one receives a callback function and the templates third parameter is main and not preview.
The function is called and passed to the downloadImage function when the downloadButton is clicked.
That's it, I hope you found that worth your time.
Top comments (0)