MakG10 / jquery-meme-generator

A jQuery plugin for interactive creating images with captions (memes) with basic image editing tools.
http://maciej.gierej.pl/en/jquery-meme-generator
59 stars 16 forks source link

[data URL <-> blob] Problem with large images #14

Open juliancnn opened 7 years ago

juliancnn commented 7 years ago

Thanks for your amazing job, and sorry for my poor English. Testing the script, I have seen how some browsers (for example chrome) do not support downloading the canvas in image format when it is large. (1080px x 1920px) due to the length of the url.

I have tried to modify it, but I have not succeeded. Some help?

`

this.download = function(filename){ if(typeof filename === 'undefined') filename = 'image.png';

        var downloadLink = $("<a></a>").attr("href", this.save()).attr("download", filename).appendTo(MG.wrapper);
        downloadLink[0].click();

        downloadLink.remove();
    };`

More information about the limitations of browsers https://stackoverflow.com/questions/37135417/download-canvas-as-png-in-fabric-js-giving-network-error

juliancnn commented 7 years ago

Solved.. Solution:

    this.download = function (filename) {
        if (typeof filename === 'undefined') filename = 'mg.png';
        MG.canvas.save().toBlob(function(blob) {
            url = URL.createObjectURL(blob);
            var a = document.createElement("a");
            document.body.appendChild(a);
            a.style = "display: none";
            a.href = url;
            a.download = filename;
            a.click();
            URL.revokeObjectURL(url);
        });