vue.js - 如何使用 dom-to-image 库在服务器 vuejs 中发送图像？

Question

我正在使用“dom to image library”而不是 html2canvas 来获取页面的屏幕商店，但是当我想将转换图像发送到服务器时我被卡住了。我会很感激你的时间。这是我整个星期都在尝试的方法。

//template
<div id="my-node"><h1 style="background-color:blue;padding:4px;">Welcome to the page</h1></div>
<button v-on:click="saveImage"></button>

saveImage(){
var node = document.getElementById('my-node');
domtoimage.toPng(node)
    .then(function (dataUrl) {
        var image = new Image();
        image.src = dataUrl;//From here I want to send this image to server
        //document.body.appendChild(image);
    })

//axio
new data = new form();
data.append('image')
axio.post('posts','data')
}

标签： vue.js

Answer 1

您应该从图像中创建一个 blob，然后设置 FormData：

saveImage(){
    let data = new FormData();
    domtoimage.toBlob(document.getElementById('my-node'))
      .then(function (blob) {
         data.append('data', blob);

          axios.post(`<Someurl>`, data, {
                headers: {
                    'Content-Type': 'multipart/form-data',
                },
           })
           .then(res => {
                console.log(res)
           })
     })
}