相关疑难解决方法(0)

我一直在尝试重新实现像Mozilla Hacks网站上的 HTML5图像上传器,但它适用于WebKit浏览器.部分任务是从canvas对象中提取图像文件并将其附加到FormData对象以进行上载.

问题是虽然canvas具有toDataURL返回图像文件表示的函数,但FormData对象仅接受来自File API的 File或Blob对象.

Mozilla解决方案使用以下仅限Firefox的功能canvas:

var file = canvas.mozGetAsFile("foo.png");

...在WebKit浏览器上不可用.我能想到的最好的解决方案是找到一种方法将数据URI转换为File对象,我认为它可能是File API的一部分,但我不能为我的生活找到一些东西.

可能吗？如果没有,任何替代方案？

谢谢.

我正在尝试使用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服务器端，我可以看到表单正在通过，但是“截屏”是作为文本字段而不是文件接收的。我正在使用multer，并且确认至少在使用Postman时，我可以正确接收和保存文件上传。

所以我想基本的问题是我需要指出我要附加到FormData的项是文件，而不是文本字段。但是我不知道该怎么做。我尝试使用带有三个参数的append，并尝试将imgData转换为如下所示的Blob：

const blob = new Blob([img], {type: 'image/png'});

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