Phototype: image manipulation with Javascript
May 24, 2008Lately I had same crazy thoughts on coding a javascript wrapper to manipulate images rendered on the server-side. I decided to do some test which eventually resulted in phototype, a client/server-side library, based on prototype, which supports all kinds of image manipulations. On the serverside the library is powered by combination of PHP/GD that renders the image. With phototype, you are able to rotate, resize, flip and do some other cool effects to images. Let's start a quick tour.
Suppose we have a picture like this (randomly grabbed from Flickr):
First, let's reisize it:
l_oPhoto = new Photo(); l_oPhoto.resize({width:200}); document.body.appendChild(l_oPhoto.fetch());
Pretty nifty eh? Note that the resizing is done serverside because usage of GD. Ok, let's do some flipping:
l_oPhoto = new Photo(); l_oPhoto.resize({width:200}); l_oPhoto.flipV(); // Flip vertical, use flipH to flip horizontal document.body.appendChild(l_oImage.fetch());
And rotate it some degrees:
l_oPhoto = new Photo(); l_oPhoto.resize({width:200}); l_oPhoto.flipV(); l_oPhoto.rotate(3); // rotate 3 degrees document.body.appendChild(l_oPhoto.fetch());
Drop shadow and make sketchy..
l_oPhoto = new Photo(); l_oPhoto.resize({width:200}); l_oPhoto.flipV(); l_oPhoto.rotate(3); l_oPhoto.dropShadow(); l_oPhoto.makeSketchy(); document.body.appendChild(l_oPhoto.fetch());
Or, make it greyscale?:
l_oPhoto = new Photo(); l_oPhoto.resize({width:200}); l_oPhoto.flipV(); l_oPhoto.rotate(3); l_oPhoto.dropShadow(); l_oPhoto.toGreyScale(); document.body.appendChild(l_oPhoto.fetch());
Adding a caption:
l_oPhoto = new Photo(); l_oPhoto.resize({width:200}); l_oPhoto.rotate(3); l_oPhoto.dropShadow(); l_oPhoto.addCaption('Get ajaxorized!', '1942.ttf'); document.body.appendChild(l_oPhoto.fetch());
And finally, because we can't live without Chuck Norris :-):
l_oPhoto = new Photo(); l_oPhoto.resize({width:200}); l_oPhoto.rotate(3); l_oPhoto.dropShadow(); l_oPhoto.addCaption('Cheers, Chuck', '1942.ttf'); l_oPhoto.addChuckNorris(); // every library should have this function imo document.body.appendChild(l_oPhoto.fetch());
Chaining
Phototype supports chaining:
l_oPhoto = new Photo().load("test.jpg").dropShadow().flipH().makeSketchy(); document.body.appendChild(l_oPhoto.fetch());
That's it. I'm really looking forward to your comments, you can download the full package here, it's GPL licensed.
Add to:
[…] в JavaScript без cookiesPhototype - работа с изображениями в JavaScriptPhototype - интересный и вместе с тем простой клиент-серверный […]
Pingback by Phototype - скрипт для работы с изображениями в JavaScript | JSToolbox - все о JavaScript — May 24, 2008 @ 7:54 pm
One question - why? Ok, I would understand doing it just to get the kick out of it or to prove that you can - but can’t really see any use for it as it will allways fail when the user has JS disabled, and just manipulating the picture on the server and sending it to the user in the form we want it to be is better. Hell, even doing something like would make more sense.
Comment by BTM — May 25, 2008 @ 10:04 am
@ BTM,
I see your point, but javascript disabled? Besides that, it is easy to use this script unobtrusively. You can than load your original images, after which you replace them with the transformed ones. But, like I said: it’s just an idea of controlling image manipulation from the clientside.
Comment by Willem — May 25, 2008 @ 11:10 am
Cool, Nice API too.
Comment by Greg — May 25, 2008 @ 11:58 am
First I thought what’s the point then I realised this could be used as a nice simple javascript image editor. Nice work!
Comment by Anon — May 25, 2008 @ 2:46 pm
Hello!!
This is a really cool site and i love the tips and pics.
Thanks.
Jitendra
Comment by jitendra — May 26, 2008 @ 6:43 am
l_oPhoto.addChuckNorris();
Really though..
How do you add the watermark?
Comment by DocZayus — May 26, 2008 @ 8:20 pm
@DocZayus,
l_oPhoto.addWaterMark(’wm.png’, {position:’topleft’});
Is indeed a good idea
Comment by Willem — May 26, 2008 @ 8:35 pm
Good idea!
More server side implementations may be better, eg. Java/Perl/Python…
Comment by Ember — May 27, 2008 @ 6:30 am
[…] auf die nette JavaScript Bibliothek Phototype gestoßen, die mittels JavaScript und PHP-GD Bilder leicht beeinflussen […]
Pingback by Mathias Bank » Funktionen, die jede Bibliothek haben sollte — May 27, 2008 @ 8:07 am
[…] gibi özelliklerin yanında paralı resim editörleri sayesinde yapabilinen birçok efekti de resimlere bu kütüphane ile uygulayabilirsiniz. Kaynak haber: webresourcesdepot İlgili site: Ajaxorized […]
Pingback by phototype ile resimlere farklı bir tat katın « basarozcan — May 27, 2008 @ 12:15 pm
Great work Willem!
I think it should be pretty easy to port it to jquery or mootools.
Thanks!
Comment by Pablo — May 27, 2008 @ 1:46 pm
Good idea, but your php code is nasty…
In line 90, you should check for GD:
if(function_exists(’imagerotate’))
In line 65 add:
$sFontFile = dirname(__FILE__). ‘/’.$sFontFile;
This fixes the problem with include_directory seetings, which occurs on many hosts.
And the HTML file, this is unbelievable… you declare it xhtml-strict, did you double check that before releasing to the public?
Well beside these problems, a great idea and a well done snippet for further enhancements. Thanks for Chuck
Comment by Kevin — May 27, 2008 @ 2:48 pm
Adding watermark in javascript seems a bit dumb… It is after all client side, so if they want the image they just turn javascript off… Unless you use javascript to load the image, in that case the crafty image thief will have to work a bit for his theft (check the url the image loads from and then download that image)
So for watermarking, do it serverside on upload or before showing the image
Cheers,
Johan
Comment by Johan — May 27, 2008 @ 3:31 pm
Martijn and Willem, this is an amazing library and a great contribution to the OS community. Congratulations!
Comment by Juansa — May 27, 2008 @ 3:53 pm
Phototype: image manipulation with Javascript…
From
To
Lately I had same crazy thoughts on coding a javascript wrapper to manipulate images rendered on the server-side. I decided to do some test which eventually resulted in phototype, a client/server-side library, based on prototype, which suppo…
Trackback by Bookmarks.WittySparks.com — May 27, 2008 @ 4:31 pm
I think the idea is cool and you’ve done a good job with the implementation. But, if I may say, I don’t think I would use it in a production environment since just using PHP would be much faster. And, what if the user has JS disabled? Unlikely I know, but you never know.
Comment by Jamie — May 27, 2008 @ 5:20 pm
[…] recherche d’une bibliothèque particuliére de traitement d’image, je suis tombé sur ajaxorized.com. Et quelle fonction ont ils ajouté ? […]
Pingback by Cobolian » Blog Archive » Chuck Norris — May 27, 2008 @ 5:28 pm
This is fabulous. Thanks for sharing. And the addChuckNorris() function is inspiring.
Comment by Chris Boulton — May 27, 2008 @ 6:16 pm
[…] phototype, a client/server-side library, based on prototype, which supports all kinds of image […]
Pingback by Image Manipulation With Javascript - Opensource, Free and Useful Online Resources for Designers and Developers — May 27, 2008 @ 7:19 pm
really cool!
Comment by Edwin — May 27, 2008 @ 9:33 pm
[…] Vedi: Phototype […]
Pingback by DIGITALife » Phototype Javascript/PHP Image Manipulation — May 27, 2008 @ 11:49 pm
[…] Ajaxorized » Phototype: image manipulation with Javascript (tags: javascript prototype library graphics) […]
Pingback by links for 2008-05-27 « 個人的な雑記 — May 28, 2008 @ 12:40 am
[…] Ajaxorized » Phototype: image manipulation with Javascript (tags: ajax image prototype library) […]
Pingback by links for 2008-05-27 « toonz — May 28, 2008 @ 1:31 am
Thumbs up for your effort!
Nice idea and implementation.
Comment by Dragan Bajcic — May 28, 2008 @ 3:54 am
[…] Phototype: image manipulation with Javascript (tags: javascript) […]
Pingback by Skylog » Blog Archive » links for 2008-05-28 — May 28, 2008 @ 8:30 am
[…] Ajaxorized » Phototype: image manipulation with Javascript Phototype, a C/S library, based on prototype, supports all image manipulations. On the serverside the library is powered by combination of PHP/GD. With phototype, you are able to rotate, resize, flip and do some other cool effects to images. (tags: javascript ajax image prototype library graphics web) […]
Pingback by links for 2008-05-28 | Libin Pan — May 28, 2008 @ 8:32 am
[…] Оригинал и источник Phototype Так же можно почитать:Несколько вещей об Ajax, […]
Pingback by Блог Волотко Дмитрия - Это нормально © :: Entries :: Phototype: работа с картинками — May 28, 2008 @ 10:46 am
[…] se puede hacer con Javascript , PHP/GD y una buena idea? Pues Phototype, un script capaz de ayudarnos a manipular imagenes directamente desde Javascript, usando las promiedades de la extensión GD de PHP. Simplemente genial. Compártelo # « […]
Pingback by Manipulacion de imagenes con Javascript | aNieto2K — May 28, 2008 @ 1:26 pm
Nice work!
Comment by Mchilly — May 29, 2008 @ 7:49 am
Really Nice Work,
We love Chuck
Comment by Little Web Project Architect — May 30, 2008 @ 9:35 am
[…] Phototype is a client/server-side library, based on prototype, which supports all kinds of image manipulations. On the serverside the library is powered by combination of PHP/GD that renders the image. With phototype, you are able to rotate, resize, flip and do some other cool effects to images. Requirements: Prototype Framework Demo: http://ajaxorized.com/phototype-image-manipulation-with-javascript License: GPL License […]
Pingback by Easy Image Manipulation with Phototype | Trendguides Webapps Directory — June 4, 2008 @ 11:07 am
[…] Phototype, a client/server-side image manipulation library, supports all kinds of image manipulations. On the serverside the library is powered by combination of PHP/GD that renders the image, on the clientside Prototype is used. With Phototype, you are able to rotate, resize, flip and do some other cool effects to images. One could compare this to swIFR, but then redone with PHP/GD instead of Flash Spread the word! […]
Pingback by Bram.us » Phototype, a client/server-side image manipulation library — June 4, 2008 @ 1:34 pm
For some reason I am not that big of a Chuck Norris fan, however that addChuckNorris() function sure could come in handy!
Great concept!
Comment by Kim Steinhaug — June 4, 2008 @ 4:16 pm
Very nice work! Im glad you thought of the chuck norris function, its essential!! i suggest you add insertGoatse() too.. just a suggestion lol
Comment by Alejandro — June 4, 2008 @ 5:39 pm
[…] Image Manipulation with Javascript Ajaxorized » Phototype: image manipulation with Javascript […]
Pingback by i love innovation — June 4, 2008 @ 6:03 pm
Nice tool, I’m not sure why you are using Prototype though since you don’t use it’s syntax in an optimal way. With a bit more sugar on the options you could do:
$(document.body).insert(new Photo({ width: 300, rotate: 90 }).fetch());
Comment by Nick — June 4, 2008 @ 7:47 pm
@BTM - i have never recieved an email from visitors that my javascript isn’t working because JS is disabled. isn’t the stat for that like 1% of the users out there have it off?
i don’t even consider that a problem anymore. if they have it off then almost every site out there will fail for them.
Comment by Chris — June 4, 2008 @ 8:41 pm
Now anyone can buil a nice web interface to send commands for backend to process images?
Comment by Carro Brasilia — June 4, 2008 @ 11:43 pm
Chuck is IMbah!
Rest is just a nice way to make it complex, simple ajax calls (wich require prototype and one function could do the trick. (i called mine sendRequest( );
SendRequest(’/url/imagemanip/123/rot/left/’, ‘divname_o_image’);
And let php do the rest, like u already do.
Comment by Codestream — June 5, 2008 @ 9:57 am
[…] Phototype is a client/server-side library, based on prototype, which supports all kinds of image manipulations. On the serverside the library is powered by combination of PHP/GD that renders the image. With phototype, you are able to rotate, resize, flip and do some other cool effects to images. […]
Pingback by Glamour’s Blog » Blog Archive » Easy Image Manipulation with Phototype - 迷人的美.魔术般的魅力.这就是Glamour… — June 5, 2008 @ 4:29 pm
[…] ausgeführt. Dort Bildbearbeitung zu betreiben, erscheint zunächst fragwürdig. Mit PhotoType geht das, wenn auch mit Hilfe eines kleinen PHP-Scripts, welches die Berechnungen auf dem Server […]
Pingback by Bildbearbeitung mit Javascript | Javascript | Dr. Web Weblog — June 6, 2008 @ 6:59 am
nice idea
would be cool for searching the right options for serverside img manipulation on uploaded pictures in a cms
and i try to add “addChuckNorris();” to many libs as i can
Comment by Martin Holzhauer — June 6, 2008 @ 10:22 am
[…] Gefunden unter http://ajaxorized.com/phototype-image-manipulation-with-javascript/. […]
Pingback by Long live Chuck « Absurditäten des Alltags — June 6, 2008 @ 5:26 pm
Nice idea!
Comment by Manuel — June 6, 2008 @ 11:30 pm
Wow! This is cool.
Comment by taylan — June 7, 2008 @ 10:51 pm
[…] segnalo un’utilissima risorsa per poter creare degli effetti alle immagini attraverso l’uso di una libreria chiamata […]
Pingback by Effetti sulle immagini con javascript: la libreria phototype. | Andrea Vit 's blog — June 8, 2008 @ 5:11 pm
[…] Phototype is a client/server-side library, based on prototype, which supports all kinds of image manipulations. On the serverside the library is powered by combination of PHP/GD that renders the image. With phototype, you are able to rotate, resize, flip and do some other cool effects to images. […]
Pingback by CSS Dev Kit » » Easy Image Manipulation with Phototype — June 9, 2008 @ 7:40 pm
Never knew you could do so much with Javascript. Hm, thanks for the reference I will certainly put it to good use.
Comment by Website Design — June 10, 2008 @ 8:45 am
There’s a logic error in l_oPhoto.addChuckNorris():
Chuck Norris could in no way shape or form be considered something’s property. Nor could he be considered it’s child. A more perfect syntax would be:
ChuckNorris.blessWithPresence(l_oPhoto);
We must also avoid possible fear implications or improper use references. Chuck Norris runs from nothing. One does not “include” or “use” ChuckNorris(). Methods should instead call:
ChuckNorris.queueManager(humbleRequest)
as ChuckNorris() should always be referenced as a Global Entity.
Bad:
#include ChuckNorris;
public Movie BadFilm : ChuckNorris
{
this.addChuckNorris();
}
Good:
DECLARE Function BlessWithPresence “ChuckNorris.dll” Alias “Join” (byref humbleRequest) as Bool
GlobalObject ChuckNorris = byref GlobalObject();
public Movie GoodFilm : EntertheDragon
{
Money humbleRequest = Money.maxValue();
ChuckNorris.queueManager(humbleRequest)
ChuckNorris.requestDenied += new MovieDisposeEventHandler(this);
ChuckNorris.requestApproved += new MovieGenerateReturns(this);
}
private void MovieDisposeEventHandler(object sender, requestDeniedArgs e)
{
sender.Read(e);
ChuckNorris.roundHouseKick(sender);
self.Dispose();
}
protected Money MovieGenerateReturns(object sender, requestApprovalArgs e)
{
sender.Read(e);
ChuckNorris.blessWithPresence(sender);
Money FatCash = Money.maxValue();
ChuckNorris.Pay(FatCash);
sender.disposeEvent += MovieDisposeEventHandler;
sender.Dispose();
}
Let me know if you have any questions.
Comment by Stephen Kraushaar — June 10, 2008 @ 7:56 pm
Impressive, especially Chuck Norris
Comment by Informationeel.nl — June 11, 2008 @ 12:16 pm
Hey Kevin
We’re all very impressed with your PHP diagnostic skills — but honestly, who gives a FF? This is a blog entry about JS photo manipulation, not PHP coding standards or XHTML declarations.
I’d sure hate to be your kid. “Dad! I got an A in Geology!”. “That’s pointless, son. Why are you studying rocks?”.
Comment by Mike — June 12, 2008 @ 1:12 pm
Is this an application where a person could take a clients 1M file and size it up to 17m for a large image application demand? I am asking in that I am wanting to work on a website where clients load their own image files and wish to receive things as large as shower curtains or small wall graphics.
Comment by Awman — June 13, 2008 @ 3:56 am
the image manipulation is done in php, correct? how is this js image manipulation? sorry if I’m wrong
Comment by jon — June 13, 2008 @ 9:04 am
Very cool! I didn’t knew you can do this with Prototype.
Thanks for sharing!
Comment by jbj — June 14, 2008 @ 10:08 am
[…] a client/server-side library, based on prototype, which supports all kinds of image manipulations.http://ajaxorized.com/phototype-image-manipulation-with-javascript/Serverlist - Counter-Strike 1.6200.49.147.14:27015, Alkon CS1.6 5 - WCG Alkon 2008, 10/11 … […]
Pingback by cs 1 5 servers — June 14, 2008 @ 11:51 am
That is fantastic, not seen anything like it before. Just trying to think of how to put it to use on a site! The rotate function is particularly ace - defniately want to work that one in.
Comment by UK — June 15, 2008 @ 9:14 pm
Stephen Kraushaar, you are my hero. well, second to Chuck Noris, of course.
Comment by Daniel — June 16, 2008 @ 9:16 am
Wow I really like this idea - Saving to my favourites
Comment by Emma — June 17, 2008 @ 12:39 pm
To all the people saying there are better ways of doing it…blah…blah..blah. Suck eggs folks. You learned how to get your opinionated arse out of bed in the morning and other people will too. So as to what the “best way” is…bite our collective hiney. The best way is the way that gets it done. Now.
If you spend forever mulling over, “oh my, should I do it this way? oh my, what if they have javascript turned off? oh boo hoo, what if they rip off my images? wah wah wah!” …bleck! Your best way turns in to no-way. There are so many ways of doing things in software and computing (including farging IT and farging WINDOWS: yes fuct-chop I’m pointing at you!) that people who bitch about doing something “the best way” are really just trying to get you to do it THIER WAY. Fark off you farging bastiches.
For the gadam record: I HAVE NEVER SEEN JAVASCRIPT TURNED OFF…ANYWHERE…AND I SUPPORT HUNDREDS OF SERVERS AND THOUSANDS OF USERS ACROSS THE US AND CANADA!!!
I wish I could write that on a piece of paper, wad it up and shove it down the throat of anyone that tells me I need to plan for javascript being turned off. Farking prove it shitebag.
Comment by Joe — June 17, 2008 @ 5:55 pm
Oh, and another thing…
After having authored dozens of web apps using plenty of javascript…NO ONE has ever, NOT ONCE said they couldn’t see or use any part of my app because they had javascript turned off.
I REALLY think that argument is idealistic crap and I hope web developers read my comment and “get it”. Build your UI good, take advantage of the tools and platforms and people will follow you. I did it. Now I’m rich but that’s for my own blog post. Whew, got that out of the way…thanks for listening.
Comment by Joe — June 17, 2008 @ 6:01 pm
I would just like to
a) Offer my Amen to Joe and b)Seeing the numerous avenues that lie before us I think it best that we explore them all. By doing so we not only find innovative new techniques but also help to level the playing field for old and new languages.
b) Offer Willem this link: http://ejohn.org/blog/processingjs/ . Resig has been doing some really amazing things with javascript and the canvas object that I think you would find very interesting.
c) Thank Daniel. You made my day man.
Comment by Stephen Kraushaar — June 19, 2008 @ 4:08 pm
@ Stephen: I think we should co-op
@ Joe : Agree on a lot of your points.
@ Everyone: Thanks for your support again. And as the first line of this post says, the transformation itself is indeed not done by javascript/clientside but with PHP. I agree with some of you that this causes some disadvantages, but againg, let this script be inpiring to ‘what is possible’.
Willem
Comment by Willem — June 19, 2008 @ 4:37 pm
[…] JavaScript ile resimlerinizi çevirin, kırpın, gölgeler ekleyin… kısacası çılgınca işler yapın. Müthiş zevkli bir çalışma. Bağlantı… […]
Pingback by Surf Raporu 26 Haziran 2008 | Taylan Aktepe — June 26, 2008 @ 3:48 pm
[…] Ajaxorized has released a GPL licensed image manipulation script called Phototype. Phototype is a client/server-side library, based on prototype, which provides image manipulation […]
Pingback by Image Manipulation with JavaScript | Ajaxonomy — June 30, 2008 @ 6:45 am
Phototype: Bildmanipulation mit JavaScript…
Mit Phototype kann man Bilder mit JavaScript bearbeiten.
Eine Liste mit den Funktionen gibt es in einem Blogeintrag bei ajaxorized.com.
Link ajaxorized.com
……
Trackback by benjamin-bayer.com — June 30, 2008 @ 5:58 pm
[…] Phototype: image manipulation with Javascript A client/server-side library, based on prototype, which supports all kinds of image manipulations. On the serverside the library is powered by combination of PHP/GD that renders the image. With phototype, you are able to rotate, resize, flip and do some o (tags: ajax webdev webdesign images javascript tutorial) […]
Pingback by links for 2008-07-12 « Mandarine — July 12, 2008 @ 6:34 am
[…] http://ajaxorized.com/phototype-image-manipulation-with-javascript […]
Pingback by Manipular imágenes con javascript | Vete a la Web — July 29, 2008 @ 3:54 am
[…] I find this: Ajaxorized has released a GPL licensed image manipulation script called Phototype. Phototype is a client/server-side library, based on prototype, which provides image manipulation […]
Pingback by clue free » Blog Archive » Just Add Chuck() — August 1, 2008 @ 7:55 pm
[…] Phototype es un impresionante script de manipulacion de imagenes, que nos permite rotar, hacerla en escala de grises, agregarle sombras, agregarle texto, y hasta agregarle una marca de agua de Chuck Norris. […]
Pingback by iGeek » Un poco de Prototype.js - Parte 1 — August 1, 2008 @ 10:06 pm
thats incredible, the size of Chuck Norris’ arms i mean!
Comment by seo company — August 15, 2008 @ 9:58 am
Wow. I’ve never seen such class oO
Comment by Paul Selitskas — September 6, 2008 @ 8:40 pm
bloooody helll !!! cant believe u did all dis with js.
Crazyrahul84
| Designer | http://www.iexplorehere.com |
Comment by Jatin Kaka — September 7, 2008 @ 12:55 am
[…] Phototype est une bibliothèque de manipulation d’images (client/server), basée sur le framework Prototype et permet toutes sortes de manipulation d’image. […]
Pingback by Phototype - Manipulation d’images avec JavaScript / PHP.| Webmaster - Ressources et outils gratuits pour votre site internet - Free Tools| Free Tools, Le meilleur des outils gratuits pour webmaster — September 8, 2008 @ 2:09 am
l_oPhoto.addChuckNorris();
Comment by x — September 19, 2008 @ 11:17 pm
Hi threre,
I like this one! Chuck lives 4ever. No - this is really amazing stuff out here. Thank you for sharing your knowledge with us!
Best Regards,
Milos
Comment by Milos — September 20, 2008 @ 10:35 am
Hi all!
Really appriciate all of your comments. Keep them coming and keep visiting ajaxorized or subscribe to the rss.
Cheers,
Willem
Comment by Willem — September 20, 2008 @ 1:37 pm
Hey. This is a russian translation of your article
Comment by Paul Selitskas — October 17, 2008 @ 3:35 pm
[…] Phototype: image manipulation with Javascript […]
Pingback by 我想网 » Blog Archive » Phototype：处理图片的JS脚本 — April 9, 2009 @ 4:34 am
Awesome use of Chuck Noris in this example! I’m definately going to be using this on my South Wales Soul Band website
Comment by Wedding Soul Band — April 13, 2009 @ 10:47 am