我正在尝试使用html2canvas将DOM元素渲染为.png图像,然后我想将其上传到服务器。以下是我的代码:
我正在尝试使用html2canvas将DOM元素渲染为.png图像,然后我想将其上传到服务器。以下是我的代码:
import React, { Component, PropTypes } from 'react';
import html2canvas from 'html2canvas';
import axios from 'axios';
const sendScreenshot = (img) => {
const config = {
headers: {
'content-type': 'multipart/form-data'
}
}
let data = new FormData();
data.append('screenshot', img);
return axios.post('/api/upload', data)
}
export default class Export extends Component {
printDocument() {
const input = document.getElementById('divToPrint');
html2canvas(input).then(canvas => {
document.body.appendChild(canvas);
const imgData = canvas.toDataURL('image/png');
sendScreenshot(imgData)
});
}
...
我可以看到DOM元素已经被成功转换为图片,因为我可以看到它被附加到页面上。
在node.js服务器端,我可以看到表单已经被传输,但是“screenshot”被视为文本字段而不是文件。 我正在使用multer,并确认当我使用Postman时可以正确地接收和保存文件上传。
所以我想基本问题是我需要指示我附加到FormData的项目是文件而不是文本字段。 但我无法弄清楚如何做到这一点。 我尝试使用三个参数进行附加,并尝试像这样将imgData转换为blob:
const blob = new Blob([img], {type: 'image/png'});
但结果并没有让我更接近我想要的。