Jquery/javascript image "pimping" - javascript

I need to create a web application allowing people to upload an image and place on it a pre-defined element (like placing sunglasses on a face), with all necessary functionalities like resize, crop etc.
something like this: http://bayifier.com/
I can do that with flash, but i'm wondering if there s a way to do it with javascript.
thanks

you could use canvas and javascript like Pixastic does

Related

How would one create an image from a website using data from a form?

I'm not sure what tags this would fall under so I apologise if the scope is too large! I'm currently trying to build a site where a user would write their name into a form and select a template to build on top of. The site would then generate an image of their name and put it over a specific box on the image template they selected.
If anyone has some suggestions on how I could approach this / resources that would help, I'd really appreciate it.
An example is posted below:
To write and manipulate image in PHP, use Imagick or PHP GD.
I would recommend Imagick as it has more image formats and quality is better. But if you want fast rendering, use GD.
Using Javascript, you can use Canvas. Here is an example to use canvas to write on image How to add text on image using JavaScript and Canvas

Image Manipulation using javascript library

I'm creating a image editor and wanted to use any good image manipulation js library. I'm already using CAMANJS but the problem is that I'm using slidder for adjusting image like - sharpness and contrast.
It works like a charm but I want to render the adjusted image on the go, as the slidder moves not when user leaves sliider(ie - onMouseUp - unlike the CamanJs example: http://camanjs.com/examples/).
Is it possible to do in Camanjs or can someone suggest some library that does this on the fly(ie- as the slidder moves).

PNG Document Viewer

I would like to make an image viewer that can display multiple images in a document format. Basically my web application server right now is sending me an array of base64 png files that I need to display in a viewer that looks like a document. A good example for my requirements would be the following picture:
Also I should be able to animate the pages by rotating them, moving the page from one place to another or deleting a page by either clicking on the thumbnail or scrolling through the page and performing the necessary action. Currently my frontend imageviewer looks like this:
Which is mostly for testing purpose but I would prefer it looks more like the first example Image. Is there any library that can help me with this or any suggestion on how to start about it. Any advice would be grateful!.
Thank you!

jQuery Image slider for ASP.net

I want an image slider similar to what is shown in the link below.
http://blog.dreamcss.com/wp-content/uploads/example/
I have customized the script to my needs but I'm not able to find a way to change the image transition effect, rather than moving image from right to left I want image to dissolve & show other image that would make this script really code. I am open to new jQuery based Image Effect Slider/Gallery With similar look. This is the client's request so the design will remain same.
I would appreciate if i can change the image effect or if some one can provide me link for similar image slider.
I have to use this with ASP.Net and possible modify this script to integrated with database using c#
Thanks in Advance..
I use Flex slider http://flex.madebymufffin.com/ , it is very customisable and lightweight and should do what you want
Take a look at these Javascript Image and Photo Galleries. I would recommend using the existing APIs provided by these script libraries using JSON to pass data to the client from the server as opposed to modifying the script -- keeps it simple.
Alternatively, you could look at some of the stuff on CodePlex: Image Gallery if you wanted a server control to use with your solution.

how to create shape in a web page from image and change its fill using javascript

I have a PNG image of black sock shape with a transparent background.
I want to be able to embed this image in a web page and change the fill of the shape from black to any valid web colour using javascript (jQuery).
I would like to do this without flash, is this possible.
From my research it looks like I could convert the image to a html table but thats inefficient i'm sure.
Also I think Vector / SVG graphics might help here, but im not sure how to implement this.
Any help would be greatly appreciated.
I am a developer by day and web designer by night... still learning :)
I can't think of any way to achieve this with a png image, however you can export images directly to SVG using Illustrator. SVG is simply xml based markup like html, so this would allow you to programmatically alter the image with javascript.
Have u checked Google Chrome expermients? they have some that can be really helpful for u.

Categories