通过canvas转换颜色为RGBA格式及性能问题

转换任意颜色为RGBA格式

前端编程过程中,经常会遇到要把各种颜色格式(比如 “red”、“#F00”、“#FF0000”等)转换成RGBA格式,搜索网络也可以发现一堆的解决方案:

通过canvas转换颜色为RGBA格式及性能问题
image

此处介绍一种方法: 通过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对象,每次都复用该对象。只用做很小的改动,把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、前端可视化方面有深入研究。对程序员思维能力训练和培训、程序员职业规划有浓厚兴趣。

通过canvas转换颜色为RGBA格式及性能问题
ITman彪叔公众号

相关推荐