Является ли «bitmaprenderer» недопустимым значением для контекста рендеринга холста за пределами экрана в Chrome?
При рисовании растрового изображения на холсте за пределами экрана консоль Chrome выдала мне ошибку:
Failed to execute 'getContext' on 'OffscreenCanvas': The provided value 'bitmaprenderer' is not a valid enum value of type OffscreenRenderingContextType.
Проблема возникает как в рабочем, так и в оконном контексте:
var img = new Image(63, 177);
img.src = "https://cdn.sstatic.net/Img/unified/sprites.svg";
img.onload = _ => {
createImageBitmap(img).then(bitmap => {
var canvas = new OffscreenCanvas(bitmap.width, bitmap.height);
canvas.getContext('bitmaprenderer');
}).catch(e => console.error(e.message));
};Я могу получить этот тип контекста холста в контексте окна при использовании (экранного) интерфейса холста следующим образом:
document.createElement('canvas').getContext('bitmaprenderer');
Контекст холста необходим в работнике, поэтому я не могу использовать (экранный) интерфейс холста, в конце концов, доступа к документу нет.
Хотя я могу просто получить двумерный контекст рендеринга растрового изображения, используя идентификатор «2d» в методе getContext, это будет OffscreenCanvasRenderingContext2D, а не ImageBitmapRenderingContext. Я не знаю разницы в латентности для обоих интерфейсов, но насколько я понимаю, битмап можно сразу перенести на канвас, а 2д контекст должен отрисовываться.
Моя версия Chrome 74.0.3729.169, а в таблице совместимости браузера связанная статья указано, что интерфейс контекста рендеринга растрового изображения доступен с 66 версии.
Я делаю что-то не так, или на данный момент bitmaprenderer не поддерживается в качестве допустимого значения для контекста рендеринга холста за пределами экрана? Как я могу получить доступ к контексту рендеринга растрового изображения для холста за пределами экрана в Chrome? Заранее спасибо.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Да, ImageBitmapRenderingContext по-прежнему недоступен из OffscreenCanvas, доступны только webgl[-2] (в FF и Chrome) и 2D (в настоящее время только в Chrome).
Обратите внимание, что нет особого смысла делать этот ImageBitmapRenderingContext доступным из OffscreenCanvas, поскольку этот контекст обычно используется только для объектов отображать ImageBitmap. Таким образом, это означает, что связанный холст должен быть видимым.
Если вы хотите использовать его для чего-то вроде возможности отрисовки в другом контексте, вы можете напрямую передать ImageBitmap либо в 2D DrawImage, либо в вебгл texImage2d.
Таким образом, единственный вариант использования, который я вижу, — это использовать метод OffscreenCanvas.convertToBlob() внутри Worker для преобразования ImageBitmap в BLob. Я могу понять, что разработчики установили для него низкий приоритет, когда вы в любом случае уже можете сделать то же самое другими способами (хотя для этого может потребоваться немного больше памяти).
Также обратите внимание, что в вашем случае, поскольку вы находитесь в основном потоке, а не в Worker, вам абсолютно не нужен OffscreenCanvas и вы можете просто сделать
var img = new Image();
img.crossOrigin = 'anonymous';
img.src = "https://upload.wikimedia.org/wikipedia/commons/a/a4/Fiore_con_petali_arancioni_SVG.svg";
img.onload = _ => {
createImageBitmap(img)
.then(bitmap => {
const canvas = Object.assign(document.createElement('canvas'), {
width: bitmap.width,
height: bitmap.height
});
const ctx = canvas.getContext('bitmaprenderer');
ctx.transferFromImageBitmap(bitmap);
return new Promise((res, rej) => {
canvas.toBlob(blob => {
if (!blob) rej('error');
res(blob);
});
});
})
.then(blob => {
console.info(blob);
result.src = URL.createObjectURL(blob);
})
.catch(e => console.error(e.message));
};PNG: <img id = "result">