<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Cropper.js</title>
<link rel="stylesheet" href="assets/css/cropper.css">
</head>
<body>
<div id="replaceImg">点我</div>
<img src="" id="finalImg" alt="">
<div class="tan-box">
<div class="tan-box-shadow"></div>
<div class="tan-content">
<div class="tan-content-title">
修改头像
<div class="tan-content-close">
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg t="1545874629367" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2971" xmlns:xlink="http://www.w3.org/1999/xlink" width="14" height="14">
<defs><style type="text/css"></style></defs>
<path d="M198.842721 851.001901c-6.255471 0-12.479219-2.381234-17.241686-7.144724-9.525957-9.525957-9.525957-24.957415 0-34.483372l628.693746-628.725468c9.525957-9.525957 24.957415-9.525957 34.483372 0 9.525957 9.525957 9.525957 24.957415 0 34.483372L216.084407 843.857177C211.32194 848.619644 205.098191 851.001901 198.842721 851.001901z" p-id="2972" fill="#8a8a8a">
</path><path d="M824.679395 848.62169c-6.255471 0-12.479219-2.381234-17.241686-7.144724L179.221848 213.230406c-9.525957-9.525957-9.525957-24.957415 0-34.483372 9.525957-9.525957 24.957415-9.525957 34.483372 0l628.215862 628.247584c9.525957 9.525957 9.525957 24.957415 0 34.483372C837.157591 846.240457 830.933843 848.62169 824.679395 848.62169z" p-id="2973" fill="#8a8a8a">
</path>
</svg>
</div>
</div>
<div class="tan-up-btncont">
<button class="tan-up-btn" id="choose">
<div class="tan-up-img">
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg t="1545876575017" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
p-id="5665" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20">
<defs><style type="text/css"></style></defs>
<path d="M912 645.4c0 44.2-15.6 81.8-46.9 113.1-31.3 31.3-69 46.8-113.1 46.8H298.7c-51.3
0-95.3-18.2-131.9-54.8C130.3 714 112 670.1 112 618.6c0-36.1 9.7-69.4 29.2-100s45.6-53.5
78.3-68.8c-0.5-8.3-0.9-14.3-0.9-17.9 0-58.9 20.9-109.2 62.5-150.8s91.9-62.5 150.8-62.5c43.3
0 83 12.1 118.9 36.3s62.1 56.3 78.5 96.2c19.7-17.3 42.8-25.8 69.1-25.8 29.4 0 54.6 10.4 75.4
31.3 20.9 20.9 31.3 46 31.3 75.4 0 21.1-5.7 40.3-17.1 57.5 36.1 8.6 65.7 27.4 88.9 56.4 23.4
29.1 35.1 62.2 35.1 99.5zM645.4 525.3c0-3.9-1.2-7.1-3.8-9.6L494.9 369.1c-2.5-2.5-5.7-3.8-9.6-3.8s-7.1
1.2-9.6 3.8L329.5 515.3c-2.8 3.3-4.2 6.7-4.2 10 0 3.9 1.2 7.1 3.8 9.6 2.5 2.5 5.7 3.8 9.6 3.8H432v146.7c0
3.6 1.3 6.7 3.9 9.4 2.6 2.6 5.8 3.9 9.4 3.9h80c3.6 0 6.7-1.3 9.4-3.9 2.6-2.6 3.9-5.8 3.9-9.4V538.6h93.3c3.6
0 6.7-1.3 9.4-3.9 2.7-2.6 4.1-5.8 4.1-9.4z" p-id="5666" fill="#2c2c2c"></path></svg>
</div>
选择要上传的文件
</button>
</div>
<div class="tan-show-option">
<div class="container">
<img src="" alt="" id="image">
</div>
<div class="preview previewImg">
<img src="" id="imga" alt="" width="100%">
</div>
<button class="upload" id="CutImgEvent">上传图片</button>
<input type="file" id="imgfile" accept="image/jpg,image/jpeg,image/png">
</div>
</div>
</div>
<script src="assets/js/jquery-2.1.1.js"></script>
<script src="assets/js/cropper.min.js"></script>
<script>
$("#choose").click(function(){
$("#imgfile").click();
})
var image = document.getElementById('image');
var cropper, canvas;
$('#imgfile').change(function(e){
var file;
var files = e.target.files;
if (files && files.length > 0) {
file = URL.createObjectURL(files[0]);
$('#image').attr({'src': file})
}
if(cropper!=undefined){
cropper.destroy()
}
cropper = new Cropper(image, {
aspectRatio: 1,
background: true, //是否显示网格背景
zoomable: true, //是否允许放大图像
guides: true, //是否显示裁剪框虚线
crop: function (event) { //剪裁框发生变化执行的函数。
canvas = cropper.getCroppedCanvas({ //使用canvas绘制一个宽和高200的图片
width: 200,
height: 200,
});
$('#imga').attr("src", canvas.toDataURL("image/png", 0.3)) //使用canvas toDataURL方法把图片转换为base64格式
}
});
})
$("#CutImgEvent").click(function(){
console.log($("#imga").attr("src"))
})
</script>
</body>
</html>
