How to use dom-to-image is a library to send image in server vuejs?

Question

I am using 'dom to image library' instead of html2canvas to take screen shop of the page but i am stuck when I want to send convert image into server. I will appreciated your time. Here is what I've tried the whole weeks.

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

You can't directly use the image in the your post body, you have to use FormData to upload an image to the server: please have a look at this topic: https://stackoverflow.com/questions/43013858/how-to-post-a-file-from-a-form-with-axios — dreijntjens, May 13 '20 at 14:04

score 0 · Answer 1 · answered May 13 '20 at 14:26

You should create a blob out of the image and then set the 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)
           })
     })
}

How to use dom-to-image is a library to send image in server vuejs?

1 Answers1