jQuery图片剪裁插件Cropper.js的使用

时间: 2019-12-11阅读: 60标签: 插件

插件下载地址及文档说明


1.引入必要的js和css核心文件

<link rel="stylesheet" href="../css/cropper.css">
<script src="../js/cropper.js"></script>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>


2.构建html,可以将图片或canvas直接包裹到一个块级元素中。small时预览框

<div class="box" style="width: 600px;height: 300px;"> 
  <img id="image" src="../images/Tom.jpg" alt="Picture">
</div>
<div class="small" style="width: 200px;height: 200px;overflow: hidden;"></div>


3.初始化插件及相关参数

var image = document.getElementById("image");
        var cropper = new Cropper(image,{
            //裁剪框的比例1/1
            aspectRatio:NaN,
            //视图模式
            viewMode:1,//0,1-,2-,3让图片填满画布
            //开启预览效果
            preview:'.small',
            //拖拽模式
            // dragMode:'crop',//参数:move-可以移动图片和框,crop-拖拽新建框
            dragMode:'move',//参数:move-可以移动图片和框,crop-拖拽新建框
            
            //在调整窗口大小时,会重新渲染cropper
            responsive:true,
            //在调整窗口大小时,恢复裁剪区
            restore:true,
            //检查图片是否为跨域图片
            checkCrossOrigin:true,
            //是否开启遮罩,将未选中的地方暗色处理
            modal:true,
            //是否显示裁剪的虚线
            guides:true,
            //将选中的区域亮色处理
            highlight:true,//默认
            //是否显示网格背景
            background:true,
            //裁剪框是否在图片的中心
            center:true,
            //当初始化的时候(是否自动显示裁剪框).
            autoCrop:true,
            //当初始化时,裁剪框的大小与原图的比例
            autoCropArea:0.8,//0.8是默认,1是1比1
            //是否允许移动图片
            movable:true,//默认为true
            //是否允许旋转图片(函数调用时)()
            rotatable:true,
            //是否允许翻转图片(问题)
            scalable:true,
            //是否可以缩放图片
         
            zoomable:true,//false为不能放大缩小 
            //是否可以通过触摸的形式来放大图片(手机端)
            zoomOnTouch:true,    

            //是否允许用鼠标来放大货缩小图片
            zoomOnWheel:true,
            //设置鼠标控制缩放的比例
            wheelZoomRatio:0.2,  
            
            //是否可以移动裁剪框
            cropBoxMovable:true,//裁剪框不动,图片动。当movable:true  
            //是否可以调整裁剪框的大小,默认true
            cropBoxResizable:true,

            //设置dragMode 是否可以相互切换(条件:双击鼠标可以切换)
            toggleDragModeOnDblclick:true,

            //设置Container的w和h
            minContainerWidth:0,
            minContainerHeight:200,
            //设置canvas的w和h
            // canvas太大Container装不下
            minCanvasWidth:0,
            minCanvasHeight:0,
            //设置裁剪层
            minCropBoxWidth:0,
            minCropBoxHeight:100,

            //一.crop开始-过程-结束的函数
            //1.当插件准备完成时,执行此函数
            ready:function(e){
                // alert("ready");
            },
            //2.当裁剪框开始移动的时候会执行的函数
            cropstart:function(e){
                // console.log("start");
            },
            //3.裁剪框移动的时候会执行的函数(每一帧都会调用)
            cropmove:function(e){
                // console.log("move");
            },
            //3.裁剪框移动结束的时候会执行的函数
            cropend:function(e){
                // console.log("end");
            },

            //二、重置与清除函数
            //1.在裁剪框发生变化的时候会调用的函数
            crop:function(e){
                // console.log("cropChange"); 
            }
        })

//将图像以及裁剪重置为初始状态
cropper.reset();
//清除裁剪框
cropper.clear();
//替换图片,参数1:替换的图片,参数二,boolean是否保持原来的比例
cropper.replace("../images/picture.jpg",false);
//解锁
cropper.enable();
//锁定
cropper.disable();
//销毁cropper,并在图像中将整个cropper销毁(将插件销毁)
cropper.destroy();
//移动x轴坐标,移动图片.相对自己的位置
cropper.move(1,0);
//移动y轴坐标
cropper.move(0,1);
//移动到x,有一个具体的坐标
cropper.moveTo(2,0);
//移动到y
cropper.moveTo(0,2);
//放大
cropper.zoom(0.1);
//缩小
cropper.zoom(-0.1);

//放大到,原来的两倍
cropper.zoomTo(2);
//缩小到
cropper.zoomTo(0.2);
//逆时针旋转,度数
cropper.rotate(-45);
//顺时针旋转(正数)
cropper.rotate(45);

//逆时针旋转到(正数)
cropper.rotate(-45);
//顺时针旋转(正数)
cropper.rotate(45);

//沿y轴翻转,当前轴不变,另一轴为-1
cropper.scale(-1,1);

//沿x轴翻转
cropper.scale(1,-1);
//缩放图片x坐标
cropper.scale(-1);
 //缩放图片X坐标
cropper.scaleX(0.5);
//缩放图片Y坐标
cropper.scaleY(2);

//获取数据信息(裁剪框的数据)
console.log(cropper.getData());
//获取数据信息(裁剪框的数据)
cropper.setData({width:200,height:100});
//获取Container的数据信息,没有setContainerData函数console.log(cropper.getContainerData());
//获取image的数据信息,就是图片大小
console.log(cropper.getImageData());
//获取Canvas的数据信息
console.log(cropper.getCanvasData());
//设置Canvas的数据信息
            console.log(cropper.setCanvasData({left:0,top:0,width:200,height:200}));
//获得裁剪框的详细数据
console.log(cropper.getCropBoxData());
//获得裁剪框的详细数据
            console.log(cropper.setCropBoxData({left:0,top:100,width:00,height:200}));
//获得裁剪后的图片,裁剪后的base64编码 **********重要***********
$("#message").append(cropper.getCroppedCanvas());
//修改裁剪框的长宽比
cropper.setAspectRatio(1/1);
//设置拖拽模式,none,crop,move
cropper.setDragMode("crop");
//获取canvas绘制的剪裁图像。
在这之后,你可以直接将canvas作为图片显示,或使用canvas.toDataURL方法获取图像的数据链接,或者使用canvas.toBlob方法获取一个blob,并通过FormData方法将它更新到服务器上(如果浏览器支持这些API)
cropper.getCroppedCanvas()

吐血推荐

1.站长广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入...

2.休闲娱乐: 直播/交友    优惠券领取   网页游戏   H5游戏

链接: http://www.fly63.com/article/detial/7239

揭秘webpack plugin

Plugin(插件) 是 webpack 生态的的一个关键部分。它为社区提供了一种强大的方法来扩展 webpack 和开发 webpack 的编译过程。这篇文章将尝试探索 webpack plugin

jquery.validate验证

jquery validate插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求

Vue中的JS与Velocity.js的结合

JS动画效果,注意事件函数中所传递的传递的参数及某些事件函数返回的函数1.进入动画钩子:before-enter,enter,after-enter;2.离开动画钩子:before-leave,leave,after-leave;3.在enter钩子中的函数调用done

Vue添加引入jquery插件

先安装jquer插件,命令运行: npm i jquery --save-dev ;利用 expose-loader 模块 来引用jquery插件 ,命令运行: npm i expose-loade --save-dev;配置webpack.base.conf

Webpack插件开发简要

如今‘大前端’这个概念在前端界大热,说‘大前端’,我们就要提到‘前后端分离’,‘前后端分离’又离不开‘本地开发构建’,‘本地开发构建’自然离不开webpack,webpack想要工作,那它就需要各种插件的支持,O(∩_∩)O哈哈~,逗了一大圈,终于引出了主题

DefinePlugin插件用法理解

DefinePlugin 允许创建一个在编译时可以配置的全局常量。这可能会对开发模式和生产模式的构建允许不同的行为非常有用。如果在开发构建中,而不在发布构建中执行日志记录,则可以使用全局常量来决定是否记录日志。这就是 DefinePlugin 的用处

10款好用到爆的Vim插件

我使用Vim编辑器已经差不多20年了,不过,我是在前两年才开始使用Vim插件,我会定时清理插件,我认为这样做更有助于自己了解哪些插件才是最好的。此外,针对不同的语言和文件配置我会使用不同的插件

谷歌插件在测试的应用

随着SOA的普及,各大互联网公司都拥有自己较为成熟的分布式跟踪系统,比如Google的Dapper,Twitter的Zipkin,淘宝的鹰眼,京东的Hydra,eBay的CAL,大众点评的CAT等等:

vuedraggable:vue拖拽排序插件

最近做的项目要用到拖拽排序,我现在的项目是vue项目,所以我就屁颠屁颠的去百度有木有这样功能的插件,我就知道一定会有,那就是vuedraggable,这是一款很棒的拖拽插件,下面我来说一下怎么引入

babel插件的相关知识

Babel 是 JavaScript 编译器,更确切地说是源码到源码的编译器,通常也叫做“转换编译器(transpiler)”。 意思是说你为 Babel 提供一些 JavaScript 代码,Babel 更改这些代码,然后返回给你新生成的代码

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全