We currently have a system for cropping images that uses jCrop on the front-end, and System.Drawing in .NET on the backend - this works very well, but now we need to introduce image rotation. Only 90 degree angles are needed, and jQuery.Rotate works fine in isolation, but I would like to combine these two jQuery plugins gracefully. Do you have any experience in this area? Are there "shake & bake" solutions?
I suggest rotating the image server side. You really can't combine jCrop with a rotated image, since a CSS-based method would 'lie' about the width and height.
It can be extremely fast. Your UI would simply add 'rotate=90' to the image querystring when the button was clicked, and the image would reload.
Here's a very simple example of using jCrop and querystring-based resizing.
Take a look at the demo page to see how responsive it is - adding the rotate command would only take a few lines of javascript. If you need it, I could upload a sample of how to combine them.
I know this is an old question but, have you checked this jQuery plugin called CropIt?
The demo looks very good and you have zoom, crop and rotate in the same plugin, no backend code required.
Hope this helps.
Since the two plugin-ins operate in very different ways, I don't think you can readily combine the two. jCrop simply allows you to define a rectangular marquee over an image. Rotation, on the other hand, either uses <canvas> to actually rotate the image or the DXImageTransform filter to show it rotated (not actually rotating the source image.)
I think jQuery pipe-lining is the answer for any jQuery plugin
for example:
$("image").rotate(foo).crop(foo);
you may try jquery CropZoom:
http://plugins.jquery.com/project/CropZoom
Demo and downloads here:
http://www.gastonrobledo.com.ar/cropzoom/index.html
Related
When i was surfing on the internet, i saw this : http://www.enter-the-void.co.uk/#/menu
Have you got an idea about make this with jquery / html5 ?
Thank you in advance.
EDIT :
Finally i think the best way is use this method :
Create a container div with height 100% and width of 1200px per example
Create and fix on this container many little div
With jQuery get mouse position and move the container div at right or left
When the container moving add "perspective" style with CSS 3D transform on little divs
What do you think ?
Obviously, there are several creative way to get at this. BUT, as of right now, no browser supports 3d rendering natively. However, webkit, opera, and mozilla do support 2d rendering
What this means is that through javascript and css solely you can create the appearance of 3d. But beyond what has been already mentioned (WebGL, three.js library, canvas tricks), no browser supports 3d rendering.
Read my year old blog post about this: Simple '3D' Rendering With CSS3 and Javascript
Off the top of my head, Three.js could help you with that. Its a javascript library for rendering 3D objects. The objects themselves wouldn't be too hard I guess; a bunch of flat surfaces with custom textures. The camera might be harder to accomplish though.
You Can Use Webgl or canvas for Make This Effect
Like rory mccrossan said in the comment.
check for jquery parallax, thats exactly what happens on the into the void site.
put your divs on differnt parallax layers and see the magic happen ;-)
http://stephband.info/jparallax/
https://github.com/IanLunn/jQuery-Parallax
http://www.sequencejs.com/themes/sliding-horizontal-parallax/
I'm curious if it's possible (either with canvas or with CSS) to place a mask over a JPG or PNG to make some part of it transparent. Specifically, I want to define a circle over the image, and for the pixels within that circle to stay opaque, but for all the other parts of the image to become transparent.
I'm Java this is a fairly straight forward operation, but I'm not finding any analog in Javascript and am wondering if this is simply not possible.
TIA
Just check this -webkit-mask tutorial from css tricks.
CSS
.circle-mask {
-webkit-mask-box-image: url(mask.png);
}
RESULT
Related links:
CSS3 -webkit-mask property.
Using an Image as a Mask
-webkit-mask-image
You can also use the mask tag from SVG, to actually place images of circles with different gradients, do tell if this helps?
You can use SVG filters to create something like a »blend mode«. You can use i.e. Inkscape to compose these effects. If you become familiar with the syntax you can create a lot of effects. Perhaps you can post an image of the desired effect, than it should be more easy to see what can be done. There are also some js libraries to make certain effects with images.
Is there a way to manipulate an image(crop) using javascript in IE? I know that I can do this with some ActiveX controls. But is there a pure javascript way? May be with filters are any special api provided by Internet Explorer?
It depends upon what you're trying to do. You can use a containing div with overflow set to hidden and a constrained size to clip off any portion of an image and only show a desired crop. If the geometry is known ahead of time, this can be done with pure HTML/CSS. If you need to calculate the size, then sizes, positions and CSS properties can be set with javascript.
Demo: http://jsfiddle.net/jfriend00/QsHy7/
You can use Jcrop with the jQuery library. (info, download page)
You can also take a look at iCropper: http://github.com/supnate/icropper which is a pure javascript image cropping solution. It doesn't depend on any library which makes it fast, light-weight and easy to integrate.
First of all, I'm very new to javascript. I'm trying to develop a javascript function which takes an image and returns a cropped version of that image. By looking around on google I've found that I probably need to use a canvas in some way to accomplish this task. But does that mean I have to display the image on my page?
I've also looked at different javascript image processing libraries for a similar function, for example Pixastic's Crop, but I have no idea how to use it to solve my particular problem. So now I'm turning to you guys for help. Please guide me in the right direction!
Thanks!
Pixastic's Crop solution seems easy to implement and uses the canvas. It would do the job as long as you don't need to support Internet Explorer 7 or 8.
Otherwise, you can simply use CSS overflow:hidden; to do a client side cropping.
Pixastic Solution: http://www.pixastic.com/lib/docs/actions/crop/, check out the Example Code tab.
Here is a working example for Pixastic and the CSS solutions: http://jsfiddle.net/EB6P7/1/
I used the jQuery plugin for Pixastic.
--
If you don't need to save the image on the server side I recommand using the CSS solution as it doesn't rely on Javascript and achieve the same result as Pixastic.
If there's anything you don't understand, ask me as I don't know your level in HTML/CSS.
Well if your problem is only cropping and not saving the cropped image, the simplest solution I would say is to position the image using CSS inside a div and show only the cropped area.
If you want to save then I wish you need to use some library on the server side to crop and save
Maybe the CSS Clipping feature is a solution for you?
#someImage
{
clip:rect(50px 100px 130px auto);
}
I need a simple image rotator that rotates images by fading, centers vertically and is accepted by most if not all browsers. I however need to be able to customize the arrow images and place them anywhere i like. Anyone know of one?
If I try to visually show you what I need it would look like this.
< -- My back button [ image ] My next button -- >
I use jquery :) I've given plenty of rotators a shot already but they don't accept images of varying sizes or are not customizable.
If all you need is image rotation, why not do it yourself?
It's only a few lines of jQuery and infinitely customizable. :)
Example:
http://jsfiddle.net/jtbowden/UNZR5/1/
I generally like to stick to using this one: http://jquery.malsup.com/cycle/
It can be as simple or as complex as you need, and is highly extensible. They also provide heaps of examples for what can be done with it.
Example with next/previous buttons here: http://jquery.malsup.com/cycle/int2.html
Have you tried http://aviathemes.com/aviaslider/? It is customizable and is amazing.
Use jQuerytools scrollable by flowplayer. Very lightweight, flexible and they offer a CDN link to there js files so you don't have to load it from your server.
Scrollable http://flowplayer.org/tools/demos/scrollable/gallery.html
Make sure to try out all there available scrollable examples.
CDN links can be found at http://flowplayer.org/tools/download/index.html