0

我正在开发一个应用程序，用户可以在其中截取带有一些多边形的 Google 地图的屏幕截图（使用 html2canvas 库），然后使用 ajax 将其发送到服务器。完成后，用户会收到一封使用 phpMailer 发送的电子邮件（带有包含屏幕截图的 pdf）。

一切都运行良好，但问题是它可能需要很多时间才能完成。最糟糕的部分来自从客户端到服务器的图像上传。我检查了图像尺寸，它们都在 2.5Mo 左右。所以我想做的是减少图像base64编码的图像，这样上传会更快。任何人都知道如何做到这一点？

这是我的 JS 代码的一部分：

function takeScreenshot()  {


//I've hide a part of my code that center the map on the polygons drawn on it. That's why there is an idle listener right here :
        google.maps.event.addListenerOnce(mapCanvas, 'idle', function() {
            setTimeout(function() {
            //Taking the screenshot
            var nBase64URL = new Image();

            html2canvas(document.querySelector("#container"),{
                // backgroundColor: null,
                background: "#fff",
                useCORS: true,
                allowTaint: true,
                
            }
            ).then(canvas => {
                // Get base64URL
                base64URL = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream');
                nBase64URL.onload = function () {
                    document.getElementById("modal").style.display = "block"; //A loading gif is triggered after the screenshot is taken

                    requestSendScreenShotToServer(responseScreenShot);
                }
                nBase64URL.src = base64URL;

            });

        },1000);
        });

}

function requestSendScreenShotToServer (callback) { //This part is taking a lot of time, and I think it's coming from the image size to send to the server (Around 2Mo).
    
    var xhr = new XMLHttpRequest(); 
    xhr.open("POST", "../src/Ajax/ajaxSendScreenShot.php", true);


            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
                    callback(xhr.responseText); 
                }
            };

    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.send(`image=${base64URL}`);
}
4

0 回答 0