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
Related
I'm trying to create a small website using the FabricJS library, which adds additional features to the web canvas element.
My issue that I, however, have is that i want to resize the canvas (in red) so that it fills the whole webpage.
On this canvas, there is a background image (in green) where I'll create some drawings on (in orange, this could be lines, squares,...).
Now, I would like to export all drawings in a coordinate system relative to the image and not to the whole canvas, because it should be possible to freely move around and zoom in/out the image for an enhanced drawing experience.
My idea, on how to solve this, would be to calculate the image position relative to the canvas and subtract them from the drawings - but that includes a lot of calculation.. Maybe there is a more genius approach with FabricJS?
Moreover, how can i guarantee that my drawings move around and zoom in/out with the image, so that my drawings are always true to the image?
I've thought about this for days and came to the realization that i need input from the professionals.
I think toLocalPoint() might help. Given an object imageObj and absolute coordinates left and top of your drawing, you can find the relative coordinates like this:
const abs = new fabric.Point(left, top)
const rel = imageObj.toLocalPoint(point, 'left', 'top')
console.log(rel.x, rel.y)
As for your second question: there is no easy way to "tie" two objects together, other than grouping them - and I assume you don't want to group them. Therefore, you would need to listen to all the appropriate events emitted by one object and make the adjustments to the other object in their handlers. To find out what events make sense to listen to in your case, see the events demo.
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.
On web (actually webview in mobile development), I have an image of a basketball court. I need to detect the click(touch) of the area on the court image, whether it is within the 3 point line or outside of it. What is the simplest way of achieving this? Old school image map? SVG? Canvas tag?
This is easiest done on a <canvas> element using well known frameworks like Kinetic and Fabric.
You would load the image in the bottom layer, then apply a 3pt layer over the whole image. On top of the 3pt layer is a 2pt layer in the form of an arc. The layering would look like this, from top to bottom:
- 2pt "arc" layer on either side |
- 3pt "full court" layer | Click propagation
- court image V
So when the player touches inside the 2pt arc layer, you know it's 2pt. When the player touches outside the arc, it's the 3pt layer that catches the touch. Additionally, frameworks might allow a propagation to underlying layers. You must prevent that one.
An image map would likely be the least complex implementation. Otherwise, you'll want to subscribe to a click anywhere on the court and then examine the mouse coordinates relative to the image.
If I were you, I'd save yourself the pain of writing client-side code for it and just use an image map. They work well for things like this.
http://www.w3schools.com/tags/tag_map.asp
You can use maybe this solution when you don´t use canvas: Click image and get coordinates with Javascript (2006)
For canvas there is a solution, too:
How do I get the coordinates of a mouse click on a canvas
element?
Getting mouse location in canvas
The simplest solution is getting an library and use it´s function...
Okay, my first question is this:
Is it possible to drag and drop an image on the canvas to a different place on the canvas?
I have the image on the canvas already, I would just like the user to be able to move it by clicking and dragging. I know this is possible with Kinetic JS, but is it possible just using the regular HTML5 canvas?
Second, if the first question isn't possible:
Is it possible for an image to be placed on a canvas at the point where a user clicks?
Can someone help me out here, or point me in the direction of a tutorial?
Thanks!
Is it possible to drag and drop an image on the canvas to a different place on the canvas?
Yes. You can read more about it here - http://www.html5canvastutorials.com/kineticjs/html5-canvas-drag-and-drop-an-image-tutorial/
Is it possible for an image to be placed on a canvas at the point where a user clicks?
Yes. You'll need to find out the co-ordinates of the canvas element that were clicked and place the image accordingly.
You can read more and view demos of the canvas element here - http://www.html5canvastutorials.com/
Is it possible to drag and drop an image on the canvas to a different place on the canvas?. Yes. However, if you want this, you have to implement it yourself.
Is it possible for an image to be placed on a canvas at the point where a user clicks? Yes. However, if you want this, you first have to implement 1), then implement dragging images.
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