插件描述：插件可以获得canvas中指定位置像素点的颜色，支持返回多种格式的颜色
getcanvaspixelcolor.js是一段轻量级的脚本，通过此脚本可以很容易的获得canvas中指定像素点的颜色，支持自动计算rgba、十六进制格式的颜色。
说明：不支持IE8等低版本浏览器，Chrome本地预览会出现canvas跨域问题，需要在服务端运行
用法：
1.首先引入getcanvaspixelcolor.js（说明：文件中的代码可以提取出来使用），当然页面上还要有canvas，如：
<canvas id="myCanvas" width="400px" height="400px"></canvas> <script src="getcanvaspixelcolor.js" type="text/javascript"></script>
说明：代码本身不需要依赖jQuery，demo中引入jQuery是为了其它需要。
2.运行[Canvas元素].getPixelColor([像素点X位置], [像素点Y位置])会返回一个option，其中记录着相应的颜色值，如：
var colorData = document.getElementById("myCanvas").getPixelColor(150, 200);3.第2步返回的option中包含rgba、rgb、hex、r、g、b、a七个值，分别为：
rgba：取得rgba()格式的颜色，如rgba(204,173,191,0.7)
rgb：取得rgb()格式的颜色，如rgba(204,173,191)
hex：取得十六进制格式的颜色，如#CCADBF
r：只获取颜色的红色（red）值，如204
g：只获取颜色的绿色（green）值，如173
b：只获取颜色的蓝色（blue）值，如191
a：只获取颜色的透明度（alpha）值，如0.7
取值示例：
var rgbaColor = document.getElementById("myCanvas").getPixelColor(150, 200).rgba;//rgba或
var colorData = document.getElementById("myCanvas").getPixelColor(150, 200);
var rgbaColor = colorData.rgba;//获得rgba颜色
var hexColor = colorData.hex;//获得十六进制颜色PREVIOUS:
NEXT:
相关插件-图像
讨论这个项目（12）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约
刘金梦 0
2017/4/1 23:15:20
想请问作者可以换掉该像素点当前的颜色吗？
刘金梦0
2017/4/1 23:16:22
希望您能回答，谢谢。
liubei04110
2017/4/9 10:39:41
浏览器要求ie9以上，别的我这里测试正常打开，
╀ㄒreasure┽.bjゾ0
2018/7/25 11:58:28
-
在谷歌都没有效果出来
😃
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
😃
取消回复
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
