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


Posted in HTML / CSS onNovember 22, 2019

转换任意颜色为RGBA格式

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

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

此处介绍一种方法: 通过canvas的像素获取方法,来获取任意颜色的RGBA数值。大致步骤如下:

  • 首先创建一个尺寸为1*1的canvas,并获取canvas的绘制上下文ctx
  • 设置ctx.fillStyle为指定的颜色
  • 通过ctx.fillRect填充canvas
  • 通过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]
      };
  }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
详解CSS3 用border写 空心三角箭头 (两种写法)
Sep 29 HTML / CSS
HTML5和CSS3让网页设计提升到下一个高度
Aug 14 HTML / CSS
纯CSS绘制漂亮的圆形图案效果
May 07 HTML / CSS
CSS3,线性渐变(linear-gradient)的使用总结
Jan 09 HTML / CSS
CSS3实现文字描边的2种方法(小结)
Feb 14 HTML / CSS
CSS3制作3D立方体loading特效
Nov 09 HTML / CSS
在html5的Canvas上绘制椭圆的几种方法总结
Jan 07 HTML / CSS
HTML5拖放效果的实现代码
Nov 17 HTML / CSS
canvas压缩图片以及卡片制作的方法示例
Dec 04 HTML / CSS
HTML5获取当前地理位置并在百度地图上展示的实例
Jul 10 HTML / CSS
如何解决flex文本溢出问题小结
Jul 15 HTML / CSS
css让页脚保持在底部位置的四种方案
Jul 23 HTML / CSS
HTML5 weui使用笔记
Nov 21 #HTML / CSS
移动端html5判断是否滚动到底部并且下拉加载
Nov 19 #HTML / CSS
Html5之自定义属性(data-,dataset)
Nov 19 #HTML / CSS
如何给HTML标签中的文本设置修饰线
Nov 18 #HTML / CSS
5分钟实现Canvas鼠标跟随动画背景
Nov 18 #HTML / CSS
HTML5实现无刷新修改URL的方法
Nov 14 #HTML / CSS
iframe跨域的几种常用方法
Nov 11 #HTML / CSS
You might like
PHP开发需要注意的安全问题
2010/09/01 PHP
优化PHP代码技巧的小结
2013/06/02 PHP
腾讯微博提示missing parameter errorcode 102 错误的解决方法
2014/12/22 PHP
php多进程应用场景实例详解
2019/07/22 PHP
PHP $O00OO0=urldecode & eval 解密,记一次商业源码的去后门
2020/09/13 PHP
Code: write(s,d) 输出连续字符串
2007/08/19 Javascript
document.onreadystatechange事件的用法分析
2009/10/17 Javascript
js判断浏览器类型的方法
2013/08/07 Javascript
JavaScript对象学习经验整理
2013/10/12 Javascript
JS 屏蔽键盘不可用与鼠标右键不可用的方法
2013/11/18 Javascript
Node.js事件循环(Event Loop)和线程池详解
2015/01/28 Javascript
移动设备web开发首选框架:zeptojs介绍
2015/01/29 Javascript
JavaScript判断前缀、后缀是否是空格的方法
2015/04/15 Javascript
javascript框架设计之框架分类及主要功能
2015/06/23 Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
2016/01/23 Javascript
jQuery动态改变多行文本框高度的方法
2016/09/07 Javascript
canvas时钟效果
2017/02/16 Javascript
Angular2中select用法之设置默认值与事件详解
2017/05/07 Javascript
EasyUI中的dataGrid的行内编辑
2017/06/22 Javascript
Vue 项目部署到服务器的问题解决方法
2017/12/05 Javascript
webpack@v4升级踩坑(小结)
2018/10/08 Javascript
JavaScript this绑定过程深入详解
2018/12/07 Javascript
python中numpy的矩阵、多维数组的用法
2018/02/05 Python
Python实现的朴素贝叶斯算法经典示例【测试可用】
2018/06/13 Python
Python中使用遍历在列表中添加字典遇到的坑
2019/02/27 Python
Python3.8对可迭代解包的改进及用法详解
2019/10/15 Python
python3实现名片管理系统(控制台版)
2020/11/29 Python
详解Python中的Lock和Rlock
2021/01/26 Python
canvas压缩图片以及卡片制作的方法示例
2018/12/04 HTML / CSS
工程管理造价应届生求职信
2013/11/13 职场文书
销售口号大全
2014/06/11 职场文书
政协调研汇报材料
2014/08/15 职场文书
身边的榜样活动方案
2014/08/20 职场文书
python函数指定默认值的实例讲解
2021/03/29 Python
golang 实用库gotable的具体使用
2021/07/01 Golang
Flask response响应的具体使用
2021/07/15 Python