Question

＆＃13;

<script type="text/javascript">

var rotation = 0;
jQuery.fn.rotate = function(degrees) {
    $(this).css({'-webkit-transform' : 'rotate('+ degrees +'deg)',
                 '-moz-transform' : 'rotate('+ degrees +'deg)',
                 '-ms-transform' : 'rotate('+ degrees +'deg)',
                 'transform' : 'rotate('+ degrees +'deg)'});
};

$('.rotate').click(function() {
    rotation += 90;
    $(this).rotate(rotation);
});


</script>

＆＃13;

 <a href="image/<?php echo $data['dir']; ?>" download="image/<?php echo $data['dir']; ?>">Download This Image</a>

＆＃13;

我想用jQuery旋转图像，然后我希望能够保存生成的图像，这是原始图像的旋转版本。我按照以下说明操作： How to rotate a div using jQuery没有太大成功。我该怎么做才能解决这个问题？

Answer 1

transform属性修改CSS可视化格式模型的坐标空间，不会修改源图像。您将希望将图像加载到canvas元素中，然后使用canvas API执行修改。 https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API

如何使用jQuery保存旋转的图像？

1 个答案: