Javascript 使用src blob从画布到img

我正在从画布创建一个PNG文件，但在我想将画布显示为img元素之前，使用blob作为img的src。到目前为止，我尝试的是：

canvas = document.getElementById("canvas");
//Get data from canvas
img_b64 = canvas.toDataURL('image/png');
//Create PNG
png = img_b64.split(',')[1];
//Create new img
img = document.createElement("img");
img.src = img_b64;
//Append img to document
//Save png

这是可行的，但我不想让一个blob成为img的src，就像这样：

//Create blob from new PNG
blob = new Blob([window.atob(png)], { type: 'image/png', encoding: 'utf-8' });
//Create new img with blob as src
img = document.createElement("img");
img.src = URL.createObjectURL(blob);
//Append img to document
//Save png

---

上面的代码只显示一个空img。有没有办法做到这一点，或者我必须先创建png文件，然后再为其创建blob？

我刚刚找到了一个解决方案，使用这个问题的答案：。使用

dataURItoBlob

函数，我的代码是：

canvas = document.getElementById("canvas");
//Get data from canvas
img_b64 = canvas.toDataURL('image/png');
//Create blob from DataURL
blob = dataURItoBlob(img_b64)
img = document.createElement("img");
img.src = URL.createObjectURL(blob);
//Insert image

dataURItoBlob函数：

function dataURItoBlob(dataURI) {
    // convert base64/URLEncoded data component to raw binary data held in a string
    var byteString;
    if (dataURI.split(',')[0].indexOf('base64') >= 0)
        byteString = atob(dataURI.split(',')[1]);
    else
        byteString = unescape(dataURI.split(',')[1]);

    // separate out the mime component
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

    // write the bytes of the string to a typed array
    var ia = new Uint8Array(byteString.length);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }

    return new Blob([ia], {type:mimeString});
}

函数dataURItoBlob（dataURI）{ //将base64/URLEncoded数据组件转换为字符串中的原始二进制数据 var-byteString； if（dataURI.split（'，'）[0].indexOf（'base64'）>=0） byteString=atob（dataURI.split（'，）[1]）； 其他的 byteString=unescape（dataURI.split（'，）[1]）； //分离出mime组件 var mimeString=dataURI.split（'，'）[0]。split（'：'）[1]。split（'；'）[0]； //将字符串的字节写入类型化数组 var ia=新的Uint8Array（byteString.length）； for（var i=0；i使用IE>=10应该很容易解决这个问题

const img=document.createElement（“img”）；
canvas.toBlob（（blob）=>{
img.src=URL.createObjectURL（blob）；
});

查看

blob=newblob（[window.atob（png）]…

，该语句中的

png

是如何定义的？只是想顺便说一下，同时

得到了一个可能有用的方法。