有的系统上传图片做的很好，但是绝大部分系统上传图片都是只传图片或者带个压缩功能，无法让操作者自己来裁剪，又不能代码私自裁剪，只有选择图片之后，让操作者自己来更方便高效的选区裁剪，开发者只需要定好比例和尺寸即可。
代码本来可以更加简单，底层也是调用了cropper.js的方法，样式几乎没写，可以根据自己的情况再次开发。
如何将Canvas图片上传到服务器，之前的博文已经说过了，不重复了。
<!DOCTYPE html>
<html>
<head>
<title>上传头像裁剪</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport"
content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" href="cropper.css">
<link rel="stylesheet" href="CropPlug.css">
<style>
#CropShowImg{
border: 1px solid #ff0000;
}
#CropShowImg1{
border: 1px solid #1a9fe0;
}
.CropShowImg img{
width: 100px;
}
</style>
</head>
<body>
<div>
<input type="button" value="选择图片" class="CropFileInput" onclick="upload1();"/>
<input type="button" value="选择图片" class="CropFileInput" onclick="upload2();"/>
<div id="CropShowImg" class="CropShowImg">
</div>
<div id="CropShowImg1" class="CropShowImg">
</div>
</div>
<input id="CropFileInput" type="file" accept="image/*"/>
<div style="display: none;" id="CropContainer">
<img src="">
<div id="Cropbtns" class="Cropbtns">
<button data-method="CropDestroy" class="btnCropDestroy">取消</button>
<button data-method="CropGetCanvas" class="btnGetCroppedCanvas">确认</button>
</div>
</div>
</body>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="cropper.js"></script>
<script type="text/javascript" src="CropPlug-in.js"></script>
<script type="text/javascript">
var upload1=function () {
Cropinit(1/1,'CropShowImg');
$('#CropFileInput').click();
}
var upload2=function () {
Cropinit(9/16,'CropShowImg1');
$('#CropFileInput').click();
}
</script>
</html>
CSS:
#CropFileInput{
display: none;
}
#CropContainer {
position: fixed;
top: 0px;
left: 0px;
width: 100vw;
height: 100vh;
}
#CropContainer .Cropbtns {
position: fixed;
bottom: 20px;
text-align: center;
width: 100%;
}
#CropContainer .Cropbtns button {
color: #fff;
border: none;
padding: 10px 35px;
outline: none;
font-size: 18px;
}
#CropContainer .Cropbtns button:nth-child(1) {
background: #999999;
}
#CropContainer .Cropbtns button:nth-child(2) {
background: #e38d13;
}
JS:
var CropinputImage = document.getElementById('CropFileInput');//上传控件
var CropshowImg;//结果展示img
var CropfileImg = "";
var Cropper ;
var cropper;
var Cropcontainer = document.getElementById('CropContainer');//选图区域
var Cropimage = Cropcontainer.getElementsByTagName('img').item(0);//背景图
var Cropactions = document.getElementById('Cropbtns');//按钮区域
var CropscreenWidth = $(window).width();
var CropscreenHeight = $(window).height();
window.onload = function () {
//按钮事件
Cropactions.onclick = function (event) {
var e = event || window.event;
var target = e.target || e.srcElement;
var result;
var data;
if (!cropper) {
return;
}
while (target !== this) {
if (target.getAttribute('data-method')) {
break;
}
target = target.parentNode;
}
if (target === this || target.disabled || target.className.indexOf('disabled') > -1) {
return;
}
data = {
method: target.getAttribute('data-method'),
option: target.getAttribute('data-option'),
secondOption: target.getAttribute('data-second-option')
};
if (data.method) {
switch (data.method) {
case 'CropGetCanvas':
result = cropper["getCroppedCanvas"](data.option, data.secondOption);
CropfileImg = result.toDataURL('image/jpg');
// if (result) {
// var fm = new FormData();
// fm.append("fileT", CropfileImg);
// var url = "http://up.dongzouxizou.com/FileCustomUpload/UpLoading?bucket=wxshopcdn&isThumbnail=false&folder=lifeGoods/&type=jpg";
// $.ajax({
// url: url,
// type: 'POST',
// cache: false,
// data: fm,
// processData: false,
// contentType: false
// }).done(function (res) {
// if (res.IsSucceed) {
// var netimg = "http://wsfile.dongzouxizou.com.cn/" + res.FileUrl;
//
// } else {
// alert("上传失败：" + res.Message);
// }
// }).fail(function (res) {
// alert("上传失败：" + res);
// });
// }
var bl = document.createElement('div');
bl.classList.add('item');
var img = document.createElement("img");
img.src = CropfileImg;
bl.appendChild(img);
var close = document.createElement('span');
close.innerText = "删除";
close.addEventListener('click', function () {
var a = this.parentNode;
var b = this.parentNode.parentNode;
b.removeChild(a);
});
bl.appendChild(close);
CropshowImg.appendChild(bl);//截图结果
Cropcontainer.style.display = "none";
CropinputImage.value = "";//上传控件
break;
case 'CropDestroy':
CropinputImage.value = "";//上传控件
Cropcontainer.style.display = "none";
break;
}
}
};
// 上传文件选择控件监控
var URL = window.URL || window.webkitURL;
if (URL) {
CropinputImage.onchange = function () {
var files = this.files;
var file;
if (cropper && files && files.length) {
file = files[0];
if (/^image\/\w+/.test(file.type)) {
var blobURL = URL.createObjectURL(file);
cropper.reset().replace(blobURL);
} else {
window.alert('请选择图片文件');
}
}
};
} else {
CropinputImage.disabled = true;
}
};
//初始化 a:比例，b:存放结果的元素ID
var Cropinit=function (a,b) {
'use strict';
Cropper = window.Cropper;
CropscreenWidth = $(window).width();
CropscreenHeight = $(window).height();
CropshowImg = document.getElementById(b);//结果展示img
var options = {
minContainerHeight: CropscreenHeight,
minContainerWidth: CropscreenWidth,
aspectRatio: a,
viewMode: 1,//显示
guides: true,//裁剪框虚线 默认true有
dragMode: "move",
build: function (e) { //加载开始
//可以放你的过渡 效果
},
built: function (e) { //加载完成
Cropcontainer.style.display = "block";//显示选图区域
},
zoom: function (e) {
},
background: true,// 容器是否显示网格背景
movable: true,//是否能移动图片
cropBoxMovable: true,//是否允许拖动裁剪框
cropBoxResizable: true,//是否允许拖动 改变裁剪框大小
};
cropper = new Cropper(Cropimage, options);
}
川公网安备 51010702003150号
留下您的脚步
最近评论