Cropper-裁剪上传头像

移步官网(http://fengyuanchen.github.io/cropper/

cropper.js 通过canvas实现图片裁剪,最后在通过canvas获取裁剪区域的图片base64串。

1.container 容器 2.canvas 图片 3.crop 裁剪框 option相关参数说明:

viewMode 显示模式

  • Type: Number
  • Default: 0
  • Options:
    • 0: the crop box is just within the container 裁剪框只能在 1内移动
    • 1: the crop box should be within the canvas 裁剪框 只能在 2图片内移动
    • 2: the canvas should not be within the container 2图片 不全部铺满1 (即缩小时可以有一边出现空隙)
    • 3: the container should be within the canvas 2图片 全部铺满1 (即 再怎么缩小也不会出现空隙)

dragMode 拖动模式

  • Default: 'crop'
  • Options:
    • 'crop': create a new crop box 当鼠标 点击一处时根据这个点重新生成一个 裁剪框
    • 'move': move the canvas 可以拖动图片
    • 'none': do nothing 图片就不能拖动了

Define the dragging mode of the cropper. *toggleDragModeOnDblclick *默认true .是否允许 拖动模式 “crop” 跟“move” 的切换状态。。即当点下为crop 模式,如果未松开拖动这时就是“move”模式。放开后又为“crop”模式

*preview *截图的显示位置 型:String(jQuery选择器),默认值'' *responsive *:类型:Boolean,默认值true。是否在窗口尺寸改变的时候重置cropper。

checkImageOrigin:类型:Boolean,默认值true。默认情况下,插件会检测图片的源,如果是跨域图片,图片元素会被添加crossOrigin class,并会为图片的url添加一个时间戳来使getCroppedCanvas变为可用。添加时间戳会使图片重新加载,以使跨域图片能够使用getCroppedCanvas。在图片上添加crossOrigin class会阻止在图片url上添加时间戳,及图片的重新加载。

background:类型:Boolean,默认值true。是否在容器上显示网格背景。 要想改背景,我是直接改,cropper.css样式中的 cropper-bg

canvas(图片)相关

movable:类型:Boolean,默认值true。是否允许移动图片

rotatable:类型:Boolean,默认值true。是否允许旋转图片。

*scalable *默认 true 。 是否允许扩展图片。(暂时不知道干嘛用)

zoomable 默认true, 石头允许缩放图片。

*zoomOnWheel *默认 true 是否允许鼠标滚轴 缩放图片

*zoomOnTouch *默认true 是否允许触摸缩放图片(触摸屏上两手指操作。)

*wheelZoomRatio *默认0.1 师表滚轴缩放图片比例。即滚一下。图片缩放多少。如 0.1 就是图片的10%

crop(裁剪框)相关

*aspectRatio *裁剪框比例 默认NaN 例如:: 1 / 1,//裁剪框比例 1:1

modal:类型:Boolean,默认值true。是否在剪裁框上显示黑色的模态窗口。

cropBoxMovable **:默认true ,是否允许拖动裁剪框cropBoxResizable :默认 true,//是否允许拖动 改变裁剪框大小 **autoCrop:类型:Boolean,默认值true。是否允许在初始化时自动出现裁剪框。autoCropArea:类型:Number,默认值0.8(图片的80%)。0-1之间的数值,定义自动剪裁框的大小。highlight:类型:Boolean,默认值true。是否在剪裁框上显示白色的模态窗口。

guides:类型:Boolean,默认值true。是否在剪裁框上显示虚线。

center: 默认true 是否显示裁剪框 中间的+

restore : 类型:Boolean,默认值true 是否调整窗口大小后恢复裁剪区域。

大小相关

minContainerWidth:类型:Number,默认值200。容器的最小宽度。

minContainerHeight:类型:Number,默认值100。容器的最小高度。

minCanvasWidth:类型:Number,默认值0。canvas 的最小宽度(image wrapper)。minCanvasHeight:类型:Number,默认值0。canvas 的最小高度(image wrapper)。监听触发的方法

build:类型:Function,默认值nullbuild.cropper事件的简写方式。 ====== 。控件初始化前执行built:类型:Function,默认值nullbuilt.cropper事件的简写方式。 ====== 空间初始化完成后执行dragstart:类型:Function,默认值nulldragstart.cropper事件的简写方式。 ====== 拖动开始执行dragmove:类型:Function,默认值nulldragmove.cropper事件的简写方式。====== 拖动移动中执行dragend:类型:Function,默认值nulldragend.cropper事件的简写方式。====== 拖动结束执行zoomin:类型:Function,默认值nullzoomin.cropper事件的简写方式。 ====== 缩小执行zoomout:类型:Function,默认值nullzoomout.cropper事件的简写方式。 ====== 放大执行

示例代码:

html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!\-\- 选择头像弹出层 -->
<div class="clear show-selhead affix t-0 l-0 z-999 full-wh rgba-60 dis-n">
<div class="pos-a t-150 l-0 full-w">
<div class="w-900 mg-0-auto clear pos-r bg-white selhead-content radius-5 t--300 modal-content">
<div class="pt-10 pb-10 line-h-25 pos-r f-20 pl-20 pr-20 col-333 full-w radius-5 cur-d">
选择头像
<img class="pos-a t-10 r-20 img-20 close-mod cur-p" src="../../img/user/user/close.png" alt="">
</div>
<div class="clear bor bor-t bor-col-f2 pd-20">
<div class="clear col-sm-9 h-364 bg-fcfcfc box-sha-inset-big pos-r pl-0 pr-0 overflow-h">
<div class="clear " style="width: 643px;height: 364px;">
<img id="show-main-img" class="max-w-100p" src="">
</div>
</div>
<div class="clear col-sm-3">
<div class="clear">
<img id="show-little-imgv1" class="img-184 img-thumbnail" src="" alt="">
</div>
<div class="clear mt-15">
<img id="show-little-imgv2" class="img-184 img-thumbnail full-radius" src="" alt="">
</div>
</div>
<div class="clear col-sm-12 pl-0 pr-0 mt-30 mb-10">
<div class="clear col-sm-9 btn-toolbar" role="toolbar">
<div class="btn-group pull-left col-sm-2" role="group">
<span class="btn btn-success pos-r cur-p">
<input type="file" id="sel-file" class="opacity-0 pos-a t-0 l-0 full-wh cur-p">选择文件
</span>
</div>
<div class="btn-group pull-left col-sm-3" role="group">
<button type="button" class="btn btn-success cro-btn-reset">重置操作</button>
</div>
<div class="btn-group pull-left pull-right" role="group">
<button type="button" class="btn btn-success cro-btn-big">放大</button>
<button type="button" class="btn btn-success cro-btn-small">缩小</button>
<button type="button" class="btn btn-success cro-btn-left">左旋</button>
<button type="button" class="btn btn-success cro-btn-right">右旋</button>
</div>
</div>
<div class="clear col-sm-3">
<button class="btn full-w btn-success cro-btn-submit">确定上传</button>
</div>
</div>
</div>
</div>
</div>
</div>

js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
/*选择头像部分图像操作部分js*/
cutimg();

function cutimg() {
$('#show-main-img').cropper({
aspectRatio: 1 / 1,
crop: function(e) {
var nowspace = $('#show-main-img').cropper("getCroppedCanvas", { width: 200, height: 200 });
var dataurl = nowspace.toDataURL('image/jpeg');
$("#show-little-imgv1").attr("src", dataurl);
$("#show-little-imgv2").attr("src", dataurl);
}
});
};
$('#sel-file').change(function(e) {
var file = e.target.files\[0\];
var bloburl = URL.createObjectURL(file);
$('#show-main-img').attr("src", bloburl);
$('#show-main-img').cropper("destroy");
cutimg();
});
$(".cro-btn-big").click(function() {
$('#show-main-img').cropper("zoom", 0.1);
})
$(".cro-btn-small").click(function() {
$('#show-main-img').cropper("zoom", -0.1);
})
$(".cro-btn-left").click(function() {
$('#show-main-img').cropper("rotate", -90);
})
$(".cro-btn-right").click(function() {
$('#show-main-img').cropper("rotate", 90);
})
$(".cro-btn-reset").click(function() {
$('#show-main-img').cropper("reset");
})
$(".cro-btn-submit").click(function() {
var submitspace = $('#show-main-img').cropper("getCroppedCanvas", { width: 200, height: 200 });
var submiturl = submitspace.toDataURL('image/jpeg');
console.log(submiturl);

var layindex = layer.load(2, {
shade: \[0.4, '#000'\] //0.1透明度的白色背景
});
//此处用setTimeout演示ajax的回调
setTimeout(function() {
layer.close(layindex);
}, 3000);
})

效果图

[

  • 版权声明: 本博客所有文章,未经许可,任何单位及个人不得做营利性使用!转载请标明出处!如有侵权请联系作者。
  • Copyrights © 2015-2020 翟天野

请我喝杯咖啡吧~