相关疑难解决方法(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的一部分,但我不能为我的生活找到一些东西.

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

谢谢.

使用FileReader's readAsDataURL()我可以将任意数据转换为数据URL.有没有办法Blob使用内置的浏览器apis 将数据URL转换回实例？

我有一个显示我的网络摄像头的画布的DataURL.我使用Matt的答案将此dataURL转换为blob:如何在javascript中将dataURL转换为文件对象？

如何将此blob转换回相同的DataURL？我花了一天的时间研究这个问题并且我很震惊,除非我失明,否则没有更好的记录.

编辑:有

var urlCreator = window.URL || window.webkitURL; 
var imageUrl = urlCreator.createObjectURL(blob); 

但它只返回一个看似指向本地文件的非常短的URL,但我需要通过网络发送网络摄像头数据.

我正在尝试将画布作为图像保存到firebase存储中.我已经阅读了很多关于将canvas保存到服务器的文章和问题,并尝试使用以下代码实现相同的内容.

function server(){
    canvas = document.getElementById("c");
    var storageRef = firebase.storage().ref();
    var mountainsRef = storageRef.child('mountains.jpg');
    var image = new Image();
    image.src = canvas.toDataURL("image/png");
    var uploadTask = storageRef.child('images/' + "apple").put(image);
    uploadTask.on('state_changed', function(snapshot){
        // Observe state change events such as progress, pause, and resume
        // See below for more detail
    }, function(error) {
        // Handle unsuccessful uploads
    }, function() {
        // Handle successful uploads on complete
        // For instance, get the download URL: https://firebasestorage.googleapis.com/...
        var downloadURL = uploadTask.snapshot.downloadURL;
    });
}

但是,当我运行Web应用程序时,控制台显示错误:

FirebaseError:Firebase存储:put …

我正在使用cropperjs来裁剪图像

使用该方法getCroppedCanvas获取对裁剪后的画布图像的引用

使用canvas方法canvas.toDataURL将图像压缩成jpeg文件。

我不使用canvas.toBlob，因为它的浏览器支持尚不清楚。

我的问题是如何将我获得的字符串转换canvas.toDataURL为 blob，以便稍后可以在 formData 中使用它。

更新

服务器期望表单数据 - 多部分