javascript - 如何使用 Croppie js 在 iPhone 和 Mac 上解决这个问题
问题描述
你好吗？我有一个问题。我使用 Vue(CDN) 构建了图像裁剪。它在除 iphone 和 mac 系统之外的所有设备和浏览器上运行良好。当我在 iphone 和 mac 系统上上传图像时，它不起作用。在代码中
async function uploadNewPhoto(photoID,photoImg)
在服务器端返回一个空主体（仅在苹果上）。我使用了这个演示。 https://pecuarios.club/croppie/
这是uploadNewPhoto 功能。
async function uploadNewPhoto(photoID,photoImg) {
console.log("Manager: Uploading new photo: "+photoID);
// var url="./create/image/"+photoID+"/", photoImg
var url = "./upload.php";
console.log("photoID",photoID);
const res = await fetch(url,{
method: 'POST',
mode: 'no-cors', // no-cors, *cors, same-origin
cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
credentials: 'same-origin', // include, *same-origin, omit
headers: {
'X-CSRFToken': csrftoken,
'Content-Type': 'image/png; base64;',
},
redirect: 'follow', // manual, *follow, error
referrerPolicy: 'same-origin',
body: JSON.stringify(photoImg) // body data type must match "Content-Type" header
});
return res.ok;
}
这是 HTML 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<!-- editor_new - using bootstrap4 -->
<meta name="viewport" content="width=device-width" />
<!-- csrf goodies -->
<script>
//const csrftoken = document.querySelector('[name=csrfmiddlewaretoken]').value;
function getCookie(name) {
let cookieValue = null;
if (document.cookie && document.cookie !== "") {
const cookies = document.cookie.split(";");
for (let i = 0; i < cookies.length; i++) {
const cookie = cookies[i].trim();
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) === name + "=") {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
const csrftoken = getCookie("csrftoken");
</script>
<!-- end csrf goodies -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./static/node/croppie/croppie.css" />
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--<script src="/static/node/vue-spinner/dist/vue-spinner.min.js"></script>-->
<script src="./static/node/vue-spinner/dist/vue-spinner.js"></script>
<script src="./static/node/croppie/croppie.js"></script>
<link rel="stylesheet" href="./static/css/editor_dg.css" />
</head>
<body class="bg-light">
<div id="editorApp">
<top-nav @upload-photo="cropPhoto" @cancel-photo="cancelImage" :title="this.titleText" :editing="this.mode" :numimages="Object.keys(this.croppedImages).length" :numrequired="this.numRequired"></top-nav>
<div v-bind:class="{ view: this.mode == 'CROP' }" id="editor">
<img id="viewer" width="300" height="auto" />
<div id="uploadMsg" v-bind:class="{ hide: Object.keys(this.croppedImages).length != 0 }"></div>
</div>
<card-display @delete-image="deleteImage" v-bind:class="{ hide: this.mode == 'CROP' }" :cards="this.orderedImages" :mode="this.mode" @background-selected="bgSelected"></card-display>
<bottom-nav :editing="this.mode" @save-crop="addImage" @clear-photos="clearPhotos" @next-screen="nextPressed"></bottom-nav>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/exif-js"></script>
<script type="text/javascript" src="./static/js/manager.js"></script>
<script type="text/javascript" src="./static/js/editor.js"></script>
</html>
如果您有这方面的经验，请帮助我。谢谢你。