I would like to display image downloaded from specific URL using jquery ajax. How can I achieve it? (without setting image .src) I also need to rotate and scale that image.
You can create a <canvas> and populate it with an image. When loaded, the image can be rotated, scaled, drawn on, etc.
Here's a good tutorial that does exactly what you need.
In order to get this running in IE, I suggest using ExplorerCanvas.
To prevent the flicking of the image, you could first hide the image before loading and show it after the src have been loaded.
$('<img>').hide().attr('src', 'img_url').onload(function() {$(this).show()});
To rotate or do other mutation on the image, I sugguest use the Pixastic Library which is compatible across browsers.
Related
I would like to put a Slider inside an image (specifically an iMac), like they have on unbounce homepage. I think I need a div and then jQuery, but I have no idea where to start.
The thing is the image inside the Mac changes, but not the iMac image itself.
If that helps, I am using WordPress, so I could use any plugin too.
Do you have any idea on how to do that?
Thank you,
http://i.stack.imgur.com/HVe98.png
I would suggest you to use HTML canvas for complex image rendering.
You can potentially dynamically draw what you want, where you want I'm them.
You can use canvas to rotate, move, overlay images and add listener to click events to it.
See here to start :
Dynamically add image to canvas.
Or here:
Dynamically add image to canvas
Late, but may be helpful (by increasing level of difficulty):
Use the iMac image as a frame PNG, leaving its inside "empty" using transparency. Behind it, the slider
Make a slider which every image is framde by the iMac
Position an slider hovering the iMac image
I want to get a displayed, big image and resize it by drawing it on a canvas.
I found the following fiddle:
http://jsfiddle.net/AbdiasSoftware/v8app/
Exisitng
This seems to work great since i want to use it to resize images and store them later on.
However, when i try to use it with my already uploaded images i get awkward behavior:
Result with my img:
Thanks
Link to the image: frankh.ursa.uberspace.de/img/34.png
I'm want to load images of products in a website with an animation of an hexagon grid
Hex_loading DEMO
I would like to know what is the best way.
I've read about inserting a gif, but I think image quality wouldn't be good; or video, but I don't know if it's to much for what I want (also I would have to load directly images for mobile devices).
Is there any other tecnology I'm missing out that would be a better fit for what I want?
Thank you in advanced
I don't think there is a way to change the loading pattern. But you can wait for the image to be loaded and then play an animation.
I suggest using a html5 <canvas> element to animate the images.
I need to copy multiple selected areas from multiple images, paste them on another div to build a new image ,crop it. And finally save it on server.
To achieve that I'm looking for a JQuery plugin that can perform select/Zoom/Copy/paste/crop on an image.
I already looked over the internet I found only some plugins like JCrop, but they can perform only crop on one image with no zoom...
Check this out: jwindowcrop plugin
With Iviewer jquery plugin you can do the extra work you need zoom and rotate images.
Iviewer is a jQuery UI based jQuery plugin that allows you to zoom in/out, rotate and move images in area by the mouse on your web page.
DEMO site here
I need my site to be able to resize and crop an image based on the viewport on a browser. I've so far managed to dynamically resize it with an imagemap, but can't seem to crop it dynamically. I'd like it to crop and scale simultaneously without distorting an image. The image I'm using is 1920x1080 which is far bigger than most browsers so cropping the edges while scaling would make it appear similar on different browsers.
I use this jQuery plugin quite often. :)
http://srobbin.com/blog/jquery-plugins/jquery-backstretch/
It sounds like you can already detect the viewport size somehow. You just need the CSS or javascript to crop an image. In that case, I'd recommend this article:
http://cssglobe.com/post/6089/3-easy-and-fast-css-techniques-for-faux-image
You could
1) Use negative margins.
2) Absolute position the image in a smart way.
3) Use the CSS clip property.