Блог

Главная - Вопросы по программированию - Как решить эту проблему на iPhone и Mac с помощью Croppie js

Как решить эту проблему на iPhone и Mac с помощью Croppie js

#javascript #vue.js

Вопрос:

как твои дела? У меня есть одна проблема. Я создал обрезку изображений с помощью Vue(CDN). Он хорошо работает на всех устройствах и браузерах, кроме iphone и mac. Когда я загружаю изображение в систему iphone и Mac, оно не работает. В кодексе

 async function uploadNewPhoto(photoID,photoImg)

возвращает пустое тело на стороне сервера (только в apple).
Я использовал эту демонстрационную версию.
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 amp;amp; 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>

Если у вас есть опыт в этой области, пожалуйста, помогите мне.
Спасибо.

Метки: