Javascript 在web worker中将图像位图/图像绘制到OffScreenCanvas

我有一个vue.js应用程序，我在其中设置了vue workers/web workers，以便在用户上传几张图像后在后台执行一些图像处理（缩放/裁剪）

我决定使用ImageBitMpas和OffScreenCanvas，因为WebWorkers不支持画布和图像对象。我可以使用CreateImageBitMap（）方法从图像文件创建ImageBitMap。它成功返回承诺，然后解析为ImageBitMap。我可以将它打印到我的控制台，并查看创建的ImageBitMap！我在下面的控制台中添加了一张ImageBitmap的图片

var loadingImage=newimage（）；
loadingImage.onload=（）=>{
log（createImageBitmap（loadingImage））；//我可以看到记录到控制台的ImageBitmap
const canvas=新的OffscreenCanvas（100100）；
const ctx=canvas.getContext（'2d'）；
我保证([
创建图像位图（加载图像）；
]).然后（函数（结果）{
控制台日志（“打印承诺已解决”）；
控制台日志（结果）；
ctx.drawImage（结果，0,02000）；//您是否尝试过使用
ImageBitmapRenderingContext

canvas.getContext('bitmaprenderer').transferFromImageBitmap(bitmap);

请将代码直接发布在问题中，而不是作为屏幕截图。此外，如果您在Worker中，那么这是什么
Image
constructor？不仅Safari中的Worker尚未提供createImageBitmap，而且OffscreenCanvas的2d上下文在除Chrome以外的任何其他浏览器上也不可用。最后，您可以在t中看到一个工作示例他的Q/A：另外，如果你是一个工作者，那么这个图像构造函数是什么？-我没有为这个网络工作者添加代码，因为我无法让它在主线程中工作。理想情况下，一旦我有了一个工作模型，我才试着在一个单独的线程/网络工作者中运行它。谢谢你的回复，我已经添加了我的JS代码并删除了我的屏幕截图。不仅仅是y是Safari中的工作人员尚未提供的createImageBitmap，但除Chrome以外的任何其他浏览器上的OffscreenCanvas的2d上下文也不可用。还有其他网站也可以在Safari中极快地加载和裁剪多个图像，你知道他们是如何做到的吗？有没有办法将图像绘制到画布上（这在chrome和safari中都受支持，可以在web worker中工作）可能使用Uint8ClampedArray或ImageData对象？？你怎么会认为他们使用了屏幕外画布？屏幕外画布意味着通过在另一个线程上执行CPU密集型操作来卸载主线程CPU。裁剪图像并不是CPU密集型的，你赢不了多少。从你的代码中，我已经可以看出你做的CPU太多了通过读取二进制文件作为base64数据URL进行密集操作，而您本应刚刚完成
createImageBitmap（input.files[n]）
（可使用blob URL进行多填充）。
canvas.getContext('bitmaprenderer').transferFromImageBitmap(bitmap);