How export img data with javascript

Question

I get the image data from canvas as follows:

var img = mycanvas.toDataURL("image/png;base64;");

then i pass de image data to the href attribute of anchor

$("#imagenMapa2").prop("src",img);

The problem is that when i try to download the image chrome crash, I tried with other smaller canvas and that work, buth with the size of

width="2600" height="3400" 

doesn't work

appreciate any help

Answer 1

The problem is that browsers may or may not apply length limits to data-URIs. There is no way around that unfortunately, but to hope they increase this limit. The data itself is not a problem for modern computers.

Workaround #1

Canvas is essential a bitmap just like an Image, the only difference being that it can be edited using JavaScript.

So instead of converting the canvas to an image, just insert the canvas element into the DOM. It will behave just like an image from the user's point of view.

If you need user to download the image you are limit to make the user right-click and "save as" the image (supported in most browsers by now).

Workaround #2

Another option is to use a Blob. Virtually all browsers supports Blobs, but almost none support canvas.toBlob() however (only Firefox does, IE 10+ with prefix), so you will run into limitations here as well.

This example is from MDN's page:

canvas.toBlob(function(blob) {
  var newImg = document.createElement("img"),
      url = URL.createObjectURL(blob);

  newImg.onload = function() {
    // no longer need to read the blob so it's revoked
    URL.revokeObjectURL(url);
  };

  newImg.src = url;
  document.body.appendChild(newImg);
});

Workaround #3

Or, as stated in the other answer, use lossy compression JPEG with high compression ratio. You will loose the alpha channel too.

This may, however, be the "only" option left if you require as much compatibility as possible cross-browser:

var dataURI = canvas.toDataURL("image/jpeg", 0.2);  // type, enc. option <0.0, 1.0]

Workaround #4

You can also send the raw bitmap to server as ArrayBuffer in a post, then encode the raw data on server-side and send the image back to user for download.

This is obviously a high traffic-load option and not very user friendly as you would be sending ~44mb (with the size from the question) upstream from user end to the server (considering that most ADSL users in particular has limited upstream rate this could take ages trialing the user's patience, which is never a good idea...).

If this is special use however, ie. intranet or similar, it is doable, but generally not recommendable.

Workaround #5 (in principle)

The last option is to basically encode the raw bitmap data to PNG using JavaScript using low-level ArrayBuffer. I am not aware of any libraries that do encoding yet though so this option is currently left to long nights...