createImageBitmap返回空图像 [英] createImageBitmap returns an empty image
问题描述
我正在使用createImageBitmap在工作程序中转换图像.
I'm using createImageBitmap to convert an image in a worker.
blob进入时具有数据,定位有效(它们是负数,但我尝试使用0和相同的问题)
The blob goes in has data, the positioning is valid (they're minus numbers but I've tried using 0 and same issue)
createImageBitmap(blob, -pos.x + 100, -pos.y + 100, 200, 200).then(data => {
resolve(data)})
输出的数据是<ImageData width: 200, height 200 />
但是什么时候尝试将其转换为blob
However when then try and convert this into a blob
const canvas = document.createElement('canvas')
canvas.height = img.height
canvas.width = img.width
const context = canvas.getContext('bitmaprenderer')
context.transferFromImageBitmap(img)
canvas.toBlob((blob)=> ..
blob为空.
关于我要去哪里的任何线索吗?
Any clues on where I'm going wrong?
推荐答案
这是无论出于何种原因,HTMLCanvasElement.toBlob()
和HTMLCanvasElement.toDataURL()
的结果将是完全透明的图像...
For whatever reason, the result of HTMLCanvasElement.toBlob()
and HTMLCanvasElement.toDataURL()
will be fully transparent images...
它们不支持HTMLCanvasElement中显示的当前活动位图缓冲区.
They don't honor the current active bitmap-buffer that is displayed in the HTMLCanvasElement.
这可以通过将画布附加到文档来证明:
This can be demonstrated by appending the canvas to the document:
fetch('https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png')
.then(r => r.blob())
.then(b=>createImageBitmap(b, 120,120,120,120))
.then(img => {
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;
document.body.append(canvas);
// transfer on the bitmarenderer context
canvas.getContext('bitmaprenderer')
.transferFromImageBitmap(img);
// get it back as a Blob
canvas.toBlob(res);
});
})
.then(blob => {
var img = document.body.appendChild(new Image());
img.src = URL.createObjectURL(blob);
});
img {
border: solid red;
}
canvas {
border: solid green;
}
您可以为
fetch('https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png')
.then(r => r.blob())
.then(b=>createImageBitmap(b, 120,120,120,120))
.then(img => {
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;
document.body.append(canvas);
// draw on a 2d context
canvas.getContext('2d')
.drawImage(img,0,0);
// get it back as a Blob
canvas.toBlob(res);
});
})
.then(blob => {
var img = document.body.appendChild(new Image());
img.src = URL.createObjectURL(blob);
});
img {
border: solid red;
}
canvas {
border: solid green;
}
这篇关于createImageBitmap返回空图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!