Cropper.js进阶之裁剪后保存至服务器实现详解
作者：MerkleJqueryRu
这篇文章主要为大家介绍了Cropper.js进阶之裁剪后保存至服务器实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
Cropper.js将截图保存到服务器并使用Fetch进行请求
要使用Cropper.js将截图保存到服务器并使用Fetch进行请求，你需要执行以下步骤：
- 在你的HTML页面中，确保已经引入了Cropper.js和Fetch API。
<script src="path/to/cropper.js"></script>
- 创建一个用于显示和裁剪图片的容器。
<div> <img id="image" src="path/to/image.jpg" alt="Image"> </div>
- 在你的JavaScript代码中，初始化Cropper.js，并添加保存按钮的事件处理程序。
// 获取裁剪后的图片数据
var croppedCanvas = cropper.getCroppedCanvas();
// 将图片数据转换为Blob对象
croppedCanvas.toBlob(function(blob) {
// 创建FormData对象，用于发送数据
var formData = new FormData();
formData.append('image', blob, 'cropped-image.jpg');
// 发送请求保存图片
fetch('path/to/save-endpoint', {
method: 'POST',
body: formData
})
.then(function(response) {
// 处理响应
if (response.ok) {
console.log('Image saved successfully.');
} else {
console.error('Error saving image.');
}
})
.catch(function(error) {
console.error('Error saving image:', error);
});
});
在上面的代码中，你需要根据你的实际情况进行调整：
- 替换
path/to/cropper.js为Cropper.js文件的实际路径。 - 将
path/to/image.jpg替换为要进行裁剪的图片的实际路径。 - 替换
path/to/save-endpoint为用于保存图片的服务器端点的实际URL。
此代码将捕获裁剪后的图像数据，将其转换为Blob对象，然后使用Fetch API将其发送到服务器端点进行保存。请确保你的服务器端点能够接收并处理该请求，并将图像保存到适当的位置。
注意：在使用Fetch API发送FormData对象时，请求的Content-Type将自动设置为multipart/form-data，这适用于传输文件数据。
全部前端代码
<!DOCTYPE html>
<html>
<head>
<title>图片裁剪工具</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.11/cropper.min.css" rel="external nofollow" >
<style>
img {
width: 800px;
height: 500px;
}
</style>
</head>
<body>
<div>
<img src="./t019228fc2ed5df1aa8.jpg" id="image">
</div>
<button onclick="save()"> 保存 </button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.11/cropper.min.js"></script>
<script>
var image = document.getElementById('image');
var fixedWidth = 300; // 设置裁剪结果的固定宽度
var fixedHeight = 200; // 设置裁剪结果的固定高度
var aspectRatio = fixedWidth / fixedHeight; // 计算宽高比
// 创建 Cropper 实例，设置宽高比，禁止移动和缩放裁剪框，禁止重新框选选取
var cropper = new Cropper(image, {
viewMode: 2 // 设置裁剪框在图像上的显示模式
});
function save() {
// 获取裁剪后的图片数据
var croppedCanvas = cropper.getCroppedCanvas();
// 将图片数据转换为Blob对象
croppedCanvas.toBlob(function (blob) {
// 创建FormData对象，用于发送数据
var formData = new FormData();
formData.append('image', blob, 'cropped-image.jpg');
// 发送请求保存图片
fetch('http://127.0.0.1:5000/save_image', {
method: 'POST',
body: formData
})
.then(function (response) {
// 处理响应
if (response.ok) {
console.log('Image saved successfully.');
} else {
console.error('Error saving image.');
}
})
.catch(function (error) {
console.error('Error saving image:', error);
});
})
}
</script>
</body>
</html>
为了Demo完整，我用Flask补充了一段后端代码，大家仅做参考
import base64
from flask import Flask, request, jsonify
app = Flask(__name__)
@app.route('/save_image', methods=['POST'])
def save_image():
if 'image' in request.files:
image_file = request.files['image']
# 处理上传的文件，保存到服务器或进行其他操作
image_file.save('./image.jpg')
return {"code": "200"}
else:
return {"code": "500"}
if __name__ == '__main__':
app.run()以上就是Cropper.js进阶之裁剪后保存至服务器实现详解的详细内容，更多关于Cropper.js裁剪后保存服务器的资料请关注脚本之家其它相关文章！