Colour picker from image upload - javascript

I'm wondering if anyone knows of some html code that would allow a user to upload an image and it would generate a bunch of colours from that image, Kinda like this does here http://www.cssdrive.com/imagepalette/
We could do with automating this onto our site rather than a third party site.
Anyone know of anything that exists like this? Or am i asking for the world?
Cheers,

Have you seen this project on Github?
Color Thief
It's a javascript solution. (It depends on two additional libraries: jquery and quantize.js).
var colorThief = new ColorThief();
colorThief.getPalette(sourceImage, 8);
getPalette(sourceImage[, colorCount, quality])

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

Drawing and writing on image and save it

I have images hosted on the server, and I would like develop some functionality to let the user have possibility to draw over the picture.
They need to write some text too, and, finally save the result as picture.
Finally, its a simple editor, but I don't find JavaScript library who permit it...
You can see an example of final result I need here : https://nsa40.casimages.com/img/2019/08/29/190829023122267348.jpg
You can achieve this with the Canvas API pretty easily.
Your images can be pulled into the canvas by creating a new Image object. The canvas API itself has a lot of methods for doing the things shown on the image (drawing shapes like ellipses and rasterising text).
Finally a canvas can be saved into a png using the toDataURL method.
I am sure if you dig around the internet, you will find there are already some libraries for these sorts of things. Possibly some keywords to try would be "image editing library JS" or something of that sort. Developing the functionality on your own should be ok if you follow some examples online for how to do each individual bit. Hope this helps :)

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.

Flash based cropper like this, but with source or customizable?

I am looking for a Flash based image uploader with resize and possibly rotate function.
I have checked many possibilities, and the very best in simplicity and unser experience I found is Kroppr at a very affordable €29/license.
The downside is, it comes with encrypted PHP code to bind the product to a subdomain. That is understandable, but while I'm perfectly happy to pay money for a tool as great as that, and ready to sign all sorts of legal agreements to protect the license, I am not ready to use encrypted PHP code, especially not from an outlet that doesn't even have a postal address on its web site.
Does anybody know an Open Source or commercial solution that comes close to Kroppr and ships with source, or allow for full customization and free definition of the server-side backend?
The features in detail:
Rectangular selection to crop image, slider or similar to zoom
Optionally: Rotating
"Accept" and "Reset" buttons, "accept" triggers a call to the server and submits the image
Full visual customizability (at least background and text colours)
Possibility to rename all controls
The server side technology would preferably be PHP.
http://deepliquid.com/content/Jcrop.html i love this one, every easy to use and tons of features. i know your searching a flash cropper but this question is tagged with js too so....
I found these three image utilities during my search:
Flex Image Cropping Component
HOW TO CROP AND RESIZE AN IMAGE USED AS BACKGROUND FOR CANVAS
Building an image-viewing widget with ActionScript 3.0
The first one is an open source flex component using an MIT license. The second one is a how to,with full source available. It doesn't have a sizable box, but it seems ok otherwise. The last one is also a how to article from adobe.com with source available.
Here is a list of good javascript based croppers:
Yahoo! UI ImageCropper
Jcrop
MooCrop
UvumiTools
PHP & jQuery Image Upload and Crop
Here is a list of action script based croppers:
Flex Image Cropping Component
Image Crop
http://www.adylevy.com/index.php/2009/07/22/multiple-files-uploader-with-preview-on-client-side/
OR
http://www.resize-before-upload.com/
...took a bit of searching =)
I would take a look at the free pixlr editor and their developers API : http://pixlr.com/wiki/developer
I've used RadActive's I-Load component before, with great success. The UI customisation options are a little limited, but as far as functionality goes, I'm pretty sure it meets all your requirements.
EDIT: You don't specify what server-side technology you're using (if any). I'm pretty sure I-Load is designed for ASP.NET - this may or may not be an issue for you.
This is also a nice once and its only $10.
http://www.shift8creative.com/projects/agile-uploader/index.html
Still doesn't have image rotation/cropping. I most definitely do plan to add that, but after checking out all the things I could find I still wasn't happy. I researched out all the particulars and just ended up building my own. You're welcome to use it if you like and haven't found something else by now. Keep checking the link, I'll update it to include the rotation and crop feature along with multiple image uploads.
Something like this?
http://matrixoft.infunity.com/agents/calvin/tmp/forPekka.html
I'm perfectly happy to pay money for a tool as great as that
To carry out the responsibility of posting the answer for stackoverflow users, here is part of the crop image code:
var tNewImage:BitmapData=new BitmapData(mouseX-vCropX,mouseY-vCropY,true,0);
iImg.getChildAt(0).x = vSize/2 -vCropX;
iImg.getChildAt(0).y = vSize/2 -vCropY;
tNewImage.draw(iImg);
Where iImg is the movieclip containing the image with the image center positioned at (0,0) , vSize is the image dimension, vCropX and vCropY is the top left cropping coordinate. The tNewImage BitmapData is used for constructing the new Cropped Bitmap image

Categories