Skip to content

Instantly share code, notes, and snippets.

@fhefh2015

fhefh2015/drop.html

Created February 23, 2019 05:49
Show Gist options
  • Save fhefh2015/47f4eaf462fff2f5f1c89bd19b05476b to your computer and use it in GitHub Desktop.
Save fhefh2015/47f4eaf462fff2f5f1c89bd19b05476b to your computer and use it in GitHub Desktop.
Download ZIP
H5裁剪图片上传
Raw
drop.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="target-densitydpi=device-dpi,width=640,user-scalable=no"/>
<style>
html {
-webkit-text-size-adjust: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
font-family: Helvetica;
}
html, body {
position: relative;
height: 100%;
}
body {
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
body, h1, h2, h3, h4, h5, h6, p, dl, dd, ul, ol, pre, form, input, textarea, th, td, select {
margin: 0;
padding: 0;
font-weight: normal;
text-indent: 0;
}
a, button, input, textarea, select {
background: none;
-webkit-tap-highlight-color: rgba(255, 0, 0, 0);
outline: none;
-webkit-appearance: none;
}
em {
font-style: normal
}
li {
list-style: none
}
a {
text-decoration: none;
}
img {
border: none;
vertical-align: top;
}
table {
border-collapse: collapse;
}
textarea {
resize: none;
overflow: auto;
}
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
overflow: hidden;
}
.clearfix {
zoom: 1;
}
.display_flex {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.display_flex_1 {
-moz-box-flex: 1; /*Firefox*/
-webkit-box-flex: 1; /*Safari,Opera,Chrome*/
-webkit-flex: 1;
flex: 1;
}
.hide {
display: none;
}
#imgWrapper {
position: relative;
min-height: 400px;
background: #F1F1F1;
cursor: pointer;
text-align: center;
line-height: 0;
}
#imgWrapper:after {
display: inline-block;
content: '+ 点选择图片';
margin-top: 100px;
width: 80%;
max-width: 600px;
line-height: 200px;
color: #999;
border: 1px dashed #ccc;
border-radius: 10px;
}
#imgWrapper.hide:after {
display: none;
}
#imgWrapper .view-wrapper {
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
background: #F1F1F1;
}
.view-wrapper img {
max-width: 100%;
}
#chooseImg {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
}
.crop_btn {
width: 100px;
height: 20px;
background: #0a9c5d;
cursor: pointer;
}
.drop_image_wrap {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: #000;
z-index: 1000;
display: none;
}
.drop_image_wrap .drop_image {
position: absolute;
width: 600px;
height: 400px;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
/*background: #0a9c5d;*/
z-index: 1001;
}
.drop_image_wrap .drop_image .img {
width: 600px;
height: 400px;
}
.drop_image_wrap .drop_button_wrap {
/*background: #3388ff;*/
width: 100%;
height: 40px;
position: absolute;
z-index: 1001;
bottom: -60px;
}
.drop_image_wrap .drop_button_wrap .drop_image_item_btn {
display: block;
/*padding: 0 20px;*/
height: 40px;
line-height: 40px;
font-size: 22px;
border-radius: 4px;
color: #fff;
border: 0;
background-color: #4169e1;
cursor: pointer;
margin-left: 10px;
text-align: center;
}
.result_image_wrap {
width: 400px;
height: 400px;
margin: 0 auto;
display: none;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropper/4.0.0/cropper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropper/4.0.0/cropper.min.js"></script>
</head>
<body>
<div id="imgWrapper">
<input type="file" accept="image/*" name="file" id="chooseImg">
</div>
<div class="result_image_wrap">
<img src="" alt="" width="400" class="result_image">
</div>
<div class="drop_image_wrap">
<div class="drop_image">
<div class="img">
<img src="" id="crop_image">
</div>
<div class="drop_button_wrap display_flex">
<div class="drop_image_item_btn display_flex_1" id="reset_btn">复位</div>
<div class="drop_image_item_btn display_flex_1" id="rotate_btn">旋转</div>
<div class="drop_image_item_btn display_flex_1" id="submit_btn">确认</div>
<div class="drop_image_item_btn display_flex_1" id="cancel_btn">取消</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$("#chooseImg").on('change', function (e) {
var file = e.target;
if (!file.files || !file.files[0]) {
return;
}
$(".drop_image_wrap").show();
var reader = new FileReader();
reader.onload = function (evt) {
var replaceSrc = evt.target.result;
//更换cropper的图片
$('#crop_image').cropper('replace', replaceSrc, false);//默认false，适应高度，不失真
}
reader.readAsDataURL(file.files[0]);
});
$('#crop_image').cropper({
aspectRatio: 1 / 1,//默认比例
guides: true, //裁剪框的虚线(九宫格)
autoCropArea: 0.8, //0-1之间的数值，定义自动剪裁区域的大小，默认0.8
movable: true, //是否允许移动图片
dragMode: 'move',
cropBoxMovable: false,
cropBoxResizable: false,
zoomable: true, //是否允许缩放图片大小
mouseWheelZoom: false, //是否允许通过鼠标滚轮来缩放图片
touchDragZoom: true, //是否允许通过触摸移动来缩放图片
rotatable: true, //是否允许旋转图片
crop: function (e) {
// 输出结果数据裁剪图像。
}
});
$("#reset_btn").on('click', function () {
$('#crop_image').cropper("reset");
});
$("#rotate_btn").on('click', function () {
$('#crop_image').cropper("rotate", 45);
});
$("#submit_btn").on('click', function () {
if ($("#crop_image").attr("src") == null) {
alert("无法进行裁剪，请换一张图片");
return false;
}
var cas = $('#crop_image').cropper('getCroppedCanvas');//获取被裁剪后的canvas
var base64url = cas.toDataURL('image/png'); //转换为base64地址形式
$(".result_image").prop("src", base64url);//显示为图片的形式
//关闭裁剪框
$(".drop_image_wrap").hide();
$(".result_image_wrap").show();
});
$("#cancel_btn").on('click', function () {
$('#crop_image').cropper("destroy");
$(".drop_image_wrap").hide();
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment