BinaryDevelop
  1. ホーム
  2. Web制作
  3. html5

キャンバス経由でのRGBAフォーマットへの色変換とパフォーマンス問題の解決

2022-01-27 08:06:47

任意の色をRGBA形式に変換する

フロントエンドのプログラミングをしていると、さまざまな色形式（"red", "#F00", "#FF0000" など）をRGBA形式に変換する必要にしばしば遭遇します。また、Webを検索すると、たくさんのソリューションが見つかります。

ここでは、canvasのpixel fetchメソッドを使って、任意の色のRGBA値を取得する方法を説明します。おおよその手順は以下の通りです。

  • まず、サイズ1*1のキャンバスを作成し、そのキャンバスの描画コンテキストctxを取得します。
  • ctx.fillStyleに指定された色を設定します。
  • ctx.fillRectでキャンバスを塗りつぶす。
  • ctx.getImaegeDataでImagedataオブジェクトを取得し、その中のピクセル値を取得します（取得したピクセル値はたまたまRGBA形式でした）。

サンプルコードは以下の通りです。 

function getRgba(color) {
      var canvas = document.createElement("canvas");
      canvas.width = 1;
      canvas.height = 1;
      var ctx = canvas.getContext('2d');
      ctx.fillStyle = color;
      ctx.fillRect(0, 0, 1, 1);
      var colorData = ctx.getImageData(0, 0, 1, 1).data;
      return {
          r: colorData[0],
          g: colorData[1],
          b: colorData[2],
          a: colorData[3]
      };
  }

パフォーマンスの問題に注意を払う

なお、上記のメソッドが頻繁に呼び出される場合、パフォーマンスの問題が発生しますが、これは私のパートナーの一人が経験したことです。このコードでは頻繁に canvas オブジェクトを作成しているため、常にオブジェクトを作成することによるパフォーマンス上のペナルティがあり、JavaScript 自身もガベージ コレクション フェーズでこれらの作成したオブジェクトをリサイクルし続ける必要があるため、これもパフォーマンス上のペナルティとなります。

これを処理する良い方法は、グローバルな canvas オブジェクトを作成し、そのオブジェクトを毎回再利用することです。わずかな変更で、次のコードをご覧ください。 

  var canvas = document.createElement("canvas");
    canvas.width = 1;
    canvas.height = 1;
   var ctx = canvas.getContext('2d');
function getRgba(color) {
      ctx.fillStyle = color;
      ctx.fillRect(0, 0, 1, 1);
      var colorData = ctx.getImageData(0, 0, 1, 1).data;
      return {
          r: colorData[0],
          g: colorData[1],
          b: colorData[2],
          a: colorData[3]
      };
  }

以上、本記事の全内容をご紹介しましたが、皆様の学習のお役に立てれば幸いです。また、Script Houseをより一層応援していただければ幸いです。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します