I have a web page which displays a large image, for example a page from a magazine. I have no control over the image size or orientation. It's possible that the image may need to be rotated by the user to orient it correctly.
Are there any Javascript or Flash solutions that will allow someone to rotate and zoom a given image? Ideally I'd specify a single image and the dimensions to use when displaying it. If the image is larger than those dimensions, the user could zoom in and view a portion of the image in greater detail.
I've seen a couple of solutions for rotating images with straight Javascript and CSS. Raphael would do the trick. There is apparently even an example featuring rotating an image. (it uses SVG but is support on all major browsers)
This one is not cross browser, but is an interesting exercise nevertheless.
As for flash rotation etc...
For rotating images, I used jquery-rotate and it works very well.
It is not totally cross-browser, it doesn't work with IE6 (and probably other old browsers).
For zooming, I guess you could make your own implementation using javascript, you can just resize the image (easy with jQuery).
Related
I am building a web-based image editor, and everything seems to work fine until very large images are uploaded (>5mb), and then operations like adjusting the brightness using a slider takes a while to reflect. The issue is quite obvious, and that is because I have to loop through each pixel (step of 4) in context.getImageData().data in order to modify each pixel value.
I checked out a couple of already existing online image editors, and theirs seem to work pretty well without lags.
Initially, my first step was to resize the image to fit the canvas on the screen which worked fine without lags, but why I switched to modifying the original image size was because the original size does not change compared to the one on the screen which changes if the user resizes the screen (or if chrome displays the currently downloading bar at the bottom of the browser), and since it is constant, I can always keep track of all editing operations, and then display on the screen by basing scaling down to fit the screen.
I'd love to know how I can optimize for large-sized images, without losing the quality of the original (due to resizing etc). Thanks!
[UPDATED]
This was copied from a comment under this post.
"JavaScript is not suited for image pixels editing. That is what the GPU is for. Most image manipulation needs can be done using filters, standard 2D canvas as they use the hardware designed for the task. If you have custom PX manipulation needs then WebGL is the solution."
vI know to some extent this is a known issue that has been asked here but never answered, but I'm hoping for some additional insight.
I have a simple SVG image in a div on a web page. I want to be able to zoom the image using pinch gestures and have the SVG render sharply. It doesn't need to be sharp during the zoom, but should be sharp after the gesture is complete.
I'm doing my testing on a Windows 8.1 computer with a touch monitor, on an iPad, and on an old Android Galaxy Tab. On the main computer, I'm using IE11 and Chrome. For handling touch gestures, I'm using Hammer.js. I'm doing the zooming by modifying the transform CSS using the jQuery css() function (I'm setting scale3d and translate3d).
IE11 on my computer works exactly like I would like it to. It keeps the SVG image sharp throughout the pinch zoom and the image is always sharp regardless of when I set the CSS.
Chrome on my computer always renders the SVG blocky when I am zoomed in using pinch zoom. It is blocky during the zoom and does not get sharp afterwards. If I add a call to zoom the image after the page (x13) is loaded, the image is sharp. If I use a setTimeout() call to reset the zoom and then rezoom the image after the pinch zoom ends, the image is sharp.
On the iPad and Android tablet, the SVG never renders sharply, regardless of when I zoom it in code.
Does anyone have any ideas of how to reliably end up with a sharp rendering of SVG after a pinch-zoom is completed? Does anyone have a better solution? Using the SVG viewBox to zoom and pan during the gesture does not provide good enough performance for our more complex SVG images. I'm thinking of attempting to use the hardware accelerated scale3d/translate3d during the gesture and then attempt to convert this to new SVG viewBox settings afterwards, but this is a challenge and I'm not sure panning will work correctly after this is done. Any pointers or ideas are greatly appreciated.
Having just tried to answer your other SVG Question I will have a try at this one.
Michael Mullany is spot on that GPU translations will never give you a sharp image. This is because the GPU just maps one array of pixels to a new one. Because it has no concept of lines or rectangles the resolution is set by the time the GPU gets the image. The CPU will always struggle to re-render in time for a smooth drag.
What happens to allow some browsers to produce a sharp image is they do clever manipulations like rendering more pixels than they need so some zooming can happen without loss of resolution. These however are completely inconsistent and just not possible to rely on.
The as I see it 'correct' solution is to translate and zoom with hardware accelerated transformations during a pinch or zoom and then to refresh the viewbox with no css transformation when the translation has finished.
Challenges to overcome are
The css transformation will use screen coordinates but the viewBox manipulation will use the SVG coordinate system.
There are browser inconsistencies in both screenCTM and device pixel ratio
limits so that people don't drag or zoom too far need to be calculated in both systems
Pinch centerpoints also need to be calculated in both
To improve performance further the css transforms will be wrapped into updating on the requestAnimationFrame loop.
My working solution is hammerhead2. I am concentrating on desktops and android mobiles first and it seams to be working for them. To simplify the problem zoom is always centered to the screen center. I do however thing this is currently one of the only solutions. Here is an example of it working.
I'm using some javascript to make my images draggable
I want to be able to move my images over each other and create a similar effect to the multiply blending mode in photoshop.
I've seen how this is possible with static images, but I want these to change as they are moved around the screen, rather than just loading up with the effect already applied.
Is this possible within the canvas? Is there a better way?
Yes, it is possibile with Canvas and processing.js, but you will not be able to use your actual draggable plugin (it doesn't seem HTML5).
Read this http://processingjs.org/reference/blend_/ but remember Blending on Canvas could be very slow (it depends by images' resolution and by Browser' engine).
I am dynamically sizing a transparent .gif on my web page using JavaScript. The original image size is around 200x200 pixels and it’s typically resized to between 600x600 and 800x800. In IE8 and FF3, the resized image results in a nice looking gradient where the colors appear to be stretched. However, in older browsers such as IE7 and FF2, the resized image does not show a gradient, but just blocks of the same color. Obviously, there is something built into the browsers that causes this however I am curious if there is a way around this without having to change my original image.
There isn't. Older browsers just take the pixels in the image, and multiply them according to the new size you gave the image.
Newer browsers seem to have more advanced image rendering with anti-aliasing and such, but older browsers just aren't capable of that. If you want the image to look good in all sizes, take the biggest you can and then let it shrink if needed. Upsizing a small image will look ugly, expecially in the old browsers, and there's nothing you can do.
If you are just using it as a gradient, why not just whip up a new one in Photoshop/Gimp that's at the correct resolution for what you need. It will be far simpler in the long run then trying to get an up-scaled image to display properly in all browsers.
It looks like IE7 supports bicubic if you add "-ms-interpolation-mode:bicubic;" to your img css style. I haven't tried it myself, and wonder if it'd work on gifs or if it'd only work on true color images.
HI, Is there a way by which I can rotate an image inside a div clockwise or anticlockwise.
I have a main fixed width div[overflow set to hidden] with images loaded from database. There is a scroll bar for showing the images inside the div. When image is clicked then I need to show the rotating animation either in clockwise or anticlockwise direction.
I have done it using Matrix filter. I would like to know whether it is possible to be done in IE only without using any filters.
try this: http://raphaeljs.com/image-rotation.html
uses canvas but also supports IE
If you're using jQuery, jQueryRotate is a small (less than 3Kb minified+gzipped) plugin that rotates images:
http://jqueryrotate.com/
The only way I can think of for rotating images on the client-side in IE is using filters. For somewhat recent versions the other browsers you can use the <canvas> control.
Your alternative is to use a server-side script to rotate the image. Then you can send the information on how to rotate it with JavaScript (i.e. generate a path to the image such as /rotate?image=img.jpg&amount=90)
CSS3 supports rotation, but it isn't widely supported.
As you asked for JavaScript solution, here's one, but I don't think you can get smooth images.
There is other way to rotate images without any filters / html5.. it's nasty and useless in real world, but possible.
You can store your image as array of pixels, for javascript. Write function to perform rotation with it and encode it to base64 datauri, bmp could be easy and replace image.src with it.
There will be some limitation about filesize and support in old browser and of course terrible performance..