将 canvas.toDataURL DOMString url 变成一个 blob，答案

【问题标题】：turning canvas.toDataURL DOMString url into a blob,将 canvas.toDataURL DOMString url 变成一个 blob，
【发布时间】：2017-07-13 10:49:29
【问题描述】：

我正在使用 cropperjs 来裁剪图像

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

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

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

我的问题是如何将我从canvas.toDataURL 得到的字符串变成一个 blob，以便我以后可以在 formData 中使用它。

更新

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

【问题讨论】：

标签： javascript html canvas

【解决方案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.onerror = function () {
    console.log('error');
}

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

xhr.send (fd);

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

【讨论】：

【解决方案2】：

使用canvas.toDataURL 生成JPEG图像：

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

然后将其作为 data-multi-part 发送到 AJAX：

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

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

顺便说一句：你写的“我不使用canvas.toBlob，因为它的浏览器支持不清楚” - 你可以看到浏览器支持here ：

【讨论】：

我已经更新了问题，服务器期望正常的表单数据多部分