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
Related
There I am creating a stamp maker in HTML,Jquery and javascript. In the editor of my application image is adding to HTML canvas (simple) and also the text, I just create new line element and then append it to the canvas.But the problem is that I want my image to be in back of text. I googled it alot and also search stackoverflow I got the solution of creating multiple canvases but in last I have to download the canvas to file for user. There is the problem. And I want to export whole canvas along with text one and second image together.If I create seperate canvas for the text and another for image and give image one low zindex it would be fine but there will be one canvas to be exported as image.
Link to multiple layers in canvas html5 - canvas element - Multiple layers
I am hopping that we would come up with an idea of how to download both canvases as an image or find a method to take image to back of the canvas.
Any answer would be appreciated.
If you store the text, second image and first image in variables, you could just draw them on the canvas in the order you prefer. This means that, whenever there's some change in the image or text, you should clean the canvas and redraw everything.
Also, you may be interested in Compositing, since it allows you to decide where a new object is drawn in relation to the existing drawing (on top, behind, etc.)
I want to be able to correct images so you look at it from the orthogonal plane. I have seen This question but do not know how to put the calculations into JavaScript code to perform the action.
So to upload an image, select four points on the image to become the new corners and then to crop.
For example, I want to select the four corners of the piece of paper in this image and then crop it to make it look as if I am looking at it directly.
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
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 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