经过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、前端可视化方面有深刻研究。对程序员思惟能力训练和培训、程序员职业规划有浓厚兴趣。