如何使用 dom-to-image 是一个在服务器 vuejs 中发送图像的库?

Question

我正在使用"dom 到图像库"而不是 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')
}

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)
})
})
}