javascript - 将 canvas.toDataURL DOMString url 变成一个 blob，

Question

我正在使用 cropperjs 裁剪图像

使用方法getCroppedCanvas获取对裁剪后的 Canvas 图像的引用

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

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

我的问题是如何转换从 canvas.toDataURL 获得的字符串？成一个blob，这样我以后可以在formData中使用它。

更新

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

Answer 1

我在使用某些工具时使用的一种方法是使用此函数将 dataURL 转换为 Blob:

function dataURLtoBlob(dataurl) {
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while(n--){
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], {type:mime});
}

然后您可以使用 native xhr 将 Blob 发送到服务器，如下所示:

var blob = dataURLtoBlob(dataURI);
var fd = new FormData();
var xhr = new XMLHttpRequest ();

fd.append ('file', blob);
xhr.open('POST', '/endpoint', true);

xhr.onerror = function () {
    console.log('error');
}

xhr.onload = function () {
    console.log('success')
}

xhr.send (fd);

Blob 构建器代码取自这里: https://stackoverflow.com/a/30407840/2386736