简单好用,极易上手的图片截取截图插件cropper.js

 jQuery/js   高蒙   阅读(3789)   评论(0)   2017-04-19 21:49:09    cropper.js 截图 截图插件 


项目中需要配合以图搜图功能,于是呢,就需要相应的截图程序功能。市面上现在有很多的图片截取插件。今天,我结合自身的使用经历。看看cropper.js如何轻易上手,完成图片截图功能。

演示地址:https://fengyuanchen.github.io/cropperjs/
github地址:https://github.com/fengyuanchen/cropperjs

html:

<img id="cropTestImg" src="图片地址" />
<button id="cropEndBtn">确定</button>

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} */
});

gif5111.gif

通过上面简单的配置cropper.js,就可以实现各种自己想要的截图功能。真的简单好用,极易上手。





相关文章



我要评论


站长昵称:(*)

输入内容:


评论列表


高蒙

男,程序猿一枚

 

人生要是没有理想, 那跟一条咸鱼有什么分别。


关于我

  http://www.shuchengxian.com

高蒙个人博客是以PHP技术为主的程序员个人博客。博客主要发布php开发中遇到的问题以及解决办法,同时个人博客也分享网站模板素材,jquery插件等方面素材。


站点声明:相关侵权、举报、投诉及建议等,请发E-mail:936594075#qq.com(#替换成@)。

Copyright © 2018, www.shuchengxian.com, All rights reserved. 个人博客皖公网安备 34152302000022号 皖ICP备15015490号

关键词:个人博客,PHP博客,PHP博客程序,高蒙博客,高蒙个人博客,php程序员博客,程序员个人博客