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
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
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 have 8 png images of a shoe; one for every 45 degrees. I want to be able to customize this shoe with different colors, and have the user be able to rotate the shoe 360 degrees displaying whatever custom color the user selected all around the shoe. My question is, does this mean I need a different image for EVERY different color, at every different angle? This seems like a ridiculous amount of images, especially if more customizable options are added aside from color. I'm wondering if there is anything out there that would help simplify this goal to avoid loading and interchanging a million images based on the angle and custom options selected, and I'm pretty much wondering, how someone more experienced might go about this.
Thanks for suggestions.
I'm not entirely sure what colours you are using for your shoes, but the following is something you can do. If you've got a shoe for colour #999 and one for #7B5, you could simply take the 8 different pictures of a certain colour, make the background non-transparent, then remove all parts that are the specific colour and make those transparent, then change the background-colour style of the image.
This demo uses the original image http://www.selectism.com/files/2013/05/wtaps-canvas-sneakers-02.jpg (imgur link in case that one 404s), with the colour #39476A removed from it using Chroma Key (greenscreen) effects, available in any specialised photo editor (photoshop, GIMP). Since the background is non-transparent, placing a colour behind it will fill in just that colour on the image, resulting in the effect you want.
When you've got your Chroma Keyed image, you simply place a background-color style on the <img> tag depending on the colour chosen by the user, and it'll appear as selected.
I'm creating a planning tool for a game. Imagine two 2D static gun emplacements with different ranges and damage per second. I want to draw these ranges with different colours according to damage, in a scale similar to this http://www.celtrio.com/support/documentation/coverazone/2.1.0/ui.viewmode.heatmapcolorscale.html
I got that part working with CSS border radiuses. My problem is that if ranges overlap, the overlapping area doesn't show the combined damage.
I found heatmap.js http://www.patrick-wied.at/static/heatmapjs/ but it doesn't allow you to set a different radius for each point. I also can't find a way to turn off the gradient... the damage of these guns at its maximum range is the same at its minimum range. I realise that's sort of the point of a heatmap normally haha but I'm not too sure what I should be googling.
I had a think about a PHP solution which would create a greyscale image using varying levels of opacity to represent different damage. I'd then loop through all the pixels and recolour them according to the scale. But that would be far too slow. It needs to update in as close to realtime as possible as the user drags the guns around the screen.
There's probably a very simple way to do this, a CSS filter maybe, but I can't find anything. Any ideas? Thanks!
CSS is the wrong tool for this job -- you really ought to be doing stuff like this using SVG or Canvas. It'll be a lot easier to achieve complex graphical effects using a proper graphics system than trying to hack it with shapes created in CSS.
For example, in SVG, you would simply need to use the fill feature to fill each area with whatever colour you wanted. See an example SVG image here. It's an SVG Venn diagram where the overlap areas are completely different colours to the parent circles. Canvas has similar functionality.
You might also want to consider using a Javascript library such as RaphaelJS or PaperJS to help you with this. (using Canvas would imply that you're using some Javascript anyway, and it will make SVG easier to work with too).
However if you must do it using CSS, if you want elements to show through so the colours are merged when they overlay each other, then you'll want to use some sort of opacity effect.
Either opacity:0.5 or an rgba colour for the background.
That's as good as you'll get with CSS; you won't be able to get arbitrary colours in the overlap portions; just a combination of colours from the layered opacity effects.
If you look at the code of heatmap.js, you'll see that it works like this:
Paint circles onto a canvas, using a radial gradient from transparent to some percent opaque (depending on the strength of the point).
Color-map that grayscale image (converting each gray value to one of an array of 256 colors).
Your problem could be solved in the same way, but painting a circle of constant opacity and variable radius in step 1.