关于jcrop裁剪的问题

骑单车的程序员 发布于 2014/11/20 17:55
阅读 2K+
收藏 0

请教各位,

上传的图片中,如果按照原始图片来获取裁剪的坐标,是没有问题的,

但是有时图片过大,页面显示不全,在style中增加witdh="100%"的自适应的方式,

但是获取的 x y w h 坐标宽高就不对了,需要得到正确的缩放比例,

那么问题就来了,如何能够拿到这个缩放比例?
----

找到解决方案了,

1、jcrop的api可以拿到实际显示的 w h, 
$('#displayImg').Jcrop({
                    setSelect: [ 20, 60, 200, 200 ],
                    maxSize :[600,600],
                    minSize :[20,20],
                    touchSupport : true,
                      aspectRatio: 1,
                        onSelect: updateCoords
},function(){
api = this;
var ss = api.getBounds();
$('#realW').val(ss[0]);
$('#realH').val(ss[1]);
}
           );

 function updateCoords(c){
        $('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);  
};

2、html部分,通过隐藏表单向后台传递:
  <form id="coords" target="hid_frame" action="<%=path %>/uploadImg" method="post" data-role="none" enctype ="multipart/form-data">
    <input class="photo-file" type="file" name="imgFile" id="fcupload" onchange="readURL(this);"/>
    <input type="hidden" id="x" name="x" />
<input type="hidden" id="y" name="y"/>
<input type="hidden" id="w" name="w"/>
<input type="hidden" id="h" name="h"/>
<input type="hidden" id="realW" name="realW"/>
<input type="hidden" id="realH" name="realH"/>
    <input type="submit" value="上传" id="upload"/>
    </form>
3、java后台部分,x的比例 = 原图尺寸w/显示尺寸w,y的比例也是如此计算,这里我使用BigDecimal,来处理精度问题; 

加载中
0
crazymus
crazymus
这问题我也遇到了,我的解决方案是不要对图片设置宽度,让图片自然显示。
骑单车的程序员
骑单车的程序员
这个是没问题的,但是如果你是手机浏览的话,不能让图片自适应是不行的,所以如何拿到缩小的比例,或者缩小后的宽度和高度,根据比例再计算一次
0
crazymus
crazymus
如果图片太大,可以在上传时在服务端将图片宽度限制在一定范围内,这样在前台显示就没问题了
0
明哥先生
明哥先生
我建义你使shearphoto,是秒杀了jcrop 了  自己百度吧,用了shearphoto,其他截图工具,保证你不会再用了
返回顶部
顶部