jquery截图插件——MintImgselector

简介

特点

imgselect是一个简单的截图工具，全方位变换选区，支持固定比例，集成预览功能，方便易用。imgselect非常小巧，js只有4.3K，css只有2KB。

网站：http://mint-ui.wemakers.net/

下载：http://git.oschina.net/895925636/mint-ui

为什么要开发此插件

笔者平时经常要用到上传图片截取头像的功能，在截取头像时为了有更好的体验，还需要用到预览头像的功能。网上已经有很多前端截取头像的插件，但是我还没有找到集成预览选中图片的功能。所以 预览功能要自己写，选区预览功能的计算很繁琐，特别是选区的比例和预览区的比例不同，或者是原图片的尺寸不是原始尺寸时，实现起来就更加繁琐了。这款插件主要目的就是这个。希望你喜欢。

用法

引入依赖文件

<script src="../lib/jquery-1.8.3.min.js"></script>
<script src="imageSelect.min.js"></script>

编写html

注意给截图的预览区设定高度和宽度

<table>
    <tr>
        <td><img id="img" src="45.jpg"/></td>
        <td>
            <div class="previews">
                <div class="preview1 preview"></div>
                <div class="preview2 preview"></div>
                <div class="preview3 preview"></div>
            </div>
        </td>
    </tr>
</table>

编写js

var setting = {
    scope : {
        top : 100,
        left : 100,
        width : 300,
        height : 300
    },
    ratio:1,
    preview:".preview",
    onSelect : function(pane, img){},
    onEnd : function(a,b){console.log(JSON.stringify(b));}
}

$("#img").MintImgSelect(setting);

$("#change").click(function(){
    $("#img").attr("src", "demo.jpg");
});

初始化参数(setting)

参数名	类型	描述
setting.onSelect(scope0,scope1)	function	改变选区时的回调函数，包括拖动选区和改变选区大小。有两个内置参数: scope0表示选中图片的视觉尺寸,结构如下： {top:num,left:num,width:num,height:num}(num代表数字)； scope1表示被选中图片的真实尺寸，结构同上。 如果被截图片没有缩放，那么scope0和scope1是相同的
setting.onEnd(scope0,scope1)	function	确定选区（鼠标抬起）时的回调函数。两个内置参数参考setting.onSelect
setting.preview	string	选区预览区域的选择器，选区内图片会在预览区域呈现
setting.ratio	boolean	选区的比例，如果不指定比例，选区的比例是自由的
setting.scope	Object	插件初始化时，图片的默认选区，结构如下： {top:num,left:num,height:num,width:num}(num表示数字)