Is there any image cropper based on HTML5 canvas API. What I would like to have is rotating and cropping. Actually I have written one but I did not like it very much.
Pixastic has a crop feature, does that work for you?
Related
According to this QA, by using "gifler" library, we can use animated gif to render on canvas-based openlayers.
can openlayers 3 render the animated marker using gif
But it cannot accept apng/webp, and also, "gifler" library is bit old, it is tough to use with the latest EcmaScript or TypeScript.
Are there any other way to enable this?
Eventually, I couldn't find a way to make it work, so I started developing it myself.
Animated GIF, APNG, and Animated webp can be frame-split and even animated on a canvas context in the following.
https://github.com/code4history/Gyeonghwon
I want to show a preloader on my website before the content loads,However when i choose a animated preloader image with transparent background the edges look very jagged. How to I modify the image or is there a way to have a transparent background to animated gifs?
I am using the preloaders from preloader.net
The first and probably easiest option you have is to use spin.js. “It dynamically creates spinning activity indicators that can be used as resolution-independent replacement for AJAX loading GIFs.”
If a script is not an option or you want to have a different spinner you have to create a .gif with no anti-aliasing that is bigger than the spinner you want to use and scale it down with html.
Original spinner without edges (without anti-aliasing, therefore it has a pixelated edge):
But if this spinner gets scaled down, it looks nice:
Be sure to use
img {
-ms-interpolation-mode:bicubic;
}
to make it also look pretty in older IEs.
You can use a site that helps you generate your spinner. A great option is :
loading.io
I have a squared formed image. I need to add perspective view to it and then make an animation that will restore image back to square view. This actions must work at least in all newest versions of browsers and without Flash.
I have tried to do this as follows:
Using RaphaelJS I can only clip image (create path and set fill to image url), not add perspective.
Canvas works as svg and vml in RaphaelJS... I can't add perspective with it's help.
CSS3 3D animation method rotateX adds perspective, but it is supported only by Chrome and Safary.
There is no way to add perspective to image using built in tools.
The only possible solution, I have found is using SVG add clip path to image - it doesn't add perspective view, but it's the best possible solution.
As I understand - we can use Canvas to add perspective, but you must write your own javascript algorithm to transform plain image to perspective view.
First of all I will explain my situation so you can know my problem a little better. I'm making a HTML5 app. I have a canvas, and using a color picker you can change the color of the canvas. Now i have a picture which I want to put on the canvas but that pictures color needs to be changed using a color picker. So i need to replace, lets say, black color on that picture and put it on the canvas so it dosnt screw up the background.
So that will look like this:
1st color picker- changes the color of the canvas
2nd color picker - replaces the black color on the image with the one in the color picker and puts it on the canvas
Now my problem is how to replace the color on the image without reloading the page.
My only condition is no using silverlight, flash, java or any other similar tehnology that need 3rd party software to be installed on the device.
Thanks in advance.
If you dont understand my query fully, feel free to ask.
My approach with a JS only solution could be:
Loading the image inside a canvas element. Look at the MDC canvas tutorial
Trigger the user click on the canvas and get the pixel color (see links below to know how to get the color of a pixel) and look at this answer to get the mouse position
Substitute all the colors in the canvas with the one the user pick. For some examples about pixel manipulation:
Pushing pixel with canvas at Mozilla Hacks
http://beej.us/blog/2010/02/html5s-canvas-part-ii-pixel-manipulation/
This JS at mezzoblue apply heavy filter to an image
After some canvas experiment I notice that mostly in all the browser the pixel manipulation with canvas could be very slow also with small images. So another experiment to do could be to get the pixel color and then:
pass the color information to a PHP (or another server side script) with an AJAX call
do the color manipulation with an image library like GD or imagemagik
return back your image with the Ajax response
reload your canvas with the modified version of the image
What are my options for rotating an image on a web page through the Y-axis? I'm not sure if I even have the terminology right. Is this called a rotate or a transform. Most of the searches that I've done with "rotate image" show images being turned. What I'm looking for is the mirror image of the image or what it looks like if you were standing behind it.
I'm looking for something that might be available as a plugin to jQuery or something that can be done with CSS3 or HTML5. I'm also considering doing this in Silverlight but I'm still trying to find an example of what this on the web...
I think this is, what you seek:
http://plugins.jquery.com/project/reflect