Question

如何使用前缀data：image / jpg; base64和c：forEach使用jqueryRotate插件旋转图像。我有一个jquery对话框，在该对话框中我有这些图像

<div style="display: none;" id="${Item.type}Div">
<c:forEach var="itemList" items="${Item.image}"
varStatus="listItemStatus">
<img width="500px" height="600px" id="imageRotate" 
style="align: left;" src="data:image/jpg;base64,${itemList}" />
</c:forEach>
</div>

<span class="rotateClockWise"><img src="<c:url value="/resources/images/rotate_icon.jpg"/>"
width="30" height="30" title="Rotate Clockwise" alt="Rotate Clockwise" border="0"
 style="float: right;" /></span>

脚本

$(".rotateClockWise").click(function(){
     $("#imageRotate").rotate(180); 
});

但是像这样，对话框弹出窗口内的图像不会旋转。任何帮助都会很棒。如何在c：forEach with Object下旋转图像。

提前致谢

Answer 1

// using css3 rotate 
$(".rotateClockWise").click(function(){
var angle = 180;   
     $("#imageRotate").css({
         "transform":"rotate("+angle+"deg)",
         "-ms-transform":"rotate("+angle+"deg)",/* IE 9 */
         "-webkit-transform":"rotate("+angle+"deg)" /* Safari and Chrome */
      }); 
});

还有另外一个使用html5 canvas的解决方案来看看这里 Javascript function to Rotate a base 64 image by X degrees and return new base64

如何使用前缀data：image / jpg; base64使用jQueryRotate.js旋转图像

1 个答案: