将 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.onerror = function () {
    console.log('error');
}

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

xhr.send (fd);

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){            
    }
});

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

顺便说一句：您写了“我不使用 canvas.toBlob，因为它的浏览器支持尚不清楚” - 您可以在此处查看浏览器支持：