转换任意颜色为RGBA格式
前端编程过程中,经常会遇到要把各种颜色格式(比如 “red”、“#F00”、“#FF0000”等)转换成RGBA格式,搜索网络也可以发现一堆的解决方案:
此处介绍一种方法: 通过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、前端可视化方面有深入研究。对程序员思维能力训练和培训、程序员职业规划有浓厚兴趣。
相关推荐
转换任意颜色为RGBA格式 前端编程过程中,经常会遇到要把各种颜色格式(比如 “red”、“#F00”、“#FF0000”等)转换成RGBA格式,搜索网络也可以发现一堆的解决方案: 此处介绍一种方法: 通过canvas的像素获取...
2、将图片转换为canvas,canvas.toDataURL()方法设置为我们需要的格式,如:”image/webp”,”image/jpeg”,”image/png”。 3、最后将canvas转换为图片,显示在网页中。点击右键保存,就得到了不同格式的图片了。 ...
android里面 canvas 转换成bitmap
4.4_屏幕坐标和canvas坐标的转换|使用鼠标和canvas交互|canvas项目综合实战|Canvas图形、动画、游戏开发
RGB画布 将RGBA像素的平面阵列(如Uint8ClampedArray中的Uint8ClampedArray )转换为新的Canvas。例子 var rgbaToPixels = require ( 'rgba-to-canvas' )var canvas = rgbaToPixels ( pixels , [ 128 , 128 ] )...
移动游戏中我们经常用canvas,但 canvas性能一直是被我们所头痛的,提高canvas性能变得越来越重要
10个提高Canvas性能技巧 很好的 我自己在用的
本篇文章主要介绍了js实现canvas保存图片为png格式并下载到本地的方法,非常具有实用价值,需要的朋友可以参考下
html5 canvas矩阵转换
3.把最终的像素值一维数组转换HTML文件格式并导出到文件 4.懂JS获取文件内容的技术人员可以通过JS获取导出的文件内容,赋值给HTML标签,这样图片就可以以HTML模式生成图片了,非base64地址和img标签,而是很多像素...
ExportCanvas是一款非常实用的可将canvas图像导出为多种格式图片的jQuery插件。该canvas图像导出插件使用浏览器的下载功能将canvas中的图像下载到本地,你可以指定多种类型的图片格式:PNG,JPEG,GIF,BMP,WEBP。
因为您不想将自定义文件格式转换为SVG。 演示版 这个怎么运作 我们创建一个模拟2d画布上下文。 像在普通画布上一样使用画布上下文。 在您调用方法时,我们在SVG中构建了一个场景图。 好极了! 用法 //Create a new ...
Javascript语言通过canvas实现复制图片,Javascript语言通过canvas实现复制图片
提取画布RGBA像素作为形状为[width, height, 4]的ndarray。 如果提供作为第二个参数,则分配给定类型的新类型数组,以用作基础数据的ndarray。 安装 $ npm install ndarray-from-canvas 用法 var ndarrayFromCanvas...
将svg画布内容转成canvas,转换成png图片下载,基于IE
<p>11111111111 <p>11111111111 <p>11111111111 <p>11111111111 <p>11111111111 <p>11111111111 ... var imgUri = canvas.toDataURL(); $("body").append('下载的图片">保存图片</a>'); }); [removed]
html2canvas案例解决模糊不清及滚动下来问题(已测试,可直接应用到项目中)
该代码为 html转base64图片格式,hmtl+js 需要IE9以上浏览器或firefox,chrome支持!
这篇文章了我将介绍一下如何将一张图片拷贝到canvas里,以及反过来,如何将画布内容保存成图片...如果你的画布上的作品已经完成,你可以用下面简单的方法将canvas数据转换成图片格式: // Conver[......] 阅读全文>>
它的主要功能和特点包括: 1. **网页截图**:能够将整个网页或特定元素转换为图片。 ... 3. **跨浏览器支持**:在大多数主流浏览器上...2. 大尺寸网页的转换可能会导致性能问题。 3. 可能需要处理一些浏览器兼容性问题。