HTML5 Tuval Görüntü Döndürme
jQuery('#carregar').click(function(){
var canvas = document.getElementById('canvas');
var image = document.getElementById('image');
var element = canvas.getContext("2d");
element.clearRect(0, 0, canvas.width, canvas.height);
element.drawImage(image, 0, 0, 300, 300);
});
[jsfiddle.net/braziel/nWyDE/](http://jsfiddle.net/braziel/nWyDE/)
Bir resmi 90 ° sağa veya sola döndürmekle ilgili bir sorunum var.
Tuvalde bir görüntü kullanıyorum, aynı ekranın örneğinkine eşit birkaç tuvali olacak, ancak projeye mümkün olduğunca yakın bıraktım.
Soruyorum, "Sola Döndür" ve "Sağa Döndür" düğmelerine tıkladığımda görüntüyü 90 ° sola veya sağa nasıl döndürebilirim?
İnternette birkaç kod denedim ama hiçbiri işe yaramadı.
61
3
Resminizi döndürmek için canvas'ın context.translate & context.rotate komutunu kullanabilirsiniz
Burada, belirtilen derecelerde döndürülmüş bir görüntü çizmek için bir fonksiyon var:
İşte kod ve bir Fiddle: http://jsfiddle.net/m1erickson/6ZsCz/
Diğer çözüm kare resimler için harika çalışıyor. İşte herhangi bir boyuttaki bir görüntü için çalışacak bir çözüm. Tuval, görüntünün bazı kısımlarının kırpılmasına neden olabilecek diğer çözümün aksine her zaman görüntüye uyacaktır.
http://jsfiddle.net/6ZsCz/1588/
İşte yaptığım bir şey
kullanım
HTML