项目中需要配合以图搜图功能,于是呢,就需要相应的截图程序功能。市面上现在有很多的图片截取插件。今天,我结合自身的使用经历。看看cropper.js如何轻易上手,完成图片截图功能。演示地址:https://fengyuanchen.github.io/cropperjs/
github地址:https://github.com/fengyuanchen/cropperjs
html:
确定
javascript:var $image = $('#cropTestImg');
/* 初始化配置 */
$image.cropper({
movable: false,
zoomable: false,
rotatable: false,
scalable: false,
autoCropArea:0.5,
minCropBoxWidth:100,
minCropBoxHeight:100
});
/* 点击获取图片的裁剪大小 */
$('#cropEndBtn').on('click',function(){
var imageData = $image.cropper('getData');
console.log(imageData);
/* 结果如下 Object {x: 212.36363636363637, y: 76, width: 338.90909090909093, height: 256.3636363636364} */
});
通过上面简单的配置cropper.js,就可以实现各种自己想要的截图功能。真的简单好用,极易上手。