How to automatically download a image taken from a canvas element?

Question

The following code takes an image, copies it into a canvas (so it can be modified), then it turns it into an image again:

  const image = this.markerEditorEl.components.screenshot.getCanvas('perspective').toDataURL()
  var canvas = document.getElementById('test-canvas')
  var context = canvas.getContext('2d')
  var imageObj = new Image()

  imageObj.onload = function () {
    // set values
    const sourceWidth = cropWidth
    const sourceHeight = cropHeight
    const sourceX = (width / 2) - (sourceWidth / 2)
    const sourceY = (height / 2) - (sourceHeight / 2)
    const destWidth = cropWidth
    const destHeight = cropHeight
    const destX = 0
    const destY = 0
    context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight)
    window.location = canvas.toDataURL()
  }
  imageObj.src = image

As you can see, I'm trying to download the image automatically: window.location = canvas.toDataURL(). However, this doesn't work. I get:

Not allowed to navigate top frame to data URL: data:image/png;base64,iVBORw0KG.......

What's the correct way of doing this? I need the image to be automatically downloaded to the user's computer.

see answer here: https://stackoverflow.com/questions/10673122/how-to-save-canvas-as-an-image-with-canvas-todataurl does it work? — Kresimir Pendic, Jan 12 '18 at 09:00

score 2 · Answer 1 · answered Jan 12 '18 at 09:03

2

You can use canvas.toBlob() to get a Blob of the file, create a new Blob with original Blob set as iterable with type set to "application/octet-stream", URL.createObjectURL() to create a Blob URL of the file object.

canvas.toBlob(blob => {
  let file = new Blob([blob], {type:"application/octet-stream"})
  let blobURL = URL.createObjectURL(file)
  window.location.href = blobURL
})

answered Jan 12 '18 at 09:03

guest271314

1
15
104
177

1

See also [Base64 PDF in new tab shows Blank Page before Refresh](https://stackoverflow.com/questions/45558645/base64-pdf-in-new-tab-shows-blank-page-before-refresh), [How to download a file without using element with download attribute or a server?](https://stackoverflow.com/questions/38711803/how-to-download-a-file-without-using-a-element-with-download-attribute-or-a-se) – guest271314 Jan 12 '18 at 09:13
The file that's downloaded is named like this: `7c725e7b-44eb-4dff-9620-6c32566ad080`. Weird. – alex Jan 12 '18 at 10:22
@alex The is the [Blob URL](https://w3c.github.io/FileAPI/#url) UUID. The user can change the name of the file at any time before or after accepting offer of file for download. – guest271314 Jan 12 '18 at 10:26
Could you give me an example of how to change the name? – alex Jan 12 '18 at 10:27
You can use `` element with `download` attribute to suggest a file name to the user. Set `href` of `` element to `Blob URL`, call `.click()`, see [How to build PDF file from binary string returned from a web-service using javascript](https://stackoverflow.com/questions/12876000/how-to-build-pdf-file-from-binary-string-returned-from-a-web-service-using-javas/) – guest271314 Jan 12 '18 at 10:28
I want to generate a name myself. Not from the user. – alex Jan 12 '18 at 10:30
Yes, you can suggest a file name for the file offered for download using `download` attribute, as demonstrated at code at previous link. You cannot force a user to download a file having only a specific name that you generate. – guest271314 Jan 12 '18 at 10:32

score 0 · Accepted Answer · answered Jan 12 '18 at 09:33

0

Below is sample code..!

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the canvas element.
</canvas>
<button  onclick="downloadImage()">Save image</button>

<script  src="https://fastcdn.org/FileSaver.js/1.1.20151003/FileSaver.min.js"></script>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50);

    function downloadImage(){
        var canvas = document.getElementById("myCanvas");
     canvas.toBlob(function(blob) {
      saveAs(blob, "canvas_images.png");
     });
    }
</script>
</body>
</html>

answered Jan 12 '18 at 09:33

Tushar Acharekar

880
7
21

How to import that `saveAs` with import/ES6 syntax? – alex Jan 12 '18 at 10:25
I am not using import/ES6 syntax ever before but this question will help you, **https://stackoverflow.com/questions/21997057/how-to-use-filesaver-js**....! – Tushar Acharekar Jan 12 '18 at 10:42
or download `FileSaver.min.js` and add this code `import * as myModule from '/FileSaver.min.js';` – Tushar Acharekar Jan 12 '18 at 10:43

How to automatically download a image taken from a canvas element?

2 Answers2