javascript - 如何使用 javascript/jquery 旋转图像。然后我想创建一个新模式。对实际操作图像感兴趣

Question

我有一个包含图像的变量。我可以从 javascript 中旋转图像吗？

var img = new Image();
img.src='http://www.ittefaq.com.bd/admin/news_images/2013/07/29/thumbnails/image_60156.jpg';
//now i want to rotate this image. is this possible ?

我试图用画布来做，但它没有给我想要的结果。

javascript / jquery可以做到这一点吗？

我不想使用 CSS。它不符合我的目的。

对实际操作图像感兴趣

Answer 1

尝试这个：

img.style.transform = "rotate(45deg)";

jsFiddle：这里

Answer 2

如果我得到这个正确，你想在前端旋转图像并且对实际操作图像不感兴趣。

您可以使用 CSS3 变换来旋转图像，如下所述http://www.w3schools.com/cssref/css3_pr_transform.asp

HTML

<img class="exampleImage" src="http://www.corbisimages.com/images/Corbis-42-18522637.jpg?size=67&uid=c7ebc105-b4a4-4fad-8e7d-99ff79ac2ce4" height="300px"/>
<input type="range" min="-180" max="180" step="1" value="0" id="rotationAngle">

JavaScript

jQuery('#rotationAngle').on('mouseup', function(){
  jQuery('.exampleImage').css(
 '-webkit-transform', 'rotate(' + jQuery('#rotationAngle').val() + 'deg)',
 'transform', 'rotate(' + jQuery('#rotationAngle').val() + 'deg)');
});

这是小提琴供您参考。