关于图片剪裁预览部分处理

最近在重写图片剪裁功能，完善一下之前想实现却没来的急写的功能。

剪裁插件地址
调用插件地址

img1.jpg

先命个名字吧
红色的叫 展示图 用 e 表示 宽高用 w1 h1 表示
绿色的叫 预览图 用 p 表示 宽高用 w2 h2 表示
蓝色的叫 选择图 用 S 表示 宽高用 w3 h3 表示
用户填写的目标尺寸 目标图 宽高用 w4 h4 表示

由于我们需要剪裁的图片是用户随意传的，希望得到的尺寸用户也能自由的填写，所以在图片初始化的时候，想给图片一个默认的选中区域，图中蓝色区域。那么问题来了，怎么才能让没次用户填写的尺寸都能在合理的缩放以后在展示图里选中，并且不超出展示图呢。

错误思路一

按用户给的目标尺寸算 让 w4 h4 中较长的一边占满展示图的一条边

if( w4 > h4 ){
    var temp = w4;
    w4 = w1;
    h4 =  temp * h4 / w4 ;
}else{
   .........
}

这样写就有问题了，

QQ截图20151224164245.jpg

如果我们把目标尺寸的宽按原始图的宽度拉伸，难么新的拉伸后的尺寸（紫色）要溢出原始图了，所以这种解决问题思路不对。

错误思路二

找到原始图中较短的一条边，让目标图的这条边占满显示。
其实想想这个问题和错误思路一差不多，都是会有拉伸后的尺寸溢出的现象。直接上正确的吧。

最终解决问题的思路

直接上草图啦 字丑莫怪
想让选择图中会超出原图的边以原图的一半做显示 注意 这里我们关注的是宽高的比例 而不是其具体的值

错误图
啊哦 上面那个又错了 终于对啦