Cropper.js進(jìn)階之裁剪后保存至服務(wù)器實(shí)現(xiàn)詳解
更新時(shí)間：2023年05月06日 15:53:10 作者：MerkleJqueryRu
這篇文章主要為大家介紹了Cropper.js進(jìn)階之裁剪后保存至服務(wù)器實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
Cropper.js將截圖保存到服務(wù)器并使用Fetch進(jìn)行請(qǐng)求
要使用Cropper.js將截圖保存到服務(wù)器并使用Fetch進(jìn)行請(qǐng)求，你需要執(zhí)行以下步驟：
- 在你的HTML頁面中，確保已經(jīng)引入了Cropper.js和Fetch API。
<script src="path/to/cropper.js"></script>
- 創(chuàng)建一個(gè)用于顯示和裁剪圖片的容器。
<div> <img id="image" src="path/to/image.jpg" alt="Image"> </div>
- 在你的JavaScript代碼中，初始化Cropper.js，并添加保存按鈕的事件處理程序。
// 獲取裁剪后的圖片數(shù)據(jù)
var croppedCanvas = cropper.getCroppedCanvas();
// 將圖片數(shù)據(jù)轉(zhuǎn)換為Blob對(duì)象
croppedCanvas.toBlob(function(blob) {
// 創(chuàng)建FormData對(duì)象，用于發(fā)送數(shù)據(jù)
var formData = new FormData();
formData.append('image', blob, 'cropped-image.jpg');
// 發(fā)送請(qǐng)求保存圖片
fetch('path/to/save-endpoint', {
method: 'POST',
body: formData
})
.then(function(response) {
// 處理響應(yīng)
if (response.ok) {
console.log('Image saved successfully.');
} else {
console.error('Error saving image.');
}
})
.catch(function(error) {
console.error('Error saving image:', error);
});
});
在上面的代碼中，你需要根據(jù)你的實(shí)際情況進(jìn)行調(diào)整：
- 替換
path/to/cropper.js為Cropper.js文件的實(shí)際路徑。 - 將
path/to/image.jpg替換為要進(jìn)行裁剪的圖片的實(shí)際路徑。 - 替換
path/to/save-endpoint為用于保存圖片的服務(wù)器端點(diǎn)的實(shí)際URL。
此代碼將捕獲裁剪后的圖像數(shù)據(jù)，將其轉(zhuǎn)換為Blob對(duì)象，然后使用Fetch API將其發(fā)送到服務(wù)器端點(diǎn)進(jìn)行保存。請(qǐng)確保你的服務(wù)器端點(diǎn)能夠接收并處理該請(qǐng)求，并將圖像保存到適當(dāng)?shù)奈恢谩?/p>
注意：在使用Fetch API發(fā)送FormData對(duì)象時(shí)，請(qǐng)求的Content-Type將自動(dòng)設(shè)置為multipart/form-data，這適用于傳輸文件數(shù)據(jù)。
全部前端代碼
<!DOCTYPE html>
<html>
<head>
<title>圖片裁剪工具</title>
<link rel="stylesheet" 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; // 設(shè)置裁剪結(jié)果的固定寬度
var fixedHeight = 200; // 設(shè)置裁剪結(jié)果的固定高度
var aspectRatio = fixedWidth / fixedHeight; // 計(jì)算寬高比
// 創(chuàng)建 Cropper 實(shí)例，設(shè)置寬高比，禁止移動(dòng)和縮放裁剪框，禁止重新框選選取
var cropper = new Cropper(image, {
viewMode: 2 // 設(shè)置裁剪框在圖像上的顯示模式
});
function save() {
// 獲取裁剪后的圖片數(shù)據(jù)
var croppedCanvas = cropper.getCroppedCanvas();
// 將圖片數(shù)據(jù)轉(zhuǎn)換為Blob對(duì)象
croppedCanvas.toBlob(function (blob) {
// 創(chuàng)建FormData對(duì)象，用于發(fā)送數(shù)據(jù)
var formData = new FormData();
formData.append('image', blob, 'cropped-image.jpg');
// 發(fā)送請(qǐng)求保存圖片
fetch('http://127.0.0.1:5000/save_image', {
method: 'POST',
body: formData
})
.then(function (response) {
// 處理響應(yīng)
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補(bǔ)充了一段后端代碼，大家僅做參考
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']
# 處理上傳的文件，保存到服務(wù)器或進(jìn)行其他操作
image_file.save('./image.jpg')
return {"code": "200"}
else:
return {"code": "500"}
if __name__ == '__main__':
app.run()以上就是Cropper.js進(jìn)階之裁剪后保存至服務(wù)器實(shí)現(xiàn)詳解的詳細(xì)內(nèi)容，更多關(guān)于Cropper.js裁剪后保存服務(wù)器的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
下面小編就為大家?guī)硪黄狫S模態(tài)窗口返回值兼容問題的完美解決方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05
這篇文章主要介紹了微信小程序Echarts覆蓋正常組件問題解決,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-07-07
JavaScript的面向?qū)ο?一)...2006-11-11
一個(gè)小項(xiàng)目中用到，奉命進(jìn)行修改，定位到2009-03-03
用js實(shí)現(xiàn)層隨著內(nèi)容大小動(dòng)態(tài)漸變改變 推薦
以前做谷歌的小工具時(shí)，api里提供了一個(gè)很有用的函數(shù)，那就是在程序運(yùn)行時(shí)可以使層動(dòng)態(tài)隨內(nèi)容大小而變化，而且是平滑變換，在一些jquery的lightbox里也普遍有這種效果，看起來很酷的樣子。2009-12-12
這篇文章主要為大家詳細(xì)介紹了js模擬實(shí)現(xiàn)京東詳情頁圖片放大效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
使用JSON格式提交數(shù)據(jù)到服務(wù)端的實(shí)例代碼
這篇文章主要介紹了使用JSON格式提交數(shù)據(jù)到服務(wù)端的實(shí)例代碼，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下2018-04-04
echarts餅圖各個(gè)板塊之間的空隙如何實(shí)現(xiàn)
這篇文章主要給大家介紹了關(guān)于echarts餅圖各個(gè)板塊之間的空隙如何實(shí)現(xiàn)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
原生js實(shí)現(xiàn)移動(dòng)端Touch輪播圖的方法步驟
這篇文章主要介紹了原生js實(shí)現(xiàn)移動(dòng)端Touch輪播圖的方法步驟，touch輪播圖其實(shí)就是通過手指的滑動(dòng)，來左右切換輪播圖，touch輪播圖其實(shí)就是通過手指的滑動(dòng)，來左右切換輪播圖，2019-01-01
這篇文章主要為大家詳細(xì)介紹了原生JavaScript實(shí)現(xiàn)換膚，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-02-02