Я использую createImageBitmap(), который создает файл ImageBitmap.
Как преобразовать этот файл в blob или идеально PNG, чтобы я мог загрузить?
Единственный способ нарисовать его на холсте.
Для большей эффективности вы можете попробовать использовать ImageBitmapRenderingContext, который не будет копировать буфер пикселей снова.
Важное замечание относительно использования bitmaprenderer:
Хотя это действительно лучшая практика, Chrome в настоящее время имеет ошибку, которая приведет к прозрачности выходного изображения и, таким образом, заставит нас использовать вместо этого 2d-контекст.
Я оставляю код, используя контекст bitmaprenderer, хотя в надежде, что эта ошибка скоро будет исправлена, но это означает, что следующий фрагмент будет работать только на FF.
fetch('https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png')
.then(r => r.blob()) // yes.. from a Blob to a Blob...
// ImageBitmap generation
.then(createImageBitmap)
// to Blob
.then(img => {
console.log(img); // ImageBitmap
return new Promise(res => {
// create a canvas
const canvas = document.createElement('canvas');
// resize it to the size of our ImageBitmap
canvas.width = img.width;
canvas.height = img.height;
// try to get a bitmaprenderer context
let ctx = canvas.getContext('bitmaprenderer');
if(ctx) {
// transfer the ImageBitmap to it
ctx.transferFromImageBitmap(img);
}
else {
// in case someone supports createImageBitmap only
// twice in memory...
canvas.getContext('2d').drawImage(img,0,0);
}
// get it back as a Blob
canvas.toBlob(res);
});
})
.then(blob => {
console.log(blob); // Blob
var img = document.body.appendChild(new Image());
img.src = URL.createObjectURL(blob);
});
Проверьте HTMLCanvasElement # toBlob() для параметров, которые вы можете передать (формат файла и качество, если применимо).