引用了boostrap 自适应样式后图片的缩放与实际裁剪解决方法

最近帮同学的朋友做一个小东西,效果的实现,是 手机用户上传 一张图片,然后可以 实时裁剪这张图片,并返还给该用户。

当时引用了 jquery 的jcrop库,一直在电脑端测试,未在手机端测试,结果用了一张1366*768 规格的图片时,手机端出现了样式错乱,听说boostrap只要引用它定义的样式,可以解决自适应的问题,于是引入了,图片可以正常显示了,可由此,图片也被缩放了,可当时的jcrop裁剪是获取在屏幕的实际落点,然后返还对应的坐标值,并传到php处理页面,进入处理、如果手机屏幕是360*480的尺寸的话,最大的裁剪范围也就是手机的屏幕大小,所以根本无法实时的记录对应的落脚点与图片的实际点,最后采取的方法是 

1.获取传入的图片的实际尺寸


2.获取当前被boostrap缩放的图片尺寸

3.计算它们之间的差别比例


3.在传到php处理页面的对应坐标 乘回去它们差别的比例

                      PS :x1 , y1 , cw ,ch 的值为 当前 实际落脚点的值,action2.php 页面为php的裁剪处理页面


4.完成。

你可能感兴趣的:(HTML)