0

I wrote a code where it displays only images from different website. I want to download them when i click their child download button. Problem is that it opens image it's self in separate page. Is there any awy to not make it open different page and download the parent image. Here's how I'm trying to download it:

<div class="container">
            <div class="row">
                <div class="col-sm">
                    <div id="image_container"></div>
                </div>
            </div>
        </div>
    </div>
    <script>    
        for (let i = 0; i < 23; i++) {
            Draw_Canvas(i);
            document.querySelector("#image" + i).onclick = () => {
                console.log(document.getElementById("image" + i).src);
                localStorage.setItem("Image", document.getElementById("image" + i).src);
            }
        }

        function Draw_Canvas(i) {
            var div = document.createElement('div');
            div.id = "image" + i;
            div.style.borderRadius = "1%";
            div.style.width = "200px";
            div.style.height = "200px";
            div.style.border = "1px solid";
            div.style.padding = "0";
            div.style.margin = "0";
            var divParent = document.getElementById("image_container").appendChild(div);
            var img = new Image();
            img.src = "https://iynmemes.netlify.app/images_memes/meme" + i + ".jpg";
            img.id = "image" + i;
            img.loading = "lazy";
            img.style.width = "100%";
            img.style.height = "100%";
            img.style.objectFit = "contain";
            img.className = "img-fluid";
            divParent.appendChild(img);

            //Download Button Style
            var downloadButton = document.createElement("button");
            divParent.appendChild(downloadButton);
            downloadButton.textContent = "";
            downloadButton.style.borderRadius = "100%";
            downloadButton.style.backgroundColor = "orange";
            downloadButton.style.width = "50px";
            downloadButton.style.height = "50px";
            downloadButton.style.fontSize = "18px";
            downloadButton.style.position = "relative";
            downloadButton.style.float = "right";
            downloadButton.style.bottom = "55px";
            downloadButton.style.display = "none";
            div.addEventListener("mouseover", function () {
                downloadButton.style.display = "block";
            });
            div.addEventListener("mouseout", function () {
                downloadButton.style.display = "none";
            });
            downloadButton.addEventListener("click", function () {
                var a = document.createElement('a');
                a.href = img.src;
                a.download = "Meme (IYN)";
                a.click();
            });
        }
    </script>
  • This is probably what you are looking for https://stackoverflow.com/a/15832662/14454600. – Jarne Jun 01 '22 at 12:18
  • None of them worked... So no. No need to close my question –  Jun 01 '22 at 12:22
  • If you have then in a canvas you could draw them into it, create a blob (`const blob = canvas.toBlob()`) and then turn the blob into a temporary URL `const url = URL.createObjectURL( blob )` and use that to download the image, that should prevent the page from opening, as the URL is local. – somethinghere Jun 01 '22 at 12:28
  • @somethinghere Won't there be a cross-origin problems (tainted canvas)? `download` attribute also doesn't work because the link is cross-origin. – gre_gor Jun 01 '22 at 12:36
  • Indeed there will, I assumed you had no cross-origin issues since you already have some canvas stuff in your code. Not sure if there is a solution here without invoking a server in that case. – somethinghere Jun 01 '22 at 14:03

0 Answers0