Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I've got this interesting challenge here that I don't know how to solve. I'm trying to create HTML buttons from an Image. This image here is the example I am using. How can I split up all the trapezoids into separate buttons that register separately when tapped on the corresponding regions. I would assume I need to specify some kind of boundary for each trapezoid but I don't know how you would do that for a decently complex shape like this.
Use the HTML <map> element to create an image map from the image. Image maps allow you to map out shapes (circles, rectangles and irregular polygonal) from coordinates you provide and these shapes become clickable with their own hrefs. You are also able to get the x,y coordinates during the click event.
There are a variety of free tools on the Internet to generate the coordinates and the overall code.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I'm looking to create a Conway's Game of Life-type dynamic image that cycles through these general patterns (below).
Is it possible to create these types with Javascript? Or am I better off looking to a 3D application and cycling through an array of pre-define images?
Looking at your examples, I believe you could easily write Javascript code to generate these images. Personally, I would look to generating an SVG. You can do that without a library, but you may find a library like SVG.js helpful to play with.
I would look at the images as a 3x3 grid of your circles that you effectively randomly turn on or off (according to your desired logic). Then you could easily generate the "connector" lines between them.
After you have your 3x3 grid looking how you want it, you could apply a 45° rotation to the group and you are done.
With the above complete, you could then get the svg content and submit it to a server, save it to a file, etc.
If you have any experience with svg / js, you will likely be able to get this done very quickly.
Good luck to you!
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I have shape like the following image
, I need to crop the shape out from the background context in Javascript. The shape data is in the format of base64. I need to somehow read the image in a binary format but I am not how to do this in Javascript?
You can use OpenCV.js to read the data. What you are trying to do is called Background Substraction.
There is even a specific tutorial (OpenCV - Background Substraction) for what you are trying to accomplish.
In a nutshell, (1) you read the data, (2) you create a mask with what you are trying to delete, and then you use the data and the mask to create a new output.
The mask is nothing more than another image. One where white means keeping a pixel, and black means deleting it.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
i currently want to implement a draw image tool to my projects(something like the brush tool but instead of a color i am actually drawing with the picture). I want to be able to "draw" a picture by hovering my mouse over it. I m currently thinking about two possibilities, one is with a mask over the picture and actually erasing the mask with the mouse or the other posibility to try to draw with the canvas, making the zones touched by the mouse visible.
Do you have some general ideas about how should i start my work?
Thanks
I would prefer the canvas approach.
Here is another great tutorial:
https://code.tutsplus.com/tutorials/how-to-create-a-web-based-drawing-application-using-canvas--net-14288
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I have an image . I want the image to be split into 100 pieces (outside the user will have appearance of 100 small images as a single large image) , and upon clicking each smaller image (ie any one of 100) , each image should be highlighted and shown as a separate image .
What is the best technique to do this ???
If that is ASP.Net app, then best idea would be to provide the image to web client and in javascript get info about [x,y] position of the mouse cursor on image, from there, computing rectangle, based on the way you want to split the image into sub-images and returning back the sub image , that contains given [x,y] position of the mouse cursor and displaying it.
Should be possible to do all in javascript, moving 100+1 images between client and server could be slow or getting the correct one as the mouse is moving, computation on the server, does not seem to be a good idea either.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I've already built the animation part, used JS to control the in SVG element.
Now what I want to achieve is something like this:
I tried to use paths.getBoundingClientRect() to get the distance between viewport's border to the path's highest position, so I can make the whole background change when the peak reaches a certain position. (if (rect.top <= 100) {...})
But I don't know how to control irregularly shaped areas' attributes.
Any possible solution?
Thank you very much.
i have used http://d3js.org for that sort of thing. it is very good. It provides a simple library to help you draw the graphs you want using svg. I think the particular part you are looking for is called library.
This is the API call.
https://github.com/mbostock/d3/wiki/SVG-Shapes#area
Some links below to examples and code for using d3js
http://bl.ocks.org/mbostock/3894205
http://bl.ocks.org/mbostock/3883195
http://mbostock.github.io/d3/talk/20111018/area-gradient.html
http://bl.ocks.org/NPashaP/113f7fea0751fa1513e1
http://bl.ocks.org/mbostock/1667367