开源是程序员的基本美德
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>自动裁剪</title>
<link rel="stylesheet" href="css/cropper.min.css">
</head>
<body>
<img src="" id="preview">
<input type="file" onchange="selimg(this)">
<div style="display: none">
<img src="" id="sourceimg">
</div>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/cropper.min.js"></script>
<script src="js/upload.js"></script>
<script>
var selimg = function (file) {
//开始加载loading
if (!file.files || !file.files[0]) {
return;
}
var reader = new FileReader();
reader.onload = function (evt) {
var replaceSrc = evt.target.result;
// 更换cropper的图片
$('#sourceimg').cropper('replace', replaceSrc, false); // 默认false，适应高度，不失真
}
reader.readAsDataURL(file.files[0]);
}
//确认裁剪
var Btn_Over = function () {
var cas = $('#sourceimg').cropper('getCroppedCanvas', {
width: 500,
height: 500
});
var base64 = cas.toDataURL('image/jpeg');
var blob = getBlobBydataURI(base64, "image/jpg");
//上传方法
// uploadOne($("#sourceimg"), "product", blob, function (data) {
// if (data.IsSuccess) {
// var imgs = data.Message.split(",");
// var domain = data.DoMain + "/";
// $(imgs).each(function (i, item) {
// console.log(domain + item);
// $("#preview").attr("src", domain + item);
// //loading 结束
// });
// }
// });
}
//初始化
$('#sourceimg').cropper({
aspectRatio: 1 / 1,
minContainerWidth: 800,
minContainerHeight: 800,
zoomOnWheel: true,
movable: true,
viewMode: 1,
dragMode: 'none',
ready: function (data) {
Btn_Over();
}
});
//base64转换
function getBlobBydataURI(dataUrl, type) {
var binary = atob(dataUrl.split(',')[1]);
var array = [];
for (var i = 0; i < binary.length; i++) {
array.push(binary.charCodeAt(i));
}
return new Blob([new Uint8Array(array)], {
type: type
});
}
</script>
</body>
</html>
川公网安备 51010702003150号
留下您的脚步
最近评论