CODEWITHSUNDEEP
javascriptjqueryhtmlhtml5-canvas
KiranPalode
KiranPalode

Reputation: 498

Drawing image into the canvas

I am creating an image viewer application using HTML5 canvas. I have used two canvas, first one used for loading the image in the actual width and height which not shown to the user ( It is a hidden canvas not appended into DOM tree),the second one which is actually presenting to the user.Suppose the actual resolution of the image is 1200*800. I loaded the image into the hidden canvas of size 1200*800.Then I tried to load the image into the visible canvas of resolution 700*600(I added the code like ctx.drawImage(hiddenCanvas,0,0,700,600).I could see the entire image in this resolution. I have the below questions.

  1. Will it keep aspect ratio when loading into the visible canvas? Or Have we do aspect ratio manipulation manually.
  2. Will it lose the quality of image when doing like so. Is this a standard method for doing an imageviewer application?

I have to add Zoom In,Zoom Out,Pan like features into this viewer.

Please any one can answer my questions.

Upvotes: 0

Views: 257

Answers (2)

WindyFoxBGR
WindyFoxBGR

Reputation: 1

you can use

var name=new Image();
name.src="name.fileformat";
context.drawImage(name,X, Y, sizeX, sizeY);

but for the pan, zoom and others I don't have a anything 'bout 'em.

Upvotes: 0

Osiris
Osiris

Reputation: 4185

When you say ,0,0,700,600, you're automatically specifying the aspect ratio.

Most resizing operations will degrade image quality. If you resize a 1200x800 image to 700x600, there will be some sort of interpolation (linear, bicubic etc) that will be performed.

Upvotes: 1

Related Questions