1.效果展示

2.html代码：index.html
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="./jquery-1.12.4.min.js"></script>

</head>

<body>

<img class="source" style="float: left" src="./test2.jpg" alt="">

<div class="color" style="width: 150px;height: 150px;float: left;margin: 50px;background: #eee;"></div>

</body>

</html>

　　

3.插件代码：
(function ($) {

        $.fn.pickerColor=function (option) {

            var opt ={

                ck:function () {}

            },_this=this

            opt=$.extend(opt,option);

            _this.on('click',function (e) {

                var canvasObj = '<canvas id="canvasPickerColor" style="position: fixed;left: 50000px;top: 500px;"></canvas>';

                $('body').append(canvasObj);

                var cvs = document.getElementById("canvasPickerColor"),ctx =cvs.getContext('2d')

                cvs.height=1;cvs.width=1

                var img = new Image();

                img.src=_this.attr('src');

                var osX=e.offsetX,osY=e.offsetY

                ctx.drawImage(img,osX,osY,1,1,0,0,1,1);

                var imgData=ctx.getImageData(0,0,1,1);

                console.log(imgData)

                if(opt.ck) opt.ck(imgData.data[0]+','+imgData.data[1]+','+imgData.data[2]);

            })

        }

    })(jQuery)

　　

3，插件调用
  $(function () {

        $('.source').pickerColor({

            ck:function (data) {

                console.log(data)

                $('.color').css('background','rgba('+data+',1)')

            }

        })

    })

　　

代码仅供参考，具体功能可以自己扩展。

个人博客 ：很多好用的 npm 包 ， 可以看看 https://gilea.cn/　

http://www.cnblogs.com/jiebba    我的博客，来看吧！

jq仿ps颜色拾取功能-js颜色拾取的更多相关文章

  1. leangoo更换背景、设置颜色标签功能上线啦！

    leangoo看板背景太单调?卡片标签想要添加多个?没有问题,Leangoo的本次更新就给大家带来了漂亮背景和实用的颜色标签设置,接下来就让我们一起来看看吧! 设置背景: 点击看板右上角个人头像图标按 ...

  2. castapp.js颜色配置

    1  修改head的背颜色 (1) header添加class  publicHead <header class="mui-bar mui-bar-nav publicHead&qu ...

  3. JN_0005：PS改变图片指定内容颜色

    1,打开图片. 2,选择选区,抽取出独立图存 选中选区,按ctrl + alt + j ,抽取图层. 3,选中图层,再按住 ctrl,点击图层图标 的白色选区处,即可选中图层中的内容. 4,选中图层内 ...

  4. Next.js+React聊天室|Next仿微信桌面端|next.js聊天实例

    一.项目介绍 next-webchat 基于Next.js+React.js+Redux+Antd+RScroll+RLayer等技术构建的PC桌面端仿微信聊天项目.实现了消息/表情发送.图片/视频预 ...

  5. 照片灰蒙蒙？用PS的曲线功能来解决 （转）

    原文地址:http://realjasonc.blog.163.com/blog/static/16475932520107594048957/ 上次,给大家看了几张较为典型的直方图.其实直方图的状态 ...

  6. 160229-01、web页面常用功能js实现

    web页面常用功能js实现   1.网页未加载时弹出新窗口 <body onunload="window.open('http://www.a68.cn');">< ...

  7. table 控制单双行颜色以及鼠标hover颜色 table光棒

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. cordova StatusBar插件的使用（设置手机状态栏颜色和页面头部颜色一致），做出和原生一样的页面效果体验

    cordova StatusBar插件的使用(设置手机状态栏颜色和页面头部颜色一致),做出和原生一样的页面效果体验设置设备状态栏背景颜色StatusBar.backgroundColorByHexSt ...

  9. 颜色传感器TCS230及颜色识别电路（转）

    摘要 TCS230是美国TAOS公司生产的一种可编程彩色光到频率的传感器.该传感器具有分辨率高.可编程的颜色选择与输出定标.单电源供电等特点:输出为数字量,可直接与微处理器连接.文中主要介绍TCS23 ...

随机推荐

  1. Traceback (most recent call last): File "setup.py", line 22, in <module> execfile(join(CURDIR, 'src', 'SSHLibrary', 'version.py')) NameError: name 'execfile' is not defined

    在python3环境下安装robotframework-SSHLibraray报错: Traceback (most recent call last): File "setup.py&qu ...

  2. 在C语言中模仿java的LinkedList集合的使用（不要错过哦）

    在C语言中,多个数据的储存通常会用到数组.但是C语言的数组有个缺陷,就是固定长度,超过数组的最大长度就会溢出.怎样实现N个数储存起来而不被溢出呢. 学过java的都知道,java.util包里有一个L ...

  3. [ HAOI 2008 ] 圆上的整点

    \(\\\) Description 给出一个整数 \(r\) ,求圆 \(x^2+y^2=r^2\) 上的整点数. \(r\le 2\times 10^9\) \(\\\) Solution 神题. ...

  4. Python学习日记之正则表达式re模块

    用在线网页测试正则表达式时,JavaScript不支持 零宽度正回顾后发断言 (?<=exp)测试时一直匹配失败 但re模块是支持 (?<=exp) 的 终于脱坑

  5. Selenium基于Python web自动化基础二 -- 免登录、等待及unittest单元测试框架

    一.免登录在进行测试的过程中难免会遇到登录的情况,给测试工作添加了工作量,本文仅提供一些思路供参考解决方式:手动请求中添加cookies.火狐的profile文件记录信息实现.人工介入.万能验证码.去 ...

  6. Hue - Error loading MySQLdb module: libmysqlclient.so.20: cannot open shared object file: No such file or

    解决下面两点异常 >> 1. Hue页面 点击DB 查询时弹出: Error loading MySQLdb module: libmysqlclient.so.20: cannot op ...

  7. 在eclipse里如何快速定位到某一行？

    使用快捷键ctrl+L讲每一行的行号显示出来:在eclipse的某一行的最左边,右键——show Line Numbers就可以将行数都显示出来.

  8. C++_运算符重载 总结

    什么是运算符的重载? 运算符与类结合,产生新的含义. 为什么要引入运算符重载? 作用:为了实现类的多态性(多态是指一个函数名有多种含义) 怎么实现运算符的重载? 方式:类的成员函数 或 友元函数(类外 ...

  9. linux vim 常用操作

    vim 字符级 上k下j左h右i,键盘的方向键也可以移动 单词级 b上个单词首字母 w下个单词首字母 e下个单词的尾字母 行级 0行首 $行尾 删除 dd 删除光标所在行 文档级 gg 文档首行,首个 ...

  10. case when里的like功能 ////// 截取(substr)

    case when里的like功能 假如要用到case when又要用到like这样的功能,即如果字符串包含‘语文’就怎么怎么样,包含‘数学’就怎么怎么样,包含‘英语’就怎么怎么样,like是用于wh ...