I'm trying to dynamically make a kaleidoscope pattern from a source image.
You can see an example in Flash here: http://www.maegpai.com/mademyshirt/tool/ (click an image to start).
I want to create the same effect using either HTML Canvas, CSS (masking) or ImageMagick and PHP.
What would be the best way to create something like this besides Flash?
I'm not concerned about older browsers, if I can get this to work in Safari and Chrome that will be enough.
Here is a CSS one: http://bl.ocks.org/abernier/raw/9070122/ code can be found here: http://bl.ocks.org/abernier/9070122/
If you want it done quickly with the least amount of work on your part, use ImageMagick and PHP, the script is already written for you.
If you want to show off your mad skillz, I'd go for CSS (masking). That seems difficult to me.
If you want to get attention, go with HTML5 Canvas. Everyone thinks it's cool.
Related
I want to know how to manipulate pixels like what we can do within the C# code in JavaScript with Phonegap lib.
I am not sure whether it is possible. So far what I have found is nothing related to image processing in the Phonegap library.(It does provide Image, Capture helper to do something, but it's not enough.)
When I say manipulate pixels it's not about the simple methods like crop, resize, rotate etc. it should down to the level of having access of individual pixels in an image so more complicated computation can be conducted.
Thank you.
PS:
guys thank you for leaving "-1", please give your reasons at the same time. thx
Since is javascript, is done the same you would do it on a browser: using <canvas>
Here is fastCanvas, a phonegap plugin for using it. I haven't use it, but I hope is actually useful.
#chris is right. Because you're running Javacript you can use anyway JS libraries that you used on desktop.
For example, I use CamanJS (http://camanjs.com/) to apply some filters in my Phonegap App. It's easy to use and works well.
But don't forget that you are running JS on a mobile device. Mobile devices haven't the same computing power as desktops...
I am looking for the simplest way to make my page appear in greyscale.
I have found plugin (http://james.padolsey.com/demos/grayscale/), but it has some cons, eg. it doesnt handle background images well.
Do you know any alternatives or updates to this tool?
You could try working with a filter:
http://www.html5rocks.com/en/tutorials/filters/understanding-css/
but this might not work on all browsers, certainly doesn't work on old ones.
If you want a cross-browser solution, you'll probably have to rely on javascript
Here's some solutions that I got as answer to one of my questions:
Grayscale.js
jQuery GreyScale plugin
Hoverizr
Do it with canvas (tutorial)
I have used Grayscale.js and it worked ok for me but you could try the other three.
I have written a Javascript/jQuery script. Its purpose is to serve as a responsive background image slider.
It is viewable here:
http://new.upserver.co.uk/rbis/
My question is this;
While the code functions correctly, it can be slow/laggy. Especially when additional animation related plugins appear on the same page (i.e. nivoslider).
I have seen many similar sliders that handle chunky images perform effortlessly and am concerned and wondering how this code could be optimised to perform better? the javascript in question is located in file http://new.upserver.co.uk/rbis/rbis.js
Many thanks for all suggestions.
Regards
jQuery animate is rarely the right tool for providing animation. Take a look at this rather contrived example I produced recently: http://css3.bradshawenterprises.com/demos/speed.php.
I would recommend using CSS transitions in normal browsers, and only using the old way of doing it using javascript in old browsers.
A good way to do that is to use something like http://playground.benbarnett.net/jquery-animate-enhanced/, though I have had some issues with that, and instead use my own methods of doing it.
I'm looking into a solution for work, where you have a two page spread of the book to preview. Either side of this, you can hover in the corner to create a pseudo-flip and then click the mouse button to actually turn the page. I know there is many Flash solutions out there, but in this case we cannot use it... So we are looking for a possible solution that can work across all major browsers (yes, including IE6)...
I looked a few canvas solutions, but with Google's canvas extension for IE, these will terribly slow. So was thinking about an SVG/VML solution, like Raphael Javascript library. This could be good, but then trying to look into how to code this, without examples, could be a challenge with the time constraint.
Is there a solution out there that fits (or almost fits) this problem?
How about the SVG Flip solution by Paul Brunt? It seems to do exactly what you ask for, using svg and javascript.
Here are a few demos for different browser generations:
Book flip via CSS3 transforms
Book flip via CSS2.1 absolute positioning
Book flip via DHTML
Need a webpage which displays an image for x number of seconds and then fades into another image which also contains a clickable link.
How do I achieve this with javascript? I know this can be done in Flash but it needs to be iPhone compatible.
Checkout the jQuery Cycle Plugin for a Master's Class on manipulating images with JS for galleries and such. Well written, well documented.
Many other good ones out there. Luke, Use the Source! and learn.
The best way I know is to use a library like jQuery. From what I understand iPhone supports jQuery.