将canvas.toDataURL DOMString url转换为blob，

Question

我正在使用 cropperjs 裁剪图片

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

使用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});
}

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

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

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

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

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

blob构建器代码取自此处：https://stackoverflow.com/a/30407840/2386736

Answer 2

使用canvas.toDataURL生成JPEG图像：

var JPEG_QUALITY=0.5;
var dataUrl = canvas.toDataURL('image/jpeg', JPEG_QUALITY).replace('data:image/jpeg;base64,', '');

然后将其作为数据多部分发送给AJAX：

jQuery.ajax({
    url: 'php/upload.php',
    data: dataUrl,
    cache: false,
    contentType: false,
    processData: false,
    type: 'POST',
    success: function(data){            
    }
});

取决于服务器端希望接收的内容。

顺便说一下：你写了＆＃34;我没有使用canvas.toBlob，因为它的浏览器支持不明确＆＃34; - 你可以请参阅浏览器支持here：