0

I'm trying to take a capture of a HTMLCanvasElement, and display that result on a separate web page without uploading the image to a server. My initial thought was to save the image to local storage as a base64 image data URI, but then I looked at the uncompressed image size of the images that will be being used. @ 1920x1080 pixes, it might be around 6MB (using Photoshop to show the uncompressed size, since I didn't find a better way yet). The information I found on size limits for local storage made me think this was a bad idea.

So trying to find another solution, I've looked into using HTMLCanvasElement.toBlob(), and saving that to the HTML5 DOM File API. But then I found Microsoft Edge doesn't support toBlob() on canvas elements.

Then I found this answer regarding the use of the new File API, but then I found that's not supported in IE 11.

I need to support recent versions of Chrome, Firefox, and Explorer 11 and Edge.

Is there a straightforward way to do this? Is it possible, or should I just upload it to a server?

Dexygen
  • 12,287
  • 13
  • 80
  • 147
BBaysinger
  • 6,614
  • 13
  • 63
  • 132
  • Does it have to be on a different web page? Or can you hide a bunch of stuff and make it look like it is a new page? – Intervalia Apr 06 '18 at 22:14
  • The source of the image is from a page that is running intensive processes, that will hinder performance of what we will be doing with the resulting image. – BBaysinger Apr 06 '18 at 22:17

1 Answers1

0

If you can stay on the same page, and just make it look like a new page then you can do the following:

var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext('2d');
ctx.fillStyle = "green";
ctx.fillRect(10,10,300,220);
var img = new Image();
img.src    = canvas.toDataURL("image/png");
document.body.append(img);
canvas, img {
  border: 1px solid black;
}
<canvas id="mycanvas" width="320" height="240">
</canvas>

I'm not sure how to save it off to get to the new page. But try using toDataURL to get the image data since that works back to IE9

Intervalia
  • 10,248
  • 2
  • 30
  • 60