Skip to content

Instantly share code, notes, and snippets.

@Gardelll

Gardelll/crop-image.html

Created January 17, 2021 12:32
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Gardelll/361ce2e9378fac977540d0d271c08089 to your computer and use it in GitHub Desktop.
Save Gardelll/361ce2e9378fac977540d0d271c08089 to your computer and use it in GitHub Desktop.
Download ZIP
Image Crop & Upload HTML using Cropper.js
Raw
crop-image.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.bootcdn.net/ajax/libs/cropperjs/1.5.7/cropper.min.css" rel="stylesheet">
<title>Crop Image Test</title>
<style>
.upload-img {
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
max-width: 75%;
max-height: 100%;
margin: 20px auto;
}
.preview-img {
display: block;
max-width: 100%;
}
.progress-mask {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
background-color: #3b3b3b;
opacity: 0.75;
margin: 0;
visibility: hidden;
}
.progress {
display: block;
background: white;
color: black;
position: relative;
padding: 25px;
margin: 15% auto;
width: 50%;
height: 35%;
border-radius: 12px;
visibility: hidden;
}
</style>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="upload-part" class="upload-img">
<p>双击切换选择与移动，支持拖动 (Double click to toggle resize and move, support dragging)</p>
<img id="image-to-crop" onclick="document.getElementById('img-input').click()" class="preview-img"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAE2UlEQVR4nO3d4W3jNhiA4RvhRsgI3iAexZtYI3iDbqJPmuC6SUdwfyQFUrn6TlJpU2KeB+CfHMKQpl7gICX2jx8AAAAAAAAAAAAAAAAAAItFxGUcx+s4jteIOH/5+ts/X186IuKy5OesmO88N9/aucZxvCZrO+9gr28zc5U+hy17fdo5TK6/2XVXExFDRNw/R/fl6+cvX186hoU/Z+nokvnWznVP5up2sNfzzFylz2HLXp92DpPXanbd1YRABCKQeTEfyOnz39aMW/Jzbhvmu/xm3atGMtdlB3s9zcxV+hy27PVp53DYQOAVBAIJgUBCIJAQCCQEAgmBQEIgkBAIJI4QyCU+fv2gi+SX0uAZJtffpfZ6AAAAAOCAIuI2DEMMwxBus/Fqk+tv9g+9qvGgkJqO8KBQIFQjEEgIBBICgYRAICEQSAgEEgKBhEAgIRBICAQSRwjkFB9vsX+OmQ9xgWeZXH//+Q73AAAAAB93Efq+f+/7/t1dLF5tcv3t7y6W5yDUdITnIAKhGoFAQiCQEAgkBAIJgUBCIJAQCCQE0qBxHK+/G+GNwBcRSIO+vF7ZGGqv8wgE0iCBlHOEQG6fixz8t2AZgZQzuf729/kgrCcQSAgEEgKBhEAgIRBICOQbCR8DvZpAygkfA90egZQTB3hQKJCVBFKOQBokkHIE0iCBlCOQBgmkHIE0SCDlCKRBAilHIA0SSDkCaZBAyhFIgwRSjkAaJJByBNIggZRzhEAuEdF9jnPt9RyBQMqZXH+X2uuhAIFAQiCQEAgkBMKhxJe/SnvFWBLIMAx/vXhNl9rnwE7Fv28VftfR1T6HJkUDz0FCIPdo4+yG2ut5EAJpZXS1z2GLEMjzhUDu0cbZDbXX8yAE0sroap/DFiGQ5wuB3KONsxtqr+dBCKSV0dU+hy1CIM8XArlHG2c31F7PgxBIK6OrfQ5bhECeLyJOEXF+4Vhywf754jW91T6HLQTSoIWBDLXXeQQCaZBAyhFIgwRSjkAaJJBydh8I6wkEEgKBhEAgIRBICAQSAvlGIuIyjuN1HMdreGfFRQRSzuT6u9Rez4PwHGQ1gZQTe38OIpD1BFKOQBokkHIE0iCBlCOQBgmkHIE0SCDlCKRBAilHIA0SSDkCaZBAyhFIgwRSjkAaJJByBNIggZRzhEBun4scYo+/LLZDAilncv3daq+HAgQCCYFAQiAAALBdRNx8GD21TK6//d3m9aCQmo7woFAgVCMQSAgEEgKBhEAgIRBICAQSAoGEQCAhEEgIBBJHCOQUEefP8VZ7PXwvk+vvVHs9AAAAwF5FxKnv+/e+79/dxeLVJtff/u5ieQ5CTUd4DiIQqhEIJAQCCYFAQiCQEAgkBAIJgUBCIJAQCCQEAgmBQGL3gQAAAADA/kXEZRzH6ziO14g4114P38vk+rvUXs8Dz0GoaffPQQRCTYcKZBiGP5a8BUt8eauWpSMifs7Nt3auvu/fk7W9bVjbW8m1ze01In5umKv0ORTd6/89h2EYfh0mkMkYNnxPNs7JfGvnuidzdRvm60qubW6v8fEO5mvnKn0ORfda+Bxm91pN8iIPG74nG+dkvtoH05Vc29xeQyCb91pN8iIPG74nG+dkvtoH05Vc29xeQyCb9woAAAAAAAAAAAAAAAAA8OhvSHNNId8FMJUAAAAASUVORK5CYII="/>
<label for="img-input">选择图片 (Pick image)</label><br/>
<!-- 选择图片按钮 -->
<input type="file" accept="image/*" id="img-input"/>
<br/>
<!-- 图片旋转 -->
<input type="range" min="0" value="0" max="360" id="rotate-input" style="width: 100%;"/>
<br/>
<!-- 确认上传 -->
<button id="confirm-btn">确认并上传 (Confirm & Upload)</button>
</div>
<div class='progress-mask'>
</div>
<div class="progress">
<!-- 可以替换成进度条之类的 -->
<h1>请稍后(Processing)...</h1>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/cropperjs/1.5.7/cropper.min.js"></script>
<script>
/**
* 显示/隐藏提示
* @param value 是否显示
*/
function show_progress(value) {
document.getElementsByClassName("progress-mask")[0].style.visibility = value ? 'visible' : 'hidden';
document.getElementsByClassName("progress")[0].style.visibility = value ? 'visible' : 'hidden';
}
// 图片展示框
const image = document.getElementById('image-to-crop');
// 选择文件后显示裁剪框
$('#img-input').change(function () {
let path = this.value;
if (path === undefined || path == null || path === '') {
alert("未选择文件(Nothing to do)");
return;
}
const cropper = image.cropper;
if (cropper !== undefined) {
cropper.destroy();
}
let reader = new FileReader();
reader.onload = function (e) {
image.setAttribute('src', e.target.result);
const cropper = new Cropper(image, {
aspectRatio: 1, // 比例 (Ratio) https://github.com/fengyuanchen/cropperjs#aspectratio
viewMode: 1, // https://github.com/fengyuanchen/cropperjs#viewmode
rotatable: true
});
}
reader.readAsDataURL(this.files[0]);
});
// 旋转事件
$('#rotate-input').change(function () {
const cropper = image.cropper;
if (cropper !== undefined) {
cropper.rotateTo(this.value);
}
});
// 点击上传按钮
$('#confirm-btn').click(function () {
const cropper = image.cropper;
if (cropper !== undefined) {
show_progress(true);
cropper.getCroppedCanvas().toBlob(function (blob) {
const formData = new FormData();
formData.append('image', blob);
$.ajax('https://your.url/menu-api/upload-image', {
method: 'POST',
data: formData,
processData: false,
contentType: false,
success(data) {
console.log(data);
cropper.destroy();
image.setAttribute('src', data.url); // 假设服务器返回 `data.url` 作为图片的地址; Except server responses `data.url` as image's url address
show_progress(false);
},
error(jqXHR) {
const data = JSON.parse(jqXHR.responseText);
console.log(data);
alert(data.errorMessage);
show_progress(false);
// ========== 上传失败，重置
let reader = new FileReader();
reader.onload = function (e) {
image.setAttribute('src', e.target.result);
cropper.destroy();
}
reader.readAsDataURL(blob);
// ==========
}
});
});
} else {
alert("未选择文件(Nothing to do)");
}
});
const uploadDropBox = document.getElementById("upload-part"); // 响应拖动事件
function doNothing(e) {
e.stopPropagation(); // 取消浏览器的默认打开事件
e.preventDefault();
}
uploadDropBox.addEventListener('dragenter', doNothing, false); // 鼠标进入区域
uploadDropBox.addEventListener('dragover', doNothing, false); // 鼠标在区域移动
uploadDropBox.addEventListener('drop', function (e) { // 鼠标在区域释放
doNothing(e);
const dt = e.dataTransfer;
if (dt.files == undefined || dt.files.length == 0) return;
const imgFile = dt.files[0];
if (imgFile != undefined && imgFile.type.startsWith('image/')) {
const cropper = image.cropper;
if (cropper != undefined) {
cropper.destroy();
}
var reader = new FileReader();
reader.onload = function (e) {
image.setAttribute('src', e.target.result);
const cropper = new Cropper(image, {
aspectRatio: 1,
viewMode: 1,
rotatable: true
});
}
reader.readAsDataURL(imgFile);
}
}, false);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment