CutImg剪切图片并返回剪切区域的坐标
版权声明：
本文为博主原创文章，转载请声明原文链接...谢谢。o_0。
更新时间：
2016-12-27 20:44:10
温馨提示：
学无止境,技术类文章有它的时效性,请留意文章更新时间,如发现内容有误请留言指出,防止别人"踩坑",我会及时更新文章
做项目的时候需要一个功能剪切图片,为啦以后方便在其它地方使用于是就把查找图片剪切区域和进行图片剪切分成两块来做啦,
下面是一个让用户自己选择要剪切的区域的功能模块,如图:
兼容ie8,9,10,11 谷歌 火狐 等主流浏览器,
功能是让用户选择区域,选择成功后会有一个回调返回当前选中的区域在原图片上的坐标点(注意是原图哦,不是缩放后的),坐标结构如下:
{
x: 20,//左上角x坐标
y: 30,//左上角y坐标
width: 150,//宽
height: 200//高
}使用方法
//创建一个剪切图片的对象
var cutimg = CutImg();
//初始化容器,容器大小自己指定,初始化后按容器的大小缩放图片
cutimg.initContainer('#container');
//向里面添加一个图片
cutimg.addImage('./1.jpg');
//取当前剪切的区域坐标
var zb = cutimg.getCutPoint();有时候我们需要动态的获取用户移动的剪切区域坐标值,比如移动一下就把当前区域的图片单独显示出来放大来看，可以使用下面的方法添加图片,添加一个回调函数
cutimg.addImage('./min.jpg', function(zb) {
console.log(zb);
});当剪切区域移动的时候回调函数里会同步返回一个当前的坐标
设置初始剪切框的大小位置
cutimg.setRectSize({
top: 10,
left: 20,
width: 200,
height: 200
});//当设置的范围超过容器或图片的大小时,程序会自动处理成适合的大小
