我需要在 OffscreenCanvas 上进行一些绘图,然后将其显示为 div 元素的背景图像。
最简单的方法是什么?
最佳答案
对您来说最简单的方法是使用OffscreenCanvas.convertToBlob() ,在 Firefox 中也称为 OffscreenCanvas.toBlob()。
根据经验,您不需要 dataURL 版本。几乎所有您想要使用 dataURL 执行的操作都应该使用 blobURL 来完成。
BlobUrl 允许我们链接到只需在内存中存储一次的数据,而 dataURI 每次以字符串形式出现时都会获取所需数据的 134%,而每次获取时都会获取实际数据的 100%。
(function() {
const worker = new Worker(generateWorkerURL());
worker.onmessage = e => {
// generate a blobURI from the Blob
const url = URL.createObjectURL(e.data.blob);
// use it
document.body.style.backgroundImage = `url(${url})`;
};
const canvas = document.createElement('canvas');
canvas.width = canvas.height = 100;
const offscreen = canvas.transferControlToOffscreen();
worker.postMessage({canvas: offscreen}, [offscreen]);
function generateWorkerURL() {
const scr = document.querySelector('[type="worker-script"]');
const cont = scr.textContent;
const blob = new Blob([cont], {type: 'text/javascript'});
return URL.createObjectURL(blob);
}
})();
body{width: 100vw; height: 100vh; margin: 0}
<script type="worker-script">
onmessage = e => {
const canvas = e.data.canvas;
// red squares
const gl = canvas.getContext('webgl');
gl.viewport(0, 0,
gl.drawingBufferWidth, gl.drawingBufferHeight);
gl.enable(gl.SCISSOR_TEST);
gl.scissor(20, 20, 60, 60);
gl.clearColor(1.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
// export as Blob
(canvas.convertToBlob || canvas.toBlob).call(canvas)
.then(blob => {
postMessage({blob});
});
}
</script>
关于javascript - 如何将 OffscreenCanvas 转换为 DataURI,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54523077/