Web Workerについて

//ワーカーの生成（ワーカースレッドで実行するスクリプトのURI）
const worker = new Worker('worker.js');

 // ワーカーの作成
const worker = new Worker( "worker.js" );
//ワーカーにメッセージを送信
worker.postMessage(10);
console.log('ワーカーにデータを送信')

// ワーカーから受信
worker.addEventListener( "message" , e =>{
console.log(`ワーカからデータ（${e.data}）を受信`)
});

// ワーカーからのエラー通知を受信
worker.addEventListener( "error" , e =>{
console.log( e.message );
});

// ワーカーを終了する
// worker.terminate();

/*workerではworker自身がグローバルです
selfは省略できます*/
//スクリプトファイルの読み込み
self.importScripts("isnumber.js");
//メインスレッドから受信
self.addEventListener( "message" , m =>{
if( !isNumber( m.data ) ) throw new Error("数値ではない");
  self.postMessage( m.data );
});

function isNumber(value) {
  return typeof value === 'number';
}

const worker = new SharedWorker('worker.js');

// 共有ワーカーの作成または存在確認
const worker = new SharedWorker("worker.js");

// 共有ワーカーからの通知を受信
worker.port.addEventListener( "message" , e =>{
    console.log( e.data );
});

// 共有ワーカーからエラーを受信
worker.addEventListener( "error" , e =>{
    console.log( e.message );
});

//通信開始
worker.port.start();

//共有ワーカーにメッセージを送信
worker.port.postMessage(10);

//共有ワーカーとの接続解除
// worker.port.close();

self.addEventListener( "connect" , e =>{
    const port = e.ports[0];  //ポートを記憶、メインスレッドとの通信はこのポートで行う
    port.addEventListener( "message" , e =>{
        if( !isNumber( e.data ) ) throw new Error("数値ではない");
        port.postMessage( e.data );
    });
    port.start();
});

self.importScripts("isnumber.js");

/*Blobの作成
第1引数はBlobオブジェクトに含めるデータ、第2引数はBlobのMIMEタイプ
*/
const data = 'Hello, world!';
const blob = new Blob([data], { type: 'text/plain' });

/*Blobの読み取り
Blobオブジェクトに含まれるデータを読み取るには、FileReaderオブジェクトを使用します
readAsText()メソッドでテキストとして読み取り、その結果をonloadハンドラーで処理
*/
const blob = new Blob(['Hello, world!'], { type: 'text/plain' });
const reader = new FileReader();
reader.onload = (event) => {
  console.log(event.target.result);
};
reader.readAsText(blob);

/*Blobのダウンロード
URLを使ってダウンロード用のリンクを作成しています。
download属性を使用して、ダウンロード時のファイル名を指定
click()メソッドを使用して、リンクをクリックしてダウンロードを開始します
*/
const blob = new Blob(['Hello, world!'], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = 'file.txt';
link.click();

<!-- ダウンロードリンクを表示するボタン -->
<button id="download-button">Download</button>

<script>
  // ボタンをクリックしたときの処理
  document.getElementById('download-button').addEventListener('click', () => {
  // ダウンロードするファイルの内容を作成
  const content = 'This is the content of the file.';
  // Blobオブジェクトを作成
  const blob = new Blob([content], { type: 'text/plain' });
  // URLを生成
  const url = URL.createObjectURL(blob);
  // ダウンロードリンクを作成
  const link = document.createElement('a');
  link.href = url;
  link.download = 'file.txt';
  document.body.appendChild(link);
  // リンクをクリックしてダウンロードを開始
  link.click();
  // 不要になったURLを解放
  URL.revokeObjectURL(url);
  // リンクを削除
  link.remove();
});
</script>

<input type="file" id="file-input">
<div id="result"></div>
<script>
 const fileInput = document.getElementById('file-input');
 const resultElement = document.getElementById('result');

fileInput.addEventListener('change', (event) => {
  const file = event.target.files[0];
  const reader = new FileReader();
  reader.readAsArrayBuffer(file);
  reader.onload = () => {
    const arrayBuffer = reader.result;
    const blob = new Blob([arrayBuffer], { type: file.type });
    const worker = new Worker('worker.js');
    worker.postMessage(blob);
    worker.onmessage = (event) => {
      const base64 = event.data;
      const img = document.createElement('img');
      img.src = base64;
      resultElement.appendChild(img);
   };
  };
});
</script>

self.onmessage = (event) => {
    const data = event.data;
    if (data instanceof Blob) {
      const reader = new FileReader();
//readAsDataURLはBlobオブジェクトをデータURLとして読み取り、文字列として返します
      reader.readAsDataURL(data);
      reader.onload = () => {
        const base64 = reader.result;
        self.postMessage(base64);
      };
    } else {
      console.error('Invalid data format');
    }
  };

const worker = new Worker("worker.js");
// 配列を生成する
const intArray = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
// 配列をUint8Arrayに変換する
const uint8Array = new Uint8Array(intArray);
// Uint8ArrayをWeb Workerに送信する
worker.postMessage(uint8Array);

// Web Workerからの結果を受信する
worker.onmessage = function(e) {
  console.log(e.data);
};

self.onmessage = function(e) {
    // 受信したUint8Arrayを配列に変換する
    const intArray = Array.from(e.data);
    // 配列の各要素に2を乗じる
    const resultArray = intArray.map(value=> value * 2);
    // 変換後の配列をUint8Arrayに変換する
    const resultUint8Array = new Uint8Array(resultArray);
    // Uint8Arrayをメインスレッドに送信する
    postMessage(resultUint8Array);
  };

const worker = new Worker(URL.createObjectURL(
 new Blob([`
  self.addEventListener('message', function(e) {
    console.log( e.data);
    self.postMessage('ワーカーからのメッセージ');
  }, false);
`])
));
worker.postMessage('ワーカーへのメッセージ');
worker.addEventListener('message', function(e) {
  console.log(e.data);
}, false);

worker.postMessage(message, [transfer]);

// 大きなデータを作成する
const bigArray = new Float32Array(1000000);
// Web Workerを作成する
const worker = new Worker('worker.js');
// Web Workerに大きなデータを転送する
worker.postMessage({ data: bigArray.buffer }, [bigArray.buffer]);
// Web Workerからのメッセージを受信する
worker.onmessage = (event) => {
  console.log('Web Workerからのメッセージ:', event.data);
};

// メインスレッドからのメッセージを受信する
onmessage = (event) => {
  // 大きなデータを受信する
  const data = new Float32Array(event.data.data);
  // 大きなデータを処理する
  const result = processData(data);
  // メインスレッドに結果を送信する
  postMessage({ result });
};
function processData(data) {
  // データを処理する
  // ...
  return data
}

<img src="/image.jpg" id="image" style="display: none;">
<canvas id="canvas"></canvas>
<script>
  const image = document.getElementById('image');
  const canvas = document.getElementById('canvas');

  // image要素の読み込み完了時にcanvas要素のサイズを設定する
  image.addEventListener('load', () => {
    canvas.width = image.width;
    canvas.height = image.height;

    const offscreenCanvas = canvas.transferControlToOffscreen();
    // OffscreenCanvasのコンテキストを取得する
    const offscreenContext = offscreenCanvas.getContext('2d');
   // 画像を描画する
    offscreenContext.drawImage(image, 0, 0);
   // ピクセルデータを取得する
    const imageData = offscreenContext.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;
    // グレースケールに変換する
    for (let i = 0; i < data.length; i += 4) {
      const r = data[i];
      const g = data[i + 1];
      const b = data[i + 2];
      const average = (r + g + b) / 3;
      data[i] = average;
      data[i + 1] = average;
      data[i + 2] = average;
    }
   // 変換したピクセルデータをOffscreenCanvasに描画する
    offscreenContext.putImageData(imageData, 0, 0);
  });
</script>

// Canvas要素を取得する
const canvas = document.getElementById("canvas");
// Canvas要素の描画コントロールをOffscreenCanvasに委譲する
const offscreenCanvas = canvas.transferControlToOffscreen();
// Workerを作成し、OffscreenCanvasを渡す
const worker = new Worker("worker.js");
worker.postMessage({ canvas: offscreenCanvas }, [
  offscreenCanvas
]);

onmessage = (event) => {
    if (event.data.canvas){
        const offscreen = event.data.canvas;
        const context = offscreen.getContext('2d');
        context.fillStyle = 'blue';
        context.fillRect(0, 0, 100, 100);
    }
  };