cropper左右移动_基于cropper图片裁剪,兼容PC端与移动端

所需的资源文件

html代码

更换图片

选择图片

×

图片预览：

复位

旋转

换向

确定

css代码

*{

margin: 0;padding: 0;

}

.l-btn{

display: inline-block;

outline: none;

resize: none;

border: none;

padding:5px 10px;

background: #8C85E6;

color: #fff;

border:solid 1px #8C85E6;

border-radius: 3px;

font-size: 14px;

}

.l-btn:hover{

background: #8078e3;

animation: anniu 1s infinite;

}

.l-btn:active{

box-shadow: 0 2px 3px rgba(0,0,0,.2) inset;

}

.hidden{

display: none;

}

.tailoring-container, .tailoring-container div, .tailoring-container p{

margin: 0;padding: 0;

box-sizing: border-box;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

}

.tailoring-container{

position: fixed;

width: 100%;

height: 100%;

z-index: 1000;

top: 0;

left: 0;

}

.tailoring-container .black-cloth{

position: fixed;

width: 100%;

height: 100%;

background: #111;

opacity: .9;

z-index: 1001;

}

.tailoring-container .tailoring-content{

position: absolute;

width: 768px;

height: 560px;

background: #fff;

z-index: 1002;

left: 0;

top: 0;

border-radius: 10px;

box-shadow: 0 0 10px #000;

padding: 10px;

}

.tailoring-content-one{

height: 40px;

width: 100%;

border-bottom: 1px solid #DDD ;

}

.tailoring-content .choose-btn{

float: left;

}

.tailoring-content .close-tailoring{

display: inline-block;

height: 30px;

width: 30px;

border-radius: 100%;

background: #eee;

color: #fff;

font-size: 22px;

text-align: center;

line-height: 30px;

float: right;

cursor: pointer;

}

.tailoring-content .close-tailoring:hover{

background: #ccc;

}

.tailoring-content .tailoring-content-two{

width: 100%;

height: 460px;

position: relative;

padding: 5px 0;

}

.tailoring-content .tailoring-box-parcel{

width: 520px;

height: 450px;

position: absolute;

left: 0;

border: solid 1px #ddd;

}

.tailoring-content .preview-box-parcel{

display: inline-block;

width: 228px;

height: 450px;

position: absolute;

right: 0;

padding: 4px 14px;

}

.preview-box-parcel p{

color: #555;

}

.previewImg{

width: 200px;

height: 200px;

overflow: hidden;

}

.preview-box-parcel .square{

margin-top: 10px;

border: solid 1px #ddd;

}

.preview-box-parcel .circular{

border-radius: 100%;

margin-top: 10px;

border: solid 1px #ddd;

}

.tailoring-content .tailoring-content-three{

width: 100%;

height: 40px;

border-top: 1px solid #DDD ;

padding-top: 10px;

}

.sureCut{

float: right;

}

@media all and (max-width: 768px) {

.tailoring-container .tailoring-content{

width: 100%;

min-width: 320px;

height: 460px;

}

.tailoring-content .tailoring-content-two{

height: 360px;

}

.tailoring-content .tailoring-box-parcel{

height: 350px;

}

.tailoring-container .tailoring-box-parcel{

width: 100%;

}

.tailoring-container .preview-box-parcel{

display: none;

}

}

JS代码

//弹出框水平垂直居中

(window.onresize = function () {

var win_height = $(window).height();

var win_width = $(window).width();

if (win_width <= 768){

$(".tailoring-content").css({

"top": (win_height - $(".tailoring-content").outerHeight())/2,

"left": 0

});

}else{

$(".tailoring-content").css({

"top": (win_height - $(".tailoring-content").outerHeight())/2,

"left": (win_width - $(".tailoring-content").outerWidth())/2

});

}

})();

//弹出图片裁剪框

$("#replaceImg").on("click",function () {

$(".tailoring-container").toggle();

});

//图像上传

function selectImg(file) {

if (!file.files || !file.files[0]){

return;

}

var reader = new FileReader();

reader.onload = function (evt) {

var replaceSrc = evt.target.result;

//更换cropper的图片

$('#tailoringImg').cropper('replace', replaceSrc,false);//默认false，适应高度，不失真

}

reader.readAsDataURL(file.files[0]);

}

//cropper图片裁剪

$('#tailoringImg').cropper({

aspectRatio: 3/1,//默认比例

preview: '.previewImg',//预览视图

guides: false, //裁剪框的虚线(九宫格)

autoCropArea: 1, //0-1之间的数值，定义自动剪裁区域的大小，默认0.8

movable: false, //是否允许移动图片

dragCrop: true, //是否允许移除当前的剪裁框，并通过拖动来新建一个剪裁框区域

movable: true, //是否允许移动剪裁框

resizable: true, //是否允许改变裁剪框的大小

zoomable: false, //是否允许缩放图片大小

mouseWheelZoom: false, //是否允许通过鼠标滚轮来缩放图片

touchDragZoom: true, //是否允许通过触摸移动来缩放图片

rotatable: true, //是否允许旋转图片

crop: function(e) {

// 输出结果数据裁剪图像。

}

});

//旋转

$(".cropper-rotate-btn").on("click",function () {

$('#tailoringImg').cropper("rotate", 45);

});

//复位

$(".cropper-reset-btn").on("click",function () {

$('#tailoringImg').cropper("reset");

});

//换向

var flagX = true;

$(".cropper-scaleX-btn").on("click",function () {

if(flagX){

$('#tailoringImg').cropper("scaleX", -1);

flagX = false;

}else{

$('#tailoringImg').cropper("scaleX", 1);

flagX = true;

}

flagX != flagX;

});

//裁剪后的处理

$("#sureCut").on("click",function () {

if ($("#tailoringImg").attr("src") == null ){

return false;

}else{

var cas = $('#tailoringImg').cropper('getCroppedCanvas');//获取被裁剪后的canvas

var base64url = cas.toDataURL('image/png'); //转换为base64地址形式

$("#finalImg").prop("src",base64url);//显示为图片的形式

//关闭裁剪框

closeTailor();

}

});

//关闭裁剪框

function closeTailor() {

$(".tailoring-container").toggle();

}