将数据URI转换为File然后附加到FormData [英] Convert Data URI to File then append to FormData

问题描述

我一直在尝试重新实现一个HTML5图片上传器，比如在Mozilla Hacks 网站上，但可以与WebKit浏览器一起使用。部分任务是从 canvas 对象中提取图像文件并将其附加到 FormData 上传对象。

$ b 问题是， canvas 具有 toDataURL 函数以返回图像文件的表示形式，FormData对象只接受来自的File或Blob对象href =http://www.w3.org/TR/file-upload/ =noreferrer> File API 。

Mozilla解决方案在 canvas 上使用了以下仅限Firefox的函数：

  var file = canvas.mozGetAsFile（foo.png）; 
  

...这在WebKit浏览器上不可用。我能想到的最好的解决方案是找到一种方法将数据URI转换为File对象，我认为这可能是File API的一部分，但我不能在我的生活中找到可以做到的事情。 / p>

可能吗？如果没有，任何替代品？

谢谢。

解决方案

首先，这会将dataURI转换为Blob：

 函数dataURItoBlob（dataURI）{
 //将base64 / URLEncoded数据组件转换为保存在字符串中的原始二进制数据
 var byteString; 
 if（dataURI.split（'，'）[0] .indexOf（'base64'）> = 0）
 byteString = atob（dataURI.split（'，'）[1]）; 
 else 
 byteString = unescape（dataURI.split（'，'）[1]）; 
 
 //分离出mime组件
 var mimeString = dataURI.split（'，'）[0] .split（'：'）[1] .split（';'） [0]; 
 
 //将字符串的字节写入一个类型数组
 var ia = new Uint8Array（byteString.length）; 
 for（var i = 0; i< byteString.length; i ++）{
 ia [i] = byteString.charCodeAt（i）; 
} 
 
返回新的Blob（[ia]，{type：mimeString}）; 
} 
  

从那里开始，将数据附加到表单中，一个文件很简单：

  var dataURL = canvas.toDataURL（'image / jpeg'，0.5）; 
 var blob = dataURItoBlob（dataURL）; 
 var fd = new FormData（document.forms [0]）; 
 fd.append（canvasImage，blob）; 
  

I've been trying to re-implement an HTML5 image uploader like the one on the Mozilla Hacks site, but that works with WebKit browsers. Part of the task is to extract an image file from the canvas object and append it to a FormData object for upload.

The issue is that while canvas has the toDataURL function to return a representation of the image file, the FormData object only accepts File or Blob objects from the File API.

The Mozilla solution used the following Firefox-only function on canvas:

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

...which isn't available on WebKit browsers. The best solution I could think of is to find some way to convert a Data URI into a File object, which I thought might be part of the File API, but I can't for the life of me find something to do that.

Is it possible? If not, any alternatives?

Thanks.

解决方案

After playing around with a few things, I managed to figure this out myself.

First of all, this will convert a dataURI to a Blob:

function dataURItoBlob(dataURI) {
    // convert base64/URLEncoded data component to raw binary data held in a string
    var byteString;
    if (dataURI.split(',')[0].indexOf('base64') >= 0)
        byteString = atob(dataURI.split(',')[1]);
    else
        byteString = unescape(dataURI.split(',')[1]);

    // separate out the mime component
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

    // write the bytes of the string to a typed array
    var ia = new Uint8Array(byteString.length);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }

    return new Blob([ia], {type:mimeString});
}

From there, appending the data to a form such that it will be uploaded as a file is easy:

var dataURL = canvas.toDataURL('image/jpeg', 0.5);
var blob = dataURItoBlob(dataURL);
var fd = new FormData(document.forms[0]);
fd.append("canvasImage", blob);

这篇关于将数据URI转换为File然后附加到FormData的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！