jquery-meme-generator icon indicating copy to clipboard operation
jquery-meme-generator copied to clipboard

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

Open juliancnn opened this issue 6 years ago • 1 comments

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 avatar Nov 03 '17 11:11 juliancnn

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);
        });

juliancnn avatar Nov 04 '17 15:11 juliancnn