He buscado en todas partes pero no puedo encontrar cómo rotar (grado) con el borde de la imagen o algo así como 'cambiar el tamaño' en jQuery. Lo que quiero decir es algo así como borde de "Transformación libre" en Photoshop que tiene 4 lugares para rotar en cada esquina de la imagen.¿Cómo rotar la imagen con jQuery como 'Transformación libre' en Photoshop?
Puede rotar imágenes con los filtros DirectX de IE, pero no creo que resuelva su problema. Puede que tenga que usar algo como Flash o Silverlight para realizar ese trabajo.
No conozco ningún JavaScript que tenga ese tipo de poder. Aquí está el experimento de un solo tipo, pero el resultado no es muy buena:
http://www.walterzorn.com/rotate_img/rotate_img.htm
Esto también es bastante moderno, y utiliza Flash:
This podría ayudar. No soy un experto, pero parece que solo puedes tener incrementos de 90 grados en IE.
La única forma en que puedo pensar para hacer esto en javascript sería usando el elemento canvas.
Intente utilizar el siguiente plugin: http://wilq32.googlepages.com/wilq32.rollimage222
Si está utilizando Javascript, por qué no dejar que el servidor haga el trabajo y obtener el resultado a través de una llamada AJAX? Consulte las bibliotecas de ImageMagick (http://www.imagemagick.org/script/index.php). Si el usuario final es el que especifica los parámetros de rotación, capture esas entradas en javascript, envíelas al servidor para que ImageMagick (u otra biblioteca) las procese y actualice la imagen del lado del cliente.
Here's a starting point que funciona en WebKit. (Utilicé Safari 4.) No he tenido que hacer cálculos matemáticos en años, así que tendrás que calcular el ángulo de rotación correcto en función de la distancia del arrastre. Además, la caja de rotación se compensa ligeramente cuando comienza a girar. Pueden estar girando alrededor de un punto central diferente.
CSS3 admite rotation, pero en este momento solo Chrome y safari admiten la rotación de CSS3 con webkit. Aquí hay un buen example de rotación en CSS3. Si desea ver si funciona en su navegador intente esto link. Debería ser un reloj de trabajo.
Por ahora troynts answer parece su mejor apuesta.
En el futuro o con safari o Chrome, puede hacerlo.
$(this).css('-webkit-transform','rotate(45deg)');
Estoy usando raphaeljs (raphaeljs.com). Te permitirá dibujar en un lienzo. Entonces, primero puede agregar un rectángulo de fondo, luego agregar la imagen y finalmente rotar. Mostrando un borde Por lo que pude encontrar, esto no es posible con la rotación de wilq32.
Plugin de transformación libre para Raphael: https://github.com/ElbertF/Raphael.FreeTransform –
Sí, pero no admite imágenes giratorias en IE7/8. –
Sí, pero ¿alguien ha modificado esto para que funcione como una transformación gratuita? –