图片前台页面旋转,实际上前台的旋转是假的,真正的旋转时在后台,把图片路劲和旋转的角度传给后台,在后台操作,
前台显示图片旋转需要到包jquery.rotate.min.js,可以自己去下载,找不到的可以加我QQ512594735发给你//html代码
双击页面图片,弹出一个窗口,在窗口中打开图片<div id="win5" class="easyui-window" title="照片编辑" style="width:500px;height:460px;background:#F1FDFF;"
data-options="modal:true, closed:true,minimizable:false,collapsible:false,maximizable:false">
<div style="height: 360;text-align: center;margin-top:10px;">
<img id="photob" src="" height="360" /> <!-- 定义一个图片路劲-->
</div>
<div style="margin-top:20px;">
<div style="margin-left: 15%;float: left;">
<a id="win5_rotate" class="easyui-linkbutton" data-options="iconCls:'icon-arrow_rotate_clockwise'">旋转</a>
</div>
<div style="margin-right:5%;float:right;">
<a id="win5_ok" class="easyui-linkbutton" data-options="iconCls:'icon-ok'">保存</a>
<a id="win5_cancel" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'">取消</a>
</div>
</div>
</div>
js代码
var num=0;
双击图片在弹窗中显示
$("#photo0").dblclick(function(){
num = 0;
$('#photob').rotate(0);//每次打开图片先把旋转清空,否则新打开图片会按之前角度自动旋转
var id=this.id;
var src=$("#"+id).attr("src");
$("#photob").attr("src",src);
$("#win5").window("open");
});
//旋转图片弹窗,旋转
$("#win5_rotate").click(function(){
num++;
$('#photob').rotate(num*90);
});
//旋转图片弹窗,保存
$("#win5_ok").click(function(){
var src=$("#photob").attr("src");
var angle=num*90;
$.post("rotatePhoto.html",
{ src: src, angle: angle },
function(data){
alert("Data Loaded: " + data);
});
});
//旋转图片弹窗,取消
$("#win5_cancel").click(function(){
$("#win5").window("close");
});
后台java代码
@Controller
@RequestMapping(value="/main/")
public class Rotatephoto {
@Autowired
private HttpServletRequest request;
/**
* 把服务器中照片旋转一定角度,在保存到服务器
* @return
*/
@RequestMapping(value="rotatePhoto")
@ResponseBody
public String rotatePhoto(String src,int angle){
String fhz="cg";
BufferedImage bufferedimage=null;
OutputStream out=null;
try {//从服务器读取照片
int h = 0;
int w = 0;
bufferedimage = ImageIO.read(new URL(src));//从服务器中读取照片,用new URL(),读取本地磁盘中照片用new File()
if(angle!=0){//旋转角度不等于零
if(angle / 90%2 ==1){//旋转角度为90或270...时,图像的长款对换
h = bufferedimage.getWidth();
w = bufferedimage.getHeight();
}else{
w = bufferedimage.getWidth();
h = bufferedimage.getHeight();
}
}else {//旋转角度为0时,返回
return fhz;
}
int type = bufferedimage.getColorModel().getTransparency();//将像素值转换为颜色分量和 alpha 分量的方法,返回此 ColorModel 的转换类型。
BufferedImage img;
img = new BufferedImage(w, h, type);
Graphics2D graphics2d = img.createGraphics();//创建一个 Graphics2D,可以将它绘制到此 BufferedImage 中。
graphics2d.translate((w-bufferedimage.getWidth())/2, (h-bufferedimage.getHeight())/2);//将当前 Graphics2D Transform 与平移转换连接。后续呈现相对于前一位置平移指定的距离。
graphics2d.setRenderingHint(
RenderingHints.KEY_INTERPOLATION,//插值提示键
RenderingHints.VALUE_INTERPOLATION_BILINEAR);//插值提示值——图像中最接近整数坐标样本的 4 种颜色样本被线性地插入,以生成一个颜色样本
graphics2d.rotate(Math.toRadians(angle), bufferedimage.getWidth() / 2, bufferedimage.getHeight() / 2);//注意此处是员图片的宽和长,不是计算后的,用计算后的宽和长,保存后又黑边,因为此处错误找了三四个小时
graphics2d.drawImage(bufferedimage, null, null);
graphics2d.dispose();
//把旋转后照片存入服务器
Assert.assertNotNull(img);
String url=request.getServletContext().getRealPath("upload") ;//获取服务器upload路劲
String imageName=src.substring(src.lastIndexOf("/")+1);//从照片全路径中解析照片名称
out=new FileOutputStream(url+"/apptake/"+imageName);//创建一个文件输出流
Assert.assertTrue(ImageIO.write(img, "jpg", out));
} catch (IOException e) {
fhz="yc";
e.printStackTrace();
}finally{
if(out!=null){
try {
out.close();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
return fhz;
}
}
已上代码可以实现把图片从服务器中读到前台页面,页面旋转图片,保存后java后台把照片读取到,处理后在存入服务器替换原来照片