Save image to desktop with html2canvas

Question

Save image to desktop with html2canvas

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (-1 votes)

0

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

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

I made an adaptation like 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');
                        }
                    });
                }
            });

    });

asp.net-mvc html2canvas

asked by anonymous 19.05.2016 / 19:42

3 answers

ManagedBean methods are not processed how to make combobox modify a combobox with items from the java desktop database?

score 1 · Answer 1

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

>

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

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

        }
    });

});

score 0 · Answer 2

You will want to use the FileSaver.js library along with html2canvas.js to save the file to the user's machine, but the browser will still give the user the option to choose the location when they want to save the file.

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

score -1 · Answer 3

I do not think you'll be able to do this. A web application will never have access to any information from the user's local machine for security, such as the folder structure.

Not even the browser that is installed on the user's machine can not get this kind of information. What I would indicate for you to do was to return 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 would choose where to save this image.

I hope I have helped.

Hugs!