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.
Will it keep aspect ratio when loading into the visible canvas? Or Have we do aspect ratio manipulation manually.
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.
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.
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.
Related
I am trying to freehand draw on image within canvas, along with zoom in/out.
to add drawing change on image I am using getImageData() & putImageData() and then saving the image using
canvas.nativeElement.toDataURL();
it works fine without zoom, but when i zoom in using context.scale(x,x);
canvas.nativeElement.toDataURL(); saves only image that is visible in canvas area, and the image part that went out of canvas size after zooming was lost.
I want to get complete image with drawing changes, when zoomed out, is there any alternative for toDataURL() which can give me complete image data.
You may paint your image on the screen canvas and also on a buffer canvas (not attached to the DOM) The buffer canvas may be as big as the scaled image, and you can use toDataURL() on the buffer canvas
i'm a beginner in Javascript so please bear with me.
Basically I'm making a sandbox drawing facility for a website using Javascript. And this is done using the canvas. What I need to do is to be able to resize the canvas dynamically but at the same time keep everything on the canvas to scale.
I don't think this question has been asked before. It seems trivial but I currently have all my objects on the canvas defined in absolute coordinates. I also have mouse events to use to draw things. And when I want to enlarge the canvas (by doubling the size say). All the objects inside won't be enlarged properly to scale and the mouse coordinate system would be messed up too.
Only solution i can think of is add a scale factor to ALL my drawing parts, but this is very tricky with a lot of code. Is there a better way?
If you don't mind jaggies on your double-sized canvas drawings then you can simply use CSS to double-size your canvas. Then divide every incoming mouseEvent coordinate by 2.
If you don't want jaggies on your double-sized canvas then:
Double-size the canvas element: canvas.width*=2 and canvas.height*=2 This automatically erases all canvas content.
Scale up the canvas: context.scale(2,2)
Redraw all your drawing parts using the unchanged original coordinates. A happy note: you do not have to scale any of your drawing coordinates -- context.scale automatically does that for you.
Divide every incoming mouseEvent coordinate by 2.
What I'm trying to do is include what is under my canvas object in the page as part of the image when I saved what is inside the canvas.
I have an application that creates a canvas and lets you draw with the mouse on it. This drawing functionality is in place so you could draw on a page as if they were notes, so after I can save the image or page with the "notes" I draw on it.
So far I'm able to save what is drown in the canvas but because the background is not part of the canvas I can't get to save it together. I tried experimenting with html2canvas.js but it doesn't work in my case because it takes the DOM object an redraw them into the canvas, it doesn't take just what is under the canvas to be part if the final image.
I would like to know if there is a way to do this, or somehow capture the pixels in that area and redraw them as part of the canvas when I'm creating it.
Thanks a lot in advance!
Possibly a duplicate, but I'll give you a very short answer; you can't (unless you do something like html2canvas, where it transposes the DOM onto a canvas element)
This is by design. If you could it would be a security flaw. Scripts are not allowed to create images out of arbitrary stuff on a person's screen. If you search for "html canvas security rules" you'll find more information on why this is disallowed.
Unfortunately, HTML2Canvas (or something like it) is the only option, but it's only part of the puzzle. To get the effect you want, you need to create another canvas to composite the output from HTML2Canvas and the drawing canvas. You'll need to offset the output of HTML2Canvas to the position of your drawing canvas, and then draw the imagedata from your drawing canvas on top of it. Then you can use the imagedata from the compositing canvas as your output.
I would like to find some code or a technique to place points on top of an image in HTML. When the user clicks on the image, javascript event calls a function with the x,y positions of the pointer relative to the origin of the image. Ideally, the user would also be able to zoom in/out on bigger images that can't fit on the page.
Thanks for any help/ideas!
It sounds like you should look into HTML5, particularly the Canvas element:
Here are some resources:
Reference Documentation
How to draw with HTML5 Canvas
Lets call it a drawing surface
I'm currently implementing a HTML canvas based webapp that features panning. Is there a way to use an auxiliary buffer to hold the presently visible area so when I pan I don't have to redraw the whole canvas and only have to draw the newly visible areas?
See my previous response to a related question: What is the fastest way to move a rectangular (pixel) region inside a HTML5 canvas element
Just draw the entire canvas in a div that has overflow:hidden and implement panning as re-positioning the top and left of the canvas within that div. It is much faster. And don't worry about drawing canvases tens of thousands of pixels wide/tall, I've successfully used this on very-very large and complex HTML and SVG elements.
Take a look at the pixel manipulation API.
http://dev.w3.org/html5/2dcontext/#pixel-manipulation