worker中创建文件, 在页面中使用

原创
2020/11/11 22:21
阅读数 33

 

原文链接: worker中创建文件, 在页面中使用

在worker中创建文件, 返回一个文件的url, 在主页面通过这个url来使用

主要目的是将计算放在worker中, 避免复杂计算将用户UI卡死

 

worker.js

self.addEventListener(
  "message",
  function({ data }) {
    const blob = new Blob([data])
    const url = URL.createObjectURL(blob)
    console.log("worker url", data, url)
    self.postMessage(url)
  },
  false,
)

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      const blob = new Blob(["Hello World"])
      const url = window.URL.createObjectURL(blob)
      const link = document.createElement("a")
      link.href = url
      link.innerText = "Open the array URL"
      document.body.appendChild(link)

      var worker = new Worker("./worker.js")
      worker.postMessage("Hello World")
      worker.onmessage = function(event) {
        console.log("Received message " + event.data)
        const link = document.createElement("a")
        link.href = event.data
        link.innerText = "Open the array URL"
        document.body.appendChild(link)
      }

      // worker.postMessage({method: 'echo', args: ['Work']});
    </script>
  </body>
</html>

 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部