1

Here is my code i just want to download this image in specific folder or path on client side but it will downloaded in c/user/downloads I just want to download in F:/data/image how can I do this.

    var svg = document.querySelector("svg");
    var svgData = new XMLSerializer().serializeToString(svg);
   
    var canvas = document.createElement("canvas");
    

    var ctx = canvas.getContext("2d");

    var img = document.createElement("img");
    img.setAttribute("src", "data:image/svg+xml;base64," + btoa(svgData));

    img.onload = function () {
        //canvas.width = 1200;
        //canvas.height = 1200;
        ctx.drawImage(img, 0, 0);

        // Now is done
        console.log(canvas.toDataURL("image/png"));
        var jpegFile = canvas.toDataURL("image/jpeg");

        function base64ToBlob(base64, mime) {
            mime = mime || '';
            var sliceSize = 1024;
            var byteChars = window.atob(base64);
            var byteArrays = [];

            for (var offset = 0, len = byteChars.length; offset < len; offset += sliceSize) {
                var slice = byteChars.slice(offset, offset + sliceSize);

                var byteNumbers = new Array(slice.length);
                for (var i = 0; i < slice.length; i++) {
                    byteNumbers[i] = slice.charCodeAt(i);
                }

                var byteArray = new Uint8Array(byteNumbers);

                byteArrays.push(byteArray);
            }

            return new Blob(byteArrays, { type: mime });
        }
        var jpegFile64 = jpegFile.replace(/^data:image\/(png|jpeg);base64,/, "");
        var jpegBlob = base64ToBlob(jpegFile64, 'image/jpeg');
        console.log(jpegBlob);

        var a = document.createElement('a');
        a.target = "patternImg/image.jpeg";
        a.download = "image.jpeg";
        a.href = canvas.toDataURL('image/jpeg');
        document.body.appendChild(a);
        a.click();
    }
}
kiranvj
  • 32,342
  • 7
  • 71
  • 76
chandra shekhar bhatt
  • 11
  • 3
  • 3
    You cannot do this with JavaScript. Only option is to change the download folder in browser setting or enable the setting to prompt for download location each time. – kiranvj Jul 24 '20 at 05:01
  • https://stackoverflow.com/a/34871076/8348558 check this – deepchudasama Jul 24 '20 at 05:02
  • how can i do this . i want to download this image on my project folder without using any PHP server side can I do that in angular js or jquery or javascript – chandra shekhar bhatt Jul 24 '20 at 05:09

1 Answers1

0

The browser security model does not allow code on the page to arbitrarily write to the file system. You need the user to interact with a "Save As..." dialog for that behaviour.

So you cannot do it without user interaction.

Josh Wulf
  • 4,727
  • 2
  • 20
  • 34