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

轉換任意顏色爲RGBA格式

前端編程過程當中，常常會遇到要把各類顏色格式（好比 「red」、「#F00」、「#FF0000」等）轉換成RGBA格式，搜索網絡也能夠發現一堆的解決方案：

image

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

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

若是讀者不清楚canvas相關知識點，建議學習相關知識，也推薦有興趣讀者，訂閱專欄：
Canvas高級進階 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對象，每次都複用該對象。只用作很小的改動，把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多年開發經驗，現任公司系統架構師、技術總監、技術培訓師、職業規劃師。熟悉Java、JavaScript、Python語言，熟悉數據庫。熟悉java、nodejs應用系統架構，大數據高併發、高可用、分佈式架構。在計算機圖形學、WebGL、前端可視化方面有深刻研究。對程序員思惟能力訓練和培訓、程序員職業規劃有濃厚興趣。