Home/ Questions/Q 8684939
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T22:26:00+00:00

I am creating a image editing tool using HTML 5 Canvas & Java script.

  • 0

I am creating a image editing tool using HTML 5 Canvas & Java script. I am loading large image to canvas by scaling an image to fit the canvas, apply some filters, and save back image to disk.

The problem is when I save a canvas to image it will store image with canvas size. What I want is image will be stored to its actual dimensions with applied filters. The Same approach used by Flickr.

For Example

if the image is 1000px X 1000px and displayed in a 300px X 300px canvas, I am loading image to canvas as 300px X 300px. while saving I still want to save the image with 1000px X 1000px dimesnion. How to do that?

I am developing using php, HTML5 & Javascript.

I want to do everything on client side, before sending an image to server

Any Help?

looking for a proper solution

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Found it.

    Just need to change canvas size by using css & tag attribute

    CSS width & height adjust display area of canvas
    Tag width & height are actual image width & height

    For example:

    #canvas { width:500px; height:350px}
<canvas id="canvas" width="1024" height="760"></canvas>

    Above will display canvas with block of 500px x 350px.
    However when canvas saved to image it will saved with image size 1024×760

    • 0