Saving High-resolution HTML5 Canvas Image

Question

I'm making a Perspective Correction Image Filter in HTML5. The algorithm is ready and working fine.

But I have issues exporting the image.

I use for perspective correction an WebGL Context with Three.js, so I can do things fast on GPU (it actually works VERY fast, doing a 3680x2760 image render in less than half second).

So I have two things: A low-res viewport (720x480) that user uses to configure and preview, and a high-res background viewport (the size of the image, just created temporary to render the image and them destroyed, all done inside a RenderHighRes function).

But my Google Chrome is crashing when opening the image, probably because the size and the source format. For exporting the image I'm using this code:

console.log("Rendering");
vcomposer.render(); 
console.log("Rendered! Exporting");
var URL = vcomposer.renderer.domElement.toDataURL("image/jpeg");
console.log("Exported! Opening");
window.open(URL);

I can get fine to "Exported! Opening" regardless image size. But for bigger images (like 3680x2760 ) the browser crashes when opening URL. I think its because it gets BIG url for a image like that.

So the thing is, I dont need to open the image, just make the user download it. How can I do that without getting dataURL to user download?

PS: If I remove the window.open line, it doesnt crash anything, so the render is working fine. Also with half resolution of the mentioned image, it works fine, so its just a size issue.

I hope I got clear ^^

Thanks!

Lucas

Answer 1

OK, solved the issue with the trick Orion said. Basically I did that:

Got the dataURItoBlob function on the topic Orion sent.

    var blob = dataURItoBlob(URL);
    var burl = window.URL.createObjectURL(blob);
    window.open(burl);

So in this way, it opens a blob url and not the big string. Works fine for even double resolution I mentioned! Thanks :D