将canvas.toDataURL()作为FormData发送

Question

我正在尝试使用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'});

但结果并没有让我更接近我想要的。

- wbruntra

---

不要使用toDataURL，而是应该使用canvas.toBlob方法。之后将blob添加到FormData中即可。 - Wazner

它起作用了，谢谢。 - wbruntra

Answer 1

要在POST请求中发送二进制数据，您需要使用Blob。Blob表示原始的二进制数据。要获取Canvas的Blob，可以使用toBlob方法。

一旦您获得了Blob实例，您可以使用append方法将Blob添加到FormData中作为第二个参数传递Blob实例。您甚至可以通过传递可选的第三个参数来指定要与Blob一起发送到服务器的文件名。

服务器将接收到Blob作为文件数据。

以下是操作示例：

const canvas = document.getElementById('my-canvas');
canvas.toBlob(function(blob) {
  const formData = new FormData();
  formData.append('my-file', blob, 'filename.png');

  // Post via axios or other transport method
  axios.post('/api/upload', formData);
});

- Wazner

---

一个小的代码片段展示这个操作将会有很大的帮助。 - Steven Jeffries

@TamaghnaBanerjee 它为什么不起作用？你遇到了什么错误？也许我可以帮助你。 - Wazner

表单数据不像文件上传那样发送。我实际上创建了一个 API，它接受并期望文件上传为类似于我们通过上传按钮进行的传统文件上传的表单数据。我想使用相同的过程，只是将画布数据转换为该格式。这可行吗？ - Tamaghna Banerjee

@ht006 这样发送应该像普通的文件上传一样。您收到了什么错误？ - Wazner

@ht006 我认为这超出了答案的范围。问题是关于如何将文件发送到服务器，而不是如何接收它。有许多不同的后端语言。一个新的问题，比如“如何在node.js服务器中接收上传的文件”，更适合这样的答案。 - Wazner