PC-移动端好用的图片剪裁插件

一、cropper裁剪插件
cropper图片裁切插件依赖jquery,pc、移动端都可使用。支持包括 IE9 以上的现代浏览器。(已测试)github:https://github.com/fengyuanchen/cropperjs
官网:https://www.bootcdn.cn/cropperjs/1.5.8/
示例代码:
1.文件引入

<script src="../js/cropper.js"></script>

2.html构建

<div class="box" style="width: 600px; height: 300px;">  <img id="image" src="../images/Tom.jpg" alt="Picture" /></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");
}
})

4.相关调用方法

//将图像以及裁剪重置为初始状态
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()
//例如:cropper.getCroppedCanvas({maxWidth:900}).toDataURL('image/jpeg', 0.7); //maxWidth裁切图片的最大宽度(非必传)

二、croppie裁剪插件(不依赖jquery)

1、引入文件

<script src="croppie.min.js"></script>

2、html构建

<div class="actions"><button class="file-btn">
上传
<input id="upload" type="file" value="选择图片文件" />
</button>
<div class="crop">
<div id="upload-demo"></div>
<button class="upload-result">裁剪</button>

</div>
<div id="result"></div>
</div>

3、css

button,
a.btn {
background-color: #189094;
color: white;
padding: 10px 15px;
border-radius: 3px;
border: 1px solid rgba(255, 255, 255, 0.5);
font-size: 16px;
cursor: pointer;
text-decoration: none;
text-shadow: none;
}
button:focus {
outline: 0;
}

.file-btn {
position: relative;
}
.file-btn input[type="file"] {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
}

.actions {
padding: 5px 0;
}
.actions button {
margin-right: 5px;
}
.crop{display:none}

4.js代码
首先利用HTML5的FileReader API读取本地文件,然后$(‘#upload-demo’).croppie()调用了Croppie插件。Croppie的选项viewport:可以设置所裁剪图片的宽度和高度,以及类型(圆形或方形);选项boundary是图片的外围尺寸。它还有参数mouseWheelZoom:是否支持鼠标滚轮缩放图像;showZoom:是否展示缩放条工具;update:回调函数。

$(function(){
var $uploadCrop;

function readFile(input) {
if (input.files &amp;&amp; input.files[0]) {
var reader = new FileReader();

reader.onload = function (e) {
$uploadCrop.croppie('bind', {
url: e.target.result
});
}

reader.readAsDataURL(input.files[0]);
}
else {
alert("Sorry - you're browser doesn't support the FileReader API");
}
}

$uploadCrop = $('#upload-demo').croppie({
viewport: {
width: 200,
height: 200,
type: 'circle'
},
boundary: {
width: 300,
height: 300
}
});

$('#upload').on('change', function () {
$(".crop").show();
readFile(this);
});
$('.upload-result').on('click', function (ev) {
$uploadCrop.croppie('result', 'canvas').then(function (resp) {
popupResult({
src: resp
});
});
});

function popupResult(result) {
var html;
if (result.html) {
html = result.html;
}
if (result.src) {
html = '<img src="' + result.src + '" />';
}
$("#result").html(html);
}
});

当点击“裁剪”按钮后,再次调用Croppie的result的方法,返回一张裁剪后的图片,并显示在#result中。

二、Image-Clip插件

Image-Clip图片裁切插件依赖jquery,pc、移动端都可使用。(已测试)

地址:https://www.jq22.com/jquery-info17342

非著名均为来自网络,不代表一点新作立场,若为著名原创,转载请注明出处:http://ydxinzuo.cn/archives/1862

作者: Webmaster

发表评论

邮箱地址不会被公开。 必填项已用*标注

联系我们

联系我们

在线咨询: QQ交谈

邮箱: 303817524@qq.com

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部