24

I am attempting to download a large canvas image (several thousand pixels height and width) on the click of a button using toBlob in the following code, which doesn't seem to work:

document.getElementById("download_button").onclick = function() {

  var link = document.createElement("a");
  link.download = "image.png";

  canvas.toBlob(function(blob){
    link.href = URL.createObjectURL(blob);
    console.log(blob);
  },'image/png');

  console.log(link.href);
  link.click();

}

console.log(blob) in the callback function returns: Blob {size: 64452, type: "image/png"}

But console.log(link.href) returns nothing.

Am I not using .createObjectURL correctly?

I used to work with toDataURL, but it stopped working above a certain canvas size. And this post canvas.toDataURL() download size limit suggested to try toBlob.

3 Answers 3

29

Your code is fine.. just use it at the right time :)

 canvas.toBlob(function(blob){
    link.href = URL.createObjectURL(blob);
    console.log(blob);
    console.log(link.href); // this line should be here
  },'image/png');
5
  • 2
    Right, thanks ! It works correctly with console.log(link.href); and link.click(); inside the callback function.
    – tvoirand
    Commented Jun 15, 2017 at 12:38
  • 1
    @ymz why is that though? I thought that would only be the case if .href was a custom property being added to the link element but it wasnt, yet the link element was defined in the event function scope too so should be accessible too or is it because it's nested within another function?
    – brandito
    Commented Jul 18, 2018 at 4:43
  • @ymz I just tried a little something to attempt to test it and this is what I get: var link = document.createElement("a"); link.download = "image.png"; function test() { link.href = "#Test"; console.log(link.href); } result: "image.png"
    – brandito
    Commented Jul 18, 2018 at 4:45
  • in addition, my first thought is that link.href shouldn't be accessible outside of that function or atleast, return "image.png" based on the above behavior strangely enough, yet link.href outside of the function scope gives an empty string.
    – brandito
    Commented Jul 18, 2018 at 4:46
  • @brandito I know this is very late, but the reason is that canvas.toBlob is asynchronous. The code is saying "start converting to a blob, and run this function when done", and continues immediately to clicking a link before the blob is finishing converting.
    – kibibu
    Commented Nov 2, 2023 at 23:27
13

My solution to the problem:

async function getImage({
  canvas,
  width,
  height,
  mime = 'image/jpeg',
  quality = 0.8,
}) {
  return new Promise(resolve => {
    const tmpCanvas = document.createElement('canvas');
    tmpCanvas.width = width;
    tmpCanvas.height = height;

    const ctx = tmpCanvas.getContext('2d');
    ctx.drawImage(
      canvas,
      0,
      0,
      canvas.width,
      canvas.height,
      0,
      0,
      width,
      height,
    );

    tmpCanvas.toBlob(resolve, mime, quality);
  });
}

const photo = await getImage({ canvas, width: 500, height: 500 });
1

You might also create a custom prototype to get an equivalent to canvas.toDataURL()

HTMLCanvasElement.prototype.toObjectURL = async function(
  mimeType = "image/jpeg",
  quality = 0.85
) {
  return new Promise((resolve, reject) => {
    this.toBlob(
      (blob) => {
        if (!blob) {
          reject("Error creating blob");
          return;
        }

        const blobUrl = URL.createObjectURL(blob);
        resolve(blobUrl);
      },
      mimeType,
      quality
    );
  });
};
<canvas id="canvas" width="200" height="200"></canvas>
<img id="imgBlob" src="" alt="">
<img id="imgUrl" src="" alt="">

<p><a id="linkObjectUrl" href="" download="image.jpg">Download img (object URL)</a> | <a id="linkDataUrl" href="" download="image.webp">Download img (data URL)</a></p>

<script>
  // example canvas
  window.addEventListener('DOMContentLoaded', async(e) => {

    // draw example on canvas
    const canvas = document.getElementById("canvas");
    const ctx = canvas.getContext("2d");
    const img = new Image();
    img.crossOrigin = "anonymous";
    img.src = "https://picsum.photos/id/237/200/200";
    await img.decode();
    ctx.drawImage(img, 0, 0);

    // get object URL
    let quality = 0.5;
    let objectUrl = await canvas.toObjectURL("image/jpeg", quality);
    let dataUrl = canvas.toDataURL("image/webp", quality);

    // set object URLs
    linkObjectUrl.href = objectUrl;
    linkDataUrl.href = dataUrl;

    // apply to image elements
    imgBlob.src = objectUrl;
    imgUrl.src = dataUrl;

  })
</script>

Usage

The method needs to be called in a async function.

let objectUrl = await canvas.toObjectURL("image/jpeg", quality);

Download links don't work in SO snippets.
See also codepen example

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.