Is there any image modification tool out there that will work on webkit?
Something like the one on this page
http://developer.yahoo.com/yui/examples/imagecropper/simple_crop.html
Except that when you interact, you interact with the image in a given space and the mask is fixed (i.e pinching the image, rotating the image etc)
Thanks,
Tee
The jQuery image crop plugin should work with Webkit and does cropping. I don't know of a free plugin that can do image rotation at the same time.
WebKit supports html5 canvas and canvas supports image manipulation. You could make an app to do this. I recommend looking here
Related
As you see on my codepen sample, image is rotated by browser automatically. On the other hand if you look to original image it's not rotated.
I'm using Chrome 80. I know it can be fixed on Firefox with image-orientation style, but how can I fix it on the chrome. I don't want the browser to rotate the image
The rotation is baked into the EXIF data of your image. This is going to be more and more common as browsers honour this EXIF setting.
As per your comment, by converting it to a PNG, you probably ended up stripping that data out of the image file, fixing the issue you were experiencing.
I have a development made.
I'm using 430px X 455px images
When I down-scaled image to 184px width:
- Google Chrome: looks perfect
- Firefox (37.0.1) looks very unfocused
- Internet Explorer (11.0.9): "sawtooth" look (very pixelated)
Why is this? Not rescaled images I can use?
What solution could there be?
Development: http://s566904160.mialojamiento.es/desarrollo/
Use object-fit property of CSS.. Read this tutorial
http://www.devtantra.com/273/object-fit-css3/
If you're not bound by latency concerns, consider serving ~25% more pixels than you're specifying in CSS, and let the browser do the downsizing. That will also handle cases such as browser zoom.
You get the best image quality when using images in the desired resolution.that can be achieved either by creating them in a tool like Gimp or Photoshop, or using libraries like ImageMagic.
Is there a way to make an image bigger in HTML5 without it getting blurry.
For example, this image is 24x24:
If you instead load it with a width of 150, it gets blurry. I want pixelated!
http://png-1.findicons.com/files/icons/734/phuzion/24/bug.png
Instead I would like to change the rendering engine to display like what you would see in photoshop. Something like this:
I only care about modern browsers.
If you just leave it to the browser, they will try to make it as smooth as possible nowadays (old IE versions didn't). So your best bet is to load it into a canvas and do the (nearest-neighbour) upscaling yourself. I'm not saying that this a sane idea, just putting it out there. :)
That, or have multiple versions of the image and switch them around somehow. There are a few technics you can try, like css sliding-doors.
After some research: unfortunately what you want to do is limited by browser specific limitations. Firefox has a limited experimental code (image-rendering) that can force the browser to stop interpolating the pixels and thus causing the blurriness.
Unfortunately there is no other supported way of doing this currently. My suggestion would be for you to simply scale the image as I did in the edit to your original post.
Like this:
Mozilla's documentation page: https://developer.mozilla.org/en-US/docs/CSS/image-rendering
I found http://www.magmypic.com/, the concept is super nice, but flash is SO OUT... i like and think if it's possible to do it in html5. Do you know library that can do it, or site that show how-to
thanks in advance
I don't think you need 'HTML5' so do something similar, the first step is placing an image as a background of a div and using CSS3 'background-position' and 'background-size' take care of moving and scaling the image. Then just slap transparent PNG on top for the magazine text. You could also use CSS3 instead of a PNG to make the magazine graphics with #font-face and something like google web fonts or font squirrel for custom fonts.
I've fixed image size. And I want to achieve rounded corners through html/css.
Options I'm thinking about is to overlay image with four corner png. Using img:after and content. But unfortunately img:after is purely supported across browsers, let alone compatibility with IE 6.7.
Is there any simple clean way to achieve this?
In theory I could also create div with corner background and make it go absolute over the image... but that would break save as functionality.......
any ideas?
Well, there's always CSS3 rounded corners border radius which has very good support in every modern browser, then the CSS3PIE polyfill for older versions of IE.
If you can live with the fact that browsers that don't support border-radius will show plain old square images, you could use this jQuery script to automatically wrap your images in div's and give them corners:
http://www.smoothdivscroll.com/roundedimagecorners/
(View the source to get the js and see how it's used)
Here's an article that I've written that explains the background to this script:
http://www.swedishfika.com/2010/03/19/rounded-corners-on-images-with-css3-2/
Regards,
Thomas
To make border round in IE there is little work around for that. Please have a look at this link