通过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仿造window7的开始菜单
Jun 17 HTML / CSS
简单掌握CSS3中resize属性的用法
Apr 01 HTML / CSS
CSS3 实现弹幕的示例代码
Aug 07 HTML / CSS
HTML高亮关键字的实现代码
Oct 22 HTML / CSS
html+css实现自定义图片上传按钮功能
Sep 04 HTML / CSS
HTML5+CSS3应用详解
Feb 24 HTML / CSS
HTML5 在canvas中绘制文本附效果图
Jun 23 HTML / CSS
HTML5进度条特效
Dec 18 HTML / CSS
HTML5手机端弹出遮罩菜单特效代码
Jan 27 HTML / CSS
html5移动端禁止长按图片保存的实现
Apr 20 HTML / CSS
深入理解margin塌陷和margin合并的解决方案
Jun 26 HTML / CSS
table设置超出部分隐藏,鼠标移上去显示全部内容的方法
Dec 24 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
解析php5配置使用pdo
2013/07/03 PHP
thinkphp 一个页面使用2次分页的实现方法
2013/07/15 PHP
PHP网站建设的流程与步骤分享
2015/09/25 PHP
Prototype使用指南之enumerable.js
2007/01/10 Javascript
javascript Window及document对象详细整理
2011/01/12 Javascript
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
2011/08/28 Javascript
jQuery实现表头固定效果的实例代码
2013/05/24 Javascript
jquery如何通过name名称获取当前name的value值
2013/12/20 Javascript
js实现带圆角的多级下拉菜单效果
2015/08/28 Javascript
js操作DOM--添加、删除节点的简单实例
2016/07/08 Javascript
AngularJS基础 ng-mousemove 指令简单示例
2016/08/02 Javascript
浅谈使用splice函数对数组中的元素进行删除时的注意事项
2016/12/04 Javascript
jquery插件bootstrapValidator表单验证详解
2016/12/15 Javascript
vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)
2018/04/20 Javascript
node.js中path路径模块的使用方法实例分析
2020/02/13 Javascript
微信小程序实现音乐播放页面布局
2020/12/11 Javascript
[01:00:22]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第三场 1月10日
2021/03/11 DOTA
深入理解Python中的元类(metaclass)
2015/02/14 Python
使用Python简单的实现树莓派的WEB控制
2016/02/18 Python
django2 快速安装指南分享
2018/01/05 Python
python经典趣味24点游戏程序设计
2019/07/26 Python
浅谈在django中使用redirect重定向数据传输的问题
2020/03/13 Python
jupyter notebook 多行输出实例
2020/04/09 Python
Python几种常见算法汇总
2020/06/02 Python
Python中flatten( ),matrix.A用法说明
2020/07/05 Python
PyTorch实现重写/改写Dataset并载入Dataloader
2020/07/14 Python
万代美国官网:PREMIUM BANDAI USA
2020/09/11 全球购物
Linux文件操作命令都有哪些
2016/07/23 面试题
Ejb技术面试题
2015/04/29 面试题
会计应届生的自荐信
2013/12/13 职场文书
工程建设实施方案
2014/03/14 职场文书
七年级思品教学反思
2016/02/20 职场文书
党风廉政承诺书2016
2016/03/25 职场文书
《初涉尘世》读后感3篇
2020/01/10 职场文书
redis连接被拒绝的解决方案
2021/04/12 Redis
Vue的列表之渲染,排序,过滤详解
2022/02/24 Vue.js