代码之家 › 专栏 › 技术社区 › 1fabiopereira

覆盖图像。使用webworker的原型

ui-thread ionic-framework javascript

1fabiopereira · 技术社区 · 8 年前

是否可以覆盖图像的收费方法,以便由WebWorker进行加载?

Image.prototype.contructor = function(arguments){  // Webworker implementation }

//or

Image.prototype.setSrc = function(arguments){  // Webworker implementation }

var image = new Image('somePath.jpg'); //or 
image.setSrc('somePath.jpg');

1 回复 | 直到 8 年前

guest271314 8 年前

你可以使用 XMLHttpRequest() 在内部 Worker , postMessage() 属于 ArrayBuffer , Blob 或 data URI 请求成功时将图像表示为主线程。

在主线上

var worker = new Worker("/path/to/worker.js");

worker.addEventListener("message", function(e) {
  // do stuff with `Blob` of image
  console.log(e.data);
  var img = new Image;
  img.onload = function() {
    document.body.appendChild(this)
  }
  img.src = URL.createObjectURL(e.data);
});

worker.postMessage("request" /* or, path to image */);

self.addEventListener("message", function(e) {
  if (e.data === "request") {
    var request = new XMLHttpRequest();
    request.open("GET", "/path/to/image" /* or, `e.data` */);
    request.responseType = "blob";
    request.onload = function() {
      self.postMessage(request.response);
    }
    request.send();
  }
});

plnkr http://plnkr.co/edit/smqVzIMSOJR3GNSBBxul?p=preview