0

I'm working on a toy JS project to apply filters to an image.

If I do the following:

  1. add an image to a page via FileReader and Drag and Drop
  2. apply said image to a maximum height/width of 500px canvas element via drawImage
  3. apply changes to said canvas via putImageData
  4. save the canvas via Canvas2Image

will the saved image be the size of the canvas element or the original image dimensions?

Jason
  • 11,263
  • 21
  • 87
  • 181

1 Answers1

1

The mage you create from canvas will always be at the size of the canvas. The canvas does not know what you draw into it so the original size of the image does not matter.

I don't know what Canvas2Image will do to the resulting image, but you can simply extract the canvas as an image using:

var dataUri = canvas.toDataURL('image/jpeg');

This will save the image at the size the canvas is at (I assume Canvas2Image will do the same where it can or simulate this approach for bmp formats etc.).

To prompt the user to save the dataUri as an image please see my earlier answer here.

Community
  • 1
  • 1