jQuery imgAreaSelect Examples

案例：前端图片截取功能

分布说明A：选择File本地选择的图片 B：根据需求按比例缩放图片 C：区域选择型操作

 

 

A: 选择图片

<input class="upfile" type="file" id="pictureUpload" name="pictureUpload">
<image id="SelectImage">

 

 B: 如果选择的图片比较大，则按照需求缩放即可 

function AutoResizeImage(TargetWidth, TargetHeight) {
        var img = document.getElementById("SelectImage");
        var IntWidth; 
        var IntHeight; 
        if (img.width > TargetWidth && img.height <= TargetHeight) {
            IntWidth = TargetWidth;
            IntHeight = (IntWidth * img.height) / img.width;
        }
        else if (img.width <= TargetWidth && img.height > TargetHeight) {
            IntHeight = TargetHeight;
            IntWidth = (IntHeight * img.width) / img.height;
        }
        else if (img.Width <= TargetWidth && img.height <= TargetHeight) {
            IntHeight = img.width;
            IntWidth = img.height;
        }
        else {
            IntWidth = TargetWidth;
            IntHeight = (IntWidth * img.height) / img.width;
            if (IntHeight > TargetHeight)
            {
                IntHeight = TargetHeight;
                IntWidth = (IntHeight * img.width) / img.height;
            }
        }
        img.height = IntHeight;
        img.width = IntWidth;
    }

 

 

C: imgAreaSelect 作用是图片区域选择显示

例如图示：

 

 $(document).ready(function () {
   //初始化选择图片区域的裁剪元素  
   $('#SelectImage').imgAreaSelect({
     aspectRatio: '1:1',
     handles: true,
     fadeSpeed: 200,
     onSelectChange: preview,
　　　minWidth:100,
　　　minHeight:100,

     x1: 0, 
     y1: 0,
     x2: 100,
     y2: 100
 });
});