I have run into a small problem on a project I am working on.
Basically I have a page on a website where a single image is displayed. Users can then add shapes over this image.
Sort of like having a board with sticky notes.
The way I was tackling this was by having an invisible grid overlaying the board so that any shape added will be placed inside a cell, but this is giving me issues as the shapes can sometimes be larger than the cell on the grid.
Are there any other libraries I could use which could give me the functionality of adding shapes over an image, with the possibility of saving that shapes position?
Thanks!
Hey this may help you achieve what you want http://fabricjs.com/ its a simple
Javascript HTML5 canvas library that allows images to be loaded over backgrounds
Related
so I am tasked to do a project. So let me show something first.
In this one. The Purple shape should only appear when Durable Returns part is clicked.
Now I am drawing blanks with coming up ideas on how to do this. What I want to ask is if it's possible to recreate all of this in html interactively.
SVG is what you actually want.
SVG has a DOM with different elements, allowing you to have polygons and such that you can place arbitrarily. You can embed text and lay it out as you need as well. SVG in-browser can be scripted and also have CSS applied to it.
I want to build an image using predefined shapes such as circle, triangle, star etc.
For example, a webpage is divided on the left and right. On the left is an image of a T-shirt. On the right are images of shapes. User can drag and drop shapes on the T-Shirt image.
When the user saves the image, we want to save one image composed of the shapes on the T-Shirt image.
Is HTML canvas a good solution for this, or is it achievable using any JavaScript library?
Yes canvas is a great solution , and would give client a great user-experience,
and you can achieve that using jquery+ Fabricjs,
see this JSFiddle
i am writing a project where the user will select an image, than select a border and a logo. The border and the logo both will also be selected by the user.
I need to generate a new image (JPEG or PNG) based on these 3 images, here is an example of how an output should look. I couldn't find any libraries that could help me, all i found was how to crop and rotate images, but nothing on how to add an image over another.
Tnis project is using phonegap, so ideally, the solution should use Javascript.
What is the best way to solve this problem?
Use canvas to get Image and Draw it according to your needs.
I'm pretty much a total noob when it comes to responsive web design and I'm attempting to produce a responsive web app with an interactive map.
The map is made up of seven separate image files - one for each region. The map has to be split in to separate images so that I can change the transparency of each image (and therefore, the regions color intensity) depending on data taken from the database.
I want the map to be centered but I also want each region's individual image (that makes up the map) to retain its position.
The best analogy I can think of is a jigsaw where the pieces maintain their correct position to complete the jigsaw's image even when the browser is resized.
What is the easiest way for this to be achieved?
Bare in mind that I still need to be able to control the transparency of each regions image.
Any help or suggestions would be greatly appreciated as I do not know where to start! Sorry if my description is poor - feel free to probe.
Cheers,
Will
I ended up using an SVG made in illustrator which worked perfectly. Embedded it inline as apposed to having an SVG file in the directory.
I wonder how to imitate watercolors in JavaScript. For instance, I would like to fill a shape in the screen as if it were painted with watercolors. Is there any JavaScript library for that?
Because a "watercolor" effect can take many forms in terms of the staining and where colors become more transparent or more opaque, this could end up being quite specific to the shape in question that you want to fill.
Only solution I can think of is:
Prepare a number of scalable background images with watercolor effects. This will give you a selection to choose from which you can use to fill your shape or div.
Example tutorials are out there for Photoshop and GIMP.
Load up the background images dynamically and set the background of the shape to the relevant image when selected.
See Set an Image object as a div background image using javascript