Save image to desktop with html2canvas

Question

How do I save the image to the desktop or some other folder on the user’s machine ?

I took the very good example of how to generate the image and save to a server folder here: Take Screen print and save image automatically in C#

I made an adaptation as the example below:

$("#btnImprimir").click(function () {

        var target = $('#box-graphs');
        html2canvas(target, {
                onrendered: function (canvas) {
                    var dataUrl = canvas.toDataURL();
                    $.post('/Exame/Imagem', { 'data': dataUrl }, function (data) {
                        if (data == "1") {
                            alert('Imagem enviada com sucesso');
                        }
                    });
                }
            });

    });

Answer 1

It is not possible to control the visitor’s machine through the browser, this would be a security flaw, ask yourself, you would like a website to be able to control your computer folders?

However it is possible to allow the automatic download, of course each browser will have a limitation, as I showed here some ways to try to get around the problem in IE: /a/115223/3635

$("#btnImprimir").click(function () {
    var NOME_IMAGEM = 'download.png';

    var aLink = document.createElement('a');
    var evt = document.createEvent("HTMLEvents");
    evt.initEvent("click");

    var target = $('#box-graphs');

    html2canvas(target, {
        onrendered: function (canvas) {
            var dataUrl = canvas.toDataURL();

            //Download no IE11
            if (canvas.msToBlob) {
                var blob = canvas.msToBlob();
                window.navigator.msSaveBlob(blob, NOME_IMAGEM);

            //Download para navegadores que suportam o atributo download=""
            } else if (typeof a.download !== "undefined") {
                aLink.download = NOME_IMAGEM;
                aLink.href = dataUrl;
                aLink.dispatchEvent(evt);

            //Download para outros navegadores (provavel que não funcione em mobiles)
            } else {
                window.location.href = dataUrl.replace(/^data:image\/[a-z]+[;]/g, "data:application/octet-stream;");
            }

        }
    });

});

Answer 2

You will have to use the Filesaver.js library along with html2canvas.js to be able to save the file to the user’s machine, but still the browser will give the option of the user to choose the location when you want to save the file.

Take a look at the Filesaver.js documentation that will solve your problem

Answer 3

I don’t think you’ll be able to perform this procedure. A web application will never have access to any user’s local machine information for security, such as folder structure.

Not even the browser that is installed on the user’s machine does not get this kind of information. What I would indicate for you to do is to return to url of the document that was generated on the server and thus include a new element on the user screen with the download link. In this case the user himself would choose where to save this image.

I hope I’ve helped.

Hug!