js获得canvas中指定像素点的颜色

所属分类:媒体-图像

 56554  323  查看评论 (12)
分享到微信朋友圈
X
js获得canvas中指定像素点的颜色 ie兼容9

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;//获得十六进制颜色


相关插件-图像

jquery.photoClip图片裁剪添加旋转 缩放按钮功能

项目上用的jquery.photoClip 插件,为了更好的用户体验 需要添加 旋转 缩放按钮功能,所以在原有的基础上添加了点功能,希望能帮助各位,写的不好 海涵!
  图像
 29761  319

svgmap地图

svgmap实现中国地图。
  图像
 62400  492

jQuery切图插件(原创)

基于jQuery实现的类似ps切图工具
  图像
 25350  328

基于HTML5 Canvas实现的图片马赛克模糊特效

基于HTML5 Canvas实现的图片马赛克模糊特效
  图像
 30442  306

讨论这个项目(12)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    不浮躁,不安逸。 0
    2017/12/22 15:09:35
    图片路径是跨域的就不能用了,有办法解决吗?
        鹤舞白沙0
        2019/7/17 9:27:23
        将图片转换为Base64编码
    回复
    不浮躁,不安逸。 0
    2017/12/19 16:16:28

    真好,正好需要

    回复
    刘金梦 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
        在谷歌都没有效果出来
    回复
    原非小筑 0
    2016/7/11 9:07:50
    deepredRibbon 0
    2016/2/28 11:02:21
    锐不可当 0
    2015/12/28 15:12:25

    好像很?的样子

        锐不可当0
        2015/12/28 15:12:37

        diao     

    回复
    小辰 0
    2015/12/28 14:12:55
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复