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.
Related
This is my first time working with SVG files and I wasn't able to google the answer for this question. I have a .svg illustration created from Adobe Illustrator. I want to load this image into a web page and be able to manipulate it with javascript. Is there a javascript library that allows me to do this? The library has to work on current mobile devices. Fantasy code that illustrates what I'm trying to do:
<img src="pic.svg" id="pic"/>
$('#pic').rotate('90')
$('#pic').scale('200%')
$('#pic').move(x, y)
I know you can manipulate DOM elements like this using javascript, but will the svg image be scaled without distortion? Also, I think SVG has other fancy transformations that javascript doesn't normally support. Ideally, I'd want to use those too.
If you incorporate your SVG graphics with <img>, you'll be able to do exactly the same stuff as with any other image format - no more and no less. (The only benefit might be that you can change width/height without losing crispness.)
If you want to transform or otherwise change any elements of the SVG itself, it's a good idea to make the SVG inline. Maybe this answer helps. If your SVG was generated by Illustrator, cleaning the SVG might drastically decrease the file size and make it more friendly for JavaScript manipulation.
If you stick with <img>, you can still use CSS3 transforms (see the specs for an exhaustive description).
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'm working with Javascript/jQuery and I'm trying to figure out what is more advantageous. I want to draw a single line which will be dynamically, according to events, changing its own height, it will have just 1px width and it will be flashing on the site. Should I create just ordinary div with width of 1px or draw a line with some javascript library function?
Using a native element will always be faster than implementing a custom version on your own. Elements are created by the browser's own executable code while anything you create will be done through its interpreter.
I would just use a div as you know it is cross browser/mobile browser compatible. If you use some sort of javascript library function, then you might find that it doesnt work in certain browsers/browser updates.
Also it gives you the advantage of styling with css which again is cross browser compatible.
HTML/CSS is definitely faster although you might not be able to achieve what you want with it.
If u use canvas or some svg library to draw line , then it will be much cross browser compatible..
Also it will take much more processing ...
So it would be better to use div for this purpose ...
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.
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