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.
Related
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
Currently I am working on tile vitualizer project in which the user can upload their own image and select the floor area and apply any tiles on their wish to have a look of their room based on tile and bought it. I have created pattern using selected tile image and create path on canvas and apply fill style to have a look but it is not feel like a floor.
What I am getting is
So, I tried perspective.js to get some realistic result.
I can make the tile repeated image looks like floor using points but we have some transparent space in canvas while applying the canvas as pattern it missed some floor space because of being transparent.
Result using perspective.js
How to overcome this problem? Sorry for my bad English. Thanks in advance.
I'm trying to develop a very simple sketch program that can draw the dimensions of buildings. For example, if I want to draw a 24'x24' house, it would simply be a square with each side representing 24'. I've read that SVG/Javascript may be ideal, but I'm looking for some specific guidance.
Here is a link to a 30 second video showing exactly what I need: https://vid.me/96Mz
I'm able to draw those shapes by clicking in one spot and then moving the mouse to another location to draw a wall, then click again to produce a third corner, and then a final time to close the shape. I'd need the area to be calculated too.Preferably the dimensions of each side would be able to be shown as labels.
Here's an example of an image I'd like to be possible:
Click Here
Can you think of anything to help me build a simple version? Any feedback is huge, thanks a lot.
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
I googled it but didn't find a good answer. Specifically, I want to learn:
to slice an image into curved pieces
to create individual objects from those pieces (i assume that i need
this to reassemble)
thanks.
There are several pieces to this puzzle. :)
The first piece is SVG and its Canvas. That's what you'll need to draw, because otherwise you can't make a curved piece out of a picture. Only rectangles are possible with standard HTML/CSS.
The second piece is an algorithm for generating jigsaw pieces from the picture. Google should help you with that if you can't figure one out by yourself (though it doesn't seem very complicated).
The rest should be straightforward.
Added: A quick Google search gave just such a jigsaw engine in the first result. Check out the source of that.
I'll assume the image you want to saw to pieces is a raster image with a resolution that you will use for the puzzle pieces, call that /picture/. Also, I assume you have the edges along which you wish to saw in a second raster image with the same dimensions, call that /raster/. Then your problem amounts to determining all connected areas in the raster. Each pixel of the raster gets annotated with the id of the jigsaw piece it belongs to, initially 'none', -1 or whatever. Then your algorithm scans across all pixels in the raster, skipping pixels that already belong to a piece. For each unassigned piece it executes a flood fill, "coloring" the pixels with the pieces id (e.g. number). In a second scan, after allocating an image for each piece, you add the corresponding pixels of the image to the piece. As part of your first pass you can maintain for each piece id the bounding box. That allows you to allocate the the images for the pieces to their proper dimensions.
You need a suitable convention to deal with border pixels: e.g. border pixels to the right belong to the piece if they have the same x-position, but are above they also belong to the piece.