I am wondering if there is any library to enable me to upload big image on website and than create animation.
Animation description:
Show are is smaller let's say 300*300 and image uploaded is 1024*768 and I would like the animation to go around the image, zoom out a little, zoom in, etc.
I hope I was clear enough.
Thanks for answers
This can be easliy done with the jquery function animate:
jquery animate() doc
They have some examples in their documentation. You can either work in a div with "overflow:hidden" and put the image in that div or set is as a background image. animate() allows you to manipulate the css styles. Also, you can append animate() calls.
Related
I'm working on a basic design app where the user can upload images to a canvas, drag them around and resize them. The problem I have is resizing the image with a mouse drag. I'd like the user to position the mouse pointer on either corner of the bitmap image and drag either towards or away from the bitmap to resize it proportionally. I'd be grateful for any code or suggestions.
Lanny mentioned that you had this question here. ZIM, which is based on CreateJS has this functionality built in - it is called transform(). We also have an uploader built in called Loader().
Here is the code that you would use inside the ZIM template available on the code page at ZIM https://zimjs.com
const loader = new Loader().center();
loader.on("loaded", e=>{
e.bitmap.center().transform();
// or if you want multiple files
// loop(e.bitmaps, bitmap=>{
// bitmap.center().transform();
// });
loader.removeFrom();
stage.update();
});
Below is an image that has been loaded. You can try it here https://zimjs.com/explore/uploadresize.html. The transform interface will go away when the user clicks off the image and then comes back when they click on the image. There are various options for all of this that you can read about in the Docs available on the ZIM site.
All your regular CreateJS will work and you will find that ZIM is helpful in many other ways too! Aside from transform() there is drag() for normal dragging, and gesture() for pinch zoom and rotate - you would use one or the other of these not combined.
I want to show a preloader on my website before the content loads,However when i choose a animated preloader image with transparent background the edges look very jagged. How to I modify the image or is there a way to have a transparent background to animated gifs?
I am using the preloaders from preloader.net
The first and probably easiest option you have is to use spin.js. “It dynamically creates spinning activity indicators that can be used as resolution-independent replacement for AJAX loading GIFs.”
If a script is not an option or you want to have a different spinner you have to create a .gif with no anti-aliasing that is bigger than the spinner you want to use and scale it down with html.
Original spinner without edges (without anti-aliasing, therefore it has a pixelated edge):
But if this spinner gets scaled down, it looks nice:
Be sure to use
img {
-ms-interpolation-mode:bicubic;
}
to make it also look pretty in older IEs.
You can use a site that helps you generate your spinner. A great option is :
loading.io
First of all I will explain my situation so you can know my problem a little better. I'm making a HTML5 app. I have a canvas, and using a color picker you can change the color of the canvas. Now i have a picture which I want to put on the canvas but that pictures color needs to be changed using a color picker. So i need to replace, lets say, black color on that picture and put it on the canvas so it dosnt screw up the background.
So that will look like this:
1st color picker- changes the color of the canvas
2nd color picker - replaces the black color on the image with the one in the color picker and puts it on the canvas
Now my problem is how to replace the color on the image without reloading the page.
My only condition is no using silverlight, flash, java or any other similar tehnology that need 3rd party software to be installed on the device.
Thanks in advance.
If you dont understand my query fully, feel free to ask.
My approach with a JS only solution could be:
Loading the image inside a canvas element. Look at the MDC canvas tutorial
Trigger the user click on the canvas and get the pixel color (see links below to know how to get the color of a pixel) and look at this answer to get the mouse position
Substitute all the colors in the canvas with the one the user pick. For some examples about pixel manipulation:
Pushing pixel with canvas at Mozilla Hacks
http://beej.us/blog/2010/02/html5s-canvas-part-ii-pixel-manipulation/
This JS at mezzoblue apply heavy filter to an image
After some canvas experiment I notice that mostly in all the browser the pixel manipulation with canvas could be very slow also with small images. So another experiment to do could be to get the pixel color and then:
pass the color information to a PHP (or another server side script) with an AJAX call
do the color manipulation with an image library like GD or imagemagik
return back your image with the Ajax response
reload your canvas with the modified version of the image
Does anyone know how to use the Pixastic plugin and jQuery to where I could have an image fade from color to completely desaturated?
I am trying to avoid saving out two images and fading one out..
i did the inverse... having desaturated images fade in to color. achieved w/ only 1 image in conjuction w/ pixastic and livequery. i basically cloned the images, desaturated one of the copies, and stacked them on top of each other.... fading the top (desaturated) layer out on hover. i'm sure it could be more elegant, but it mostly works. you can see the effect at chicagointerhandball.org on all the "sponsor" logos
$('.sponsors').load(function() {
$('.sponsors').pixastic("desaturate");
}).each(function(index) {
var clone = $(this).clone().removeClass('sponsors').addClass('sponsors-color').css('opacity',.25);
$(this).parent().append(clone);
});
$('.sponsors-color').livequery(function(){
// use the helper function hover to bind a mouseover and mouseout event
$(this).hover(function() {
$(this).stop().animate({"opacity": 1});
}, function() {
$(this).stop().animate({"opacity": 0});
});
}, function() {
// unbind the mouseover and mouseout events
$(this)
.unbind('mouseover')
.unbind('mouseout');
});
Since all those pixastic image effects are generated on the fly I don't think it would be feasible to fade between saturated and desaturated. The saturation level of the image would have to be redrawn at each step of the fade. Your best bet would probably be to have two images, one saturated and one desaturated, and have them placed on top of one another. Then when you hover over one, fade in the other image.
Edit:
Just saw that you were trying to avoid having two images. Well, that's the only solution I can think of but I'd love to see if there were others. Depending on how many images there are, you could generate all the desaturated images on page load, place them on top of saturated images, hide them, and then fade them in on hover. Just a possibility.
you could get the best of both worlds by dynamically creating a duplication and desaturating that image with pixastic. Position the new desaturated image under the original and fade the original out.
You should be able to, it is in their jQuery documentation section.
// convert all images with class="photo" to greyscale
$(".photo").pixastic("desaturate");
Looks like this is possible with the canvas element.
With this you need to mix jQuery and the standard DOM calls. I was having the same issue just today about this. I couldn't get the hover to work cross platform from the examples given here and on their site. So I decided to think for myself on this one. Came up with a solution, hope it works for you:
http://you.arenot.me/2012/03/26/pixastic-desaturate-on-mouseover-mouseenter-mouseleave/
I have a dojo animation object of about 15 images. I'm also using dojo.fx.chain to link them all together.
Right before I create all my dojo.fadeIn's and dojo.fadeOut's I added in some basic javascript to preload each image.
My question is: Am I doing this the hard way or is there some function/attr I can set in the animation object to do this?
I do not think there is a predefined method in dojo to preload these images for your animation.
I guess you are listening image.onload and image.onerror events to preload images, it is a common method. If you feel it is too difficult and hard to control, you can try a simple clean css way that is to put an invisible div into your page and set background images with these animation images. When the page load, the images are automatically loaded.
dojo Animations are not specifically geared around images, they work on an abstract level and may operate on DOM nodes. So, there's no built-in support for IMG nodes specifically.
There is dojox.image.preload (http://api.dojotoolkit.org/jsdoc/HEAD/dojox.image.preload) which will do the work virsir suggested of loading images into an offscreen div, but it does not (currently) arrange an onLoad event hook for you to detect when they're loaded and thus play your animation.
I imagine you could use preload()'s return value and use it to hook into onLoad, but that's an exercise for the reader. Have a look at the source code, dojox/image/_base.js.