简体   繁体   English

SVG 图像未加载到 web-worker 中

[英]SVG Image not loaded in web-worker

I'm trying to run this typescript code in a web-worker:我正在尝试在网络工作者中运行此打字稿代码:

   async BuildImage(): Promise<void> {

    let data1 = `<svg xmlns='http://www.w3.org/2000/svg' width='50' height='50'>
                    <foreignObject width='100%' height='100%' style="background:blue">
                      <div xmlns='http://www.w3.org/1999/xhtml' style='font-size:12px'>                        
                        <ellipse cx="23" cy="23" rx="25" ry="25" style="fill:yellow;stroke:purple;stroke-width:2" />
                      </div>
                    </foreignObject>
                  </svg>`;

    let svg = new Blob([data1], { type: "image/svg+xml;charset=utf-8" });
    var image = await createImageBitmap(svg);

}

But throws "The source image could not be decoded."但抛出"The source image could not be decoded." with "InvalidStateError"带有"InvalidStateError" 在此处输入图片说明

I've tried this code also:我也试过这个代码:

   async BuildImage(): Promise<void> {

    let data1 = `<svg xmlns='http://www.w3.org/2000/svg' width='50' height='50'>
                    <foreignObject width='100%' height='100%' style="background:blue">
                      <div xmlns='http://www.w3.org/1999/xhtml' style='font-size:12px'>                        
                        <ellipse cx="23" cy="23" rx="25" ry="25" style="fill:yellow;stroke:purple;stroke-width:2" />
                      </div>
                    </foreignObject>
                  </svg>`;

    let svg = new Blob([data1], { type: "image/svg+xml;charset=utf-8" });
    let url = URL.createObjectURL(svg);

    var loadImageAsync = new Promise<HTMLImageElement>(resolve => {

        let img = new Image();
        img.onload = () => resolve(img);
        img.onerror = () => resolve(img);

        img.src = url;
    });

    this.image = await loadImageAsync;}

But the problem now is that the new Image() object is not defined in a web-worker as it doesn't have access to the DOM.但是现在的问题是new Image()对象没有在 web-worker 中定义,因为它无法访问 DOM。 This last method however works in a non web-worker scenario, But the createImageBitmap doesn't work anywhere.然而,最后一种方法适用于非网络工作者场景,但 createImageBitmap 不适用于任何地方。

Anyone knows how to build and image from an SVG in a web-worker or any workaround for this situation?任何人都知道如何在网络工作者中从 SVG 构建和图像,或者任何解决这种情况的方法?

Thanks谢谢

Seeing as their is no implementation of the spec yet,看到他们还没有实现规范,

A possible workaround for now would be to generate an image from your svg string in the main thread then post the resulting image bit map back to your worker.现在可能的解决方法是从主线程中的 svg 字符串生成图像,然后将生成的图像位图发布回您的工作人员。

So in your main thread code所以在你的主线程代码中

// Loads the SVG image asynchronously
function loadSVGAsync(svgString) 
 return new Promise(resolve => {
  const img = new Image();
  img.onload = function () {
    resolve(this);
  };
  img.src = 'data:image/svg+xml;charset=utf8,' + encodeURIComponent(svgString);
 });
}

const worker = new Worker('...');

worker.addEventListener('message', async ev => {
 const YourSvgString = '...';

 const img = await loadSVGAsync(YourSvgString);

 // Pass over the image Bit map to your worker
 worker.postMessage({svg: await createImageBitMap(img)});
});

In your worker在你的工人

self.addEventListener('message', (ev) => {
  // Do whatever you need with the image
  const svgImage = ev.data.svg;
});

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM