Javascript 将ImageBitmap转换为Blob

我正在使用createImageBitmap（）创建一个文件

---

如何将此文件转换为blob或PNG以便上载

目前唯一的方法是在画布上绘制

为了提高效率，您可以尝试使用，它将不再次复制像素缓冲区

关于位图渲染器使用的重要注意事项：
虽然这确实是最佳实践，但这将导致输出图像透明，从而迫使我们使用2d上下文来代替。
我使用bitmaprenderer上下文保留代码，希望这个bug很快得到修复，但这意味着下面的代码片段暂时只能在FF上使用

fetch（'https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png')
.then（r=>r.blob（））//是的。。从一团到一团。。。
//图像位图生成
.然后（创建图像位图）
//滴
。然后（img=>{
console.log（img）；//图像位图
返回新承诺（res=>{
//创建画布
const canvas=document.createElement（'canvas'）；
//将其调整为图像位图的大小
canvas.width=img.width；
canvas.height=img.height；
//尝试获取位图渲染器上下文
设ctx=canvas.getContext（'bitmaprenderer'）；
如果（ctx）{
//将图像位图传输到它
ctx.transferFromImageBitmap（img）；
}
否则{
//如果有人只支持createImageBitmap
//两次在记忆中。。。
canvas.getContext（'2d'）.drawImage（img，0,0）；
}
//把它当作一团拿回来
canvas.toBlob（res）；
});
})
.然后（blob=>{
console.log（blob）；//blob
var img=document.body.appendChild（新图像（））；
img.src=URL.createObjectURL（blob）；
});我对答案进行了编辑，使其使用bitmaprenderer上下文。在第一次修订中没有提到这一点是愚蠢的…这确实有帮助，但出于某种原因，我得到了一个空的图像。。我把它放进了一个新的问题中供参考，我相信这在Chrome中已经固定了。