spine/index.js

window.onload = function () {
    const canvas = document.getElementById('myCanvas');
    const saveImageBtn = document.getElementById('startRecording');
    const zip = new JSZip();
    let num = 0
    saveImageBtn.addEventListener('click', () => {
        // Convert canvas content to data URL
        num = 0
        saveImageBtn.disabled = true
        saveImgZip(num)
    });

    function saveImgZip() {
        const tempCanvas = document.createElement('canvas');
        const tempContext = tempCanvas.getContext('2d');
        const time = setInterval(() => {
            if (num < 10) {
                num++
                const addToZip = (canvas, filename) => {
                    const dataURL = canvas.toDataURL('image/JPEG').split(',')[1];
                    zip.file(filename, dataURL, { base64: true });
                };

                const scaledWidth = 720;  // Change this to your desired width
                const scaledHeight = 1280; // Change this to your desired height
                tempCanvas.width = scaledWidth
                tempCanvas.height = scaledHeight
                tempContext.drawImage(canvas, 0, 0, canvas.width, canvas.height, 0, 0, scaledWidth, scaledHeight);
                addToZip(tempCanvas, `${num}.jpg`);
            } else {
                clearInterval(time)
                uploadZip()
            }
        }, 1000);
    }

    function uploadZip() {
        saveImageBtn.disabled = false
        console.log("1111",new Date().getTime())
        zip.generateAsync({ type: 'blob' })
            .then((blob) => {
                let obj = blob;
                obj.name = new Date().getTime()+".zip"
                postData("http://127.0.0.1:5000/uploadImage",obj,function (response) {
                    console.log(response,"请求成功");
                })
            });
    }
    function postData(url, data, callback) {
        // var xhr = new XMLHttpRequest();
        // xhr.open("POST", url, true);
        // xhr.setRequestHeader("Content-Type", "application/json");

        // xhr.onreadystatechange = function () {
        //     if (xhr.readyState === 4 && xhr.status === 200) {
        //         callback(JSON.parse(xhr.responseText));
        //     }
        // };
        var formData = new FormData();
        // // 将文件添加到 FormData 对象中
        // // let datas = new File(data,new Date().getTime() + ".zip")
        let fileBlob = new File(
            [data],
            new Date().getTime() + ".zip"
          );
        
        formData.append('file', fileBlob);
        // console.log(formData)
        // xhr.send(data);
        // 发送 POST 请求
        fetch(url, {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            callback(data);
        })
        .catch(error => {
            callback(error);
        });
    }

    // 例子用法
    // var apiUrl = "https://example.com/api";
    // var requestData = {
    //     key1: "value1",
    //     key2: "value2",
    // };

    // postData(apiUrl, requestData, function (response) {
    //     console.log(response);
    // });

}