Question

我的html代码如下：

<div id="wrapper">
     <img id="photo" src="http://autralis.blob.core.windows.net/thumbnails/1024x768/36/74/57/36745738883478623422431720268247042049573454290037543508541937745291910806066.jpg"/>
     <canvas id="canvas"></canvas>
</div>
<button id="save-button" onclick="onSaveChanges()">Save</button>

因此我有一个图像，在那个图像上我想绘制画布。这很好。

但现在我想将它上传到服务器，但不仅仅是画布。我想将图像和画布一起上传为一张图像。我怎么能这样做？

这是我尝试上传的js代码：

function onSaveChanges(){
    save_button_label.classList.add('hide');
    save_button_spinner.classList.remove('hide');

    var body = new FormData();
    var canvasData = canvas.toDataURL("image/png");
    body.append('photo', canvasData);


    var xhr = new XMLHttpRequest();
    xhr.open('POST', url);

    xhr.onload = function (e) {
        if (xhr.readyState === 4 && xhr.status === 200) {
            // const result = JSON.parse(xhr.responseText);
            renderMessage(success, upload_success_msg)
        }
    };
    xhr.onerror = function (e) {
        renderMessage(errors, upload_error_msg)
    };
    xhr.send(body);
}

但是使用var canvasData = canvas.toDataURL("image/png");我只得到画布，而不是图像。

我知道如何将图像和画布一起上传为一张图像？

提前致谢。

更新

红色边框是画布，蓝色边框是图像。我想把它作为一个图像上传，因此它们一起作为一个。

Answer 1

我改变了一下html：

<div id="result" style="background-color: red;">
     <img id="photo" src="assets/images/audi.png"/>
     <canvas id="canvas"></canvas>
</div>

我使用了HTML2Canvas库，它会截取您想要的任何内容并将其保存为图像。

javascript如下：

function upload_to_server(canvasData){

    return fetch(api_url, {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({photo: canvasData})
    }).then(function (value) {
        if(value.ok){
            return value.json().then(function (response) {
                // Do something with response
            })
        }
    }).catch(function (reason) {
        // Handle error
    })

}

function onSaveChanges(){
    save_button_label.classList.add('hide');
    save_button_spinner.classList.remove('hide');

    html2canvas(document.getElementById("result")).then(function(canvas) {
        var canvasData = canvas.toDataURL("image/" + image_type + "");
        upload_to_server(canvasData)
    });
}

我希望它会对某人有所帮助。

如何使用Javascript将画布和图像上传到服务器

1 个答案: