WebWorker 澶氱嚎绋嬪浘褰㈠鐞? ​

// main.js
const worker = new Worker('renderer.js', { type: 'module' });

// 灏佽 Promise 椋庢牸鐨勮姹傚嚱鏁?
function request(cmd, payload) {
  return new Promise((resolve, reject) => {
    const reqId = crypto.randomUUID(); // 鐢熸垚鍞竴璇锋眰 ID
    
    // 鐩戝惉 Worker 杩斿洖鐨勬秷鎭?
    const onMessage = (event) => {
      const { type, reqId: id, data, error } = event.data;
      if (id !== reqId) return; // 蹇界暐涓嶅尮閰嶇殑鍝嶅簲
      
      worker.removeEventListener('message', onMessage);
      
      if (type === 'error') {
        reject(new Error(error));
      } else {
        resolve(data);
      }
    };
    
    worker.addEventListener('message', onMessage);
    worker.postMessage({ cmd, reqId, payload });
  });
}

// 浣跨敤绀轰緥
async function init() {
  try {
    await request('init', { width: 800, height: 600 });
    console.log('Worker 鍒濆鍖栨垚鍔?);
    
    const result = await request('draw', { shapes: [...] });
    console.log('缁樺埗瀹屾垚', result);
  } catch (error) {
    console.error('Worker 閿欒:', error);
  }
}

// renderer.js
self.onmessage = async (event) => {
  const { cmd, reqId, payload } = event.data;
  
  try {
    if (cmd === 'init') {
      // 鍒濆鍖栭€昏緫
      const { width, height } = payload;
      // ...
      reply(reqId, { status: 'ok' });
    } else if (cmd === 'draw') {
      // 缁樺埗閫昏緫
      const { shapes } = payload;
      // ...
      reply(reqId, { rendered: shapes.length });
    } else {
      replyError(reqId, `鏈煡鍛戒护: ${cmd}`);
    }
  } catch (error) {
    replyError(reqId, error.message);
  }
};

function reply(reqId, data) {
  self.postMessage({ type: 'result', reqId, data });
}

function replyError(reqId, error) {
  self.postMessage({ type: 'error', reqId, error });
}

// main.js
const canvas = document.querySelector('#myCanvas');
const offscreen = canvas.transferControlToOffscreen(); // 杞Щ鎺у埗鏉?

// 灏?OffscreenCanvas 浣滀负鍙浆绉诲璞′紶缁?Worker
worker.postMessage({ cmd: 'init', canvas: offscreen }, [offscreen]);

// renderer.js
const offscreen = new OffscreenCanvas(800, 600);
const ctx = offscreen.getContext('2d');

// renderer.js
let ctx, width, height;

self.onmessage = async (event) => {
  const { cmd, reqId, payload, canvas } = event.data;
  
  try {
    if (cmd === 'init') {
      ctx = canvas.getContext('2d'); // 鑾峰彇 2D 涓婁笅鏂?
      width = canvas.width;
      height = canvas.height;
      
      // 缁樺埗涓€涓祴璇曡儗鏅?
      ctx.fillStyle = '#1a1a1a';
      ctx.fillRect(0, 0, width, height);
      
      reply(reqId, { status: 'initialized' });
    }
    
    if (cmd === 'draw') {
      const { shapes } = payload;
      renderShapes(shapes);
      reply(reqId, { rendered: shapes.length });
    }
    
    if (cmd === 'resize') {
      width = payload.width;
      height = payload.height;
      ctx.canvas.width = width;
      ctx.canvas.height = height;
      reply(reqId, { status: 'resized' });
    }
  } catch (error) {
    replyError(reqId, error.message);
  }
};

function renderShapes(shapes) {
  ctx.clearRect(0, 0, width, height);
  
  shapes.forEach(shape => {
    ctx.save();
    ctx.translate(shape.x, shape.y);
    ctx.rotate(shape.rotation || 0);
    ctx.fillStyle = shape.fill || '#09f';
    ctx.fillRect(-shape.width / 2, -shape.height / 2, shape.width, shape.height);
    ctx.restore();
  });
}

function reply(reqId, data) {
  self.postMessage({ type: 'result', reqId, data });
}

function replyError(reqId, error) {
  self.postMessage({ type: 'error', reqId, error });
}

// main.js
function initRenderer(canvas) {
  if ('transferControlToOffscreen' in canvas && window.Worker) {
    // 鏀寔 OffscreenCanvas锛屼娇鐢?Worker
    const offscreen = canvas.transferControlToOffscreen();
    const worker = new Worker('renderer.js', { type: 'module' });
    worker.postMessage({ cmd: 'init', canvas: offscreen }, [offscreen]);
    return { type: 'worker', instance: worker };
  } else {
    // 涓嶆敮鎸侊紝闄嶇骇鍒颁富绾跨▼娓叉煋
    const ctx = canvas.getContext('2d');
    return { type: 'main', ctx };
  }
}

// main.js
async function sendImageToWorker(canvas) {
  // 浠?Canvas 鍒涘缓 ImageBitmap锛堥浂鎷疯礉锛?
  const bitmap = await createImageBitmap(canvas);
  
  // 浣滀负鍙浆绉诲璞′紶閫掔粰 Worker
  worker.postMessage({ cmd: 'processImage', image: bitmap }, [bitmap]);
  
  // 娉ㄦ剰锛歜itmap 鐜板湪宸蹭笉鍙敤锛堣杞Щ锛?
  console.log(bitmap.width); // 閿欒锛欳annot read properties of detached object
}

// renderer.js
self.onmessage = async (event) => {
  const { cmd, reqId, image } = event.data;
  
  if (cmd === 'processImage') {
    // 鍦?OffscreenCanvas 涓婄粯鍒跺苟澶勭悊
    const canvas = new OffscreenCanvas(image.width, image.height);
    const ctx = canvas.getContext('2d');
    ctx.drawImage(image, 0, 0);
    
    // 搴旂敤婊ら暅...
    applyFilter(ctx);
    
    // 杩斿洖缁撴灉锛堝悓鏍蜂綔涓?ImageBitmap 杞Щ锛?
    const result = canvas.transferToImageBitmap();
    self.postMessage({ type: 'result', reqId, data: result }, [result]);
  }
};

// main.js
const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext('2d');
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

// imageData.data 鏄?Uint8ClampedArray锛屽簳灞傛槸 ArrayBuffer
const buffer = imageData.data.buffer;

worker.postMessage({
  cmd: 'processPixels',
  buffer,
  width: canvas.width,
  height: canvas.height
}, [buffer]); // 杞Щ buffer 鎵€鏈夋潈

// 鐜板湪 buffer 宸茶 detached
console.log(imageData.data.length); // 0锛堝凡鏃犳暟鎹級

// renderer.js
self.onmessage = (event) => {
  const { cmd, reqId, buffer, width, height } = event.data;
  
  if (cmd === 'processPixels') {
    const pixels = new Uint8ClampedArray(buffer);
    
    // 鐩存帴鎿嶄綔鍍忕礌鏁扮粍锛堝鍙嶈壊锛?
    for (let i = 0; i < pixels.length; i += 4) {
      pixels[i] = 255 - pixels[i];     // R
      pixels[i + 1] = 255 - pixels[i + 1]; // G
      pixels[i + 2] = 255 - pixels[i + 2]; // B
      // pixels[i + 3] 鏄?Alpha锛屼繚鎸佷笉鍙?
    }
    
    // 杩斿洖澶勭悊鍚庣殑 buffer
    self.postMessage({ type: 'result', reqId, buffer }, [buffer]);
  }
};

// main.js锛堟帴鏀剁粨鏋滐級
worker.addEventListener('message', (event) => {
  const { type, reqId, buffer } = event.data;
  
  if (type === 'result') {
    const pixels = new Uint8ClampedArray(buffer);
    const imageData = new ImageData(pixels, width, height);
    ctx.putImageData(imageData, 0, 0);
  }
});