通過canvas轉換顏色爲RGBA格式及性能問題

轉換任意顏色爲RGBA格式

前端編程過程中，經常會遇到要把各種顏色格式（比如 “red”、“#F00”、“#FF0000”等）轉換成RGBA格式，搜索網絡也可以發現一堆的解決方案：

此處介紹一種方法： 通過canvas的像素獲取方法，來獲取任意顏色的RGBA數值。大致步驟如下：

• 首先創建一個尺寸爲1*1的canvas，並獲取canvas的繪製上下文ctx
• 設置ctx.fillStyle爲指定的顏色
• 通過ctx.fillRect填充canvas
• 通過ctx.getImaegeData獲取Imagedata對象，並獲取其中的像素值，獲取的像素值正好是RGBA格式的。

如果讀者不清楚canvas相關知識點，建議學習相關知識，也推薦有興趣讀者，訂閱專欄：
Canvas高級進階 https://xiaozhuanlan.com/canvas，相關知識會在專欄中介紹。

示例代碼如下：

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]
      };
  }

歡迎關注公衆號“ITman彪叔”。彪叔，擁有10多年開發經驗，現任公司系統架構師、技術總監、技術培訓師、職業規劃師。在計算機圖形學、WebGL、前端可視化方面有深入研究。對程序員思維能力訓練和培訓、程序員職業規劃有濃厚興趣。