jquery仿ps颜色拾取功能


Posted in Javascript onMarch 08, 2017

1.效果展示

jquery仿ps颜色拾取功能

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)')
  }
 })
 })

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
jquery.validate分组验证代码
Mar 17 Javascript
多个表单中如何获得这个文件上传的网址实现js代码
Mar 25 Javascript
jQuery lazyLoad图片延迟加载插件的优化改造方法分享
Aug 13 Javascript
Bootstrap每天必学之基础排版
Nov 20 Javascript
jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
Jan 04 Javascript
Angularjs结合Bootstrap制作的一个TODO List
Aug 18 Javascript
JS中with的替代方法与String中的正则方法详解
Dec 23 Javascript
jQuery remove()过滤被删除的元素(推荐)
Jul 18 jQuery
JQuery EasyUI 结合ztrIee的后台页面开发实例
Sep 01 jQuery
修改UA在PC中访问只能在微信中打开的链接方法
Nov 27 Javascript
Echarts动态加载多条折线图的实现代码
May 24 Javascript
Layer+Echarts构建弹出层折线图的方法
Sep 25 Javascript
关于Javascript中document.cookie的使用
Mar 08 #Javascript
JavaScript中transform实现数字翻页效果
Mar 08 #Javascript
vue动态组件实现选项卡切换效果
Mar 08 #Javascript
jQuery插件zTree实现的多选树效果示例
Mar 08 #Javascript
Vue.js组件tab实现选项卡切换
Mar 23 #Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
Mar 08 #Javascript
完美实现js选项卡切换效果(一)
Mar 08 #Javascript
You might like
CakePHP去除默认显示的标题及图标的方法
2008/10/22 PHP
php 智能404跳转代码,适合换域名没改变目录的网站
2010/06/04 PHP
php生成局部唯一识别码LUID的代码
2012/10/06 PHP
PHP重定向的3种方式
2013/03/07 PHP
利用PHP生成静态html页面的原理
2016/09/30 PHP
php让json_encode不自动转义斜杠“/”的方法
2020/04/27 PHP
javascript实现的动态添加表单元素input,button等(appendChild)
2007/11/24 Javascript
关于scrollLeft,scrollTop的浏览器兼容性测试
2013/03/19 Javascript
JS+CSS 制作的超级简单的下拉菜单附图
2013/11/22 Javascript
jquery实现表单输入时提示文字滑动向上效果
2015/08/10 Javascript
jQuery垂直多级导航菜单代码分享
2015/08/18 Javascript
javascript省市级联功能实现方法实例详解
2015/10/20 Javascript
js格式化输入框内金额、银行卡号
2016/02/01 Javascript
nodejs中模块定义实例详解
2017/03/18 NodeJs
xmlplus组件设计系列之下拉刷新(PullRefresh)(6)
2017/05/03 Javascript
Angularjs为ng-click事件传递参数
2017/06/15 Javascript
js定时器+简单的动画效果实例
2017/11/10 Javascript
使用Electron构建React+Webpack桌面应用的方法
2017/12/15 Javascript
小程序实现密码输入框
2020/11/16 Javascript
[01:07:53]RNG vs VG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python使用Matplotlib实现Logos设计代码
2017/12/25 Python
python如何为被装饰的函数保留元数据
2018/03/21 Python
这可能是最好玩的python GUI入门实例(推荐)
2019/07/19 Python
Python 面向对象静态方法、类方法、属性方法知识点小结
2020/03/09 Python
浅谈cv2.imread()和keras.preprocessing中的image.load_img()区别
2020/06/12 Python
世界上最大的专业美容用品零售商:Sally Beauty
2017/07/02 全球购物
瑞典的玛丽小姐:Miss Mary of Sweden
2019/02/13 全球购物
牵手50台湾:专为黄金岁月的单身人士而设的交友网站
2021/02/18 全球购物
关爱女孩行动实施方案
2014/03/13 职场文书
社区居务公开实施方案
2014/03/27 职场文书
领导党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
考试没考好检讨书
2015/05/06 职场文书
实体类或对象序列化时,忽略为空属性的操作
2021/06/30 Java/Android
Python实现PIL图像处理库绘制国际象棋棋盘
2021/07/16 Python
Java面试题冲刺第十七天--基础篇3
2021/08/07 面试题
JavaScript实现简单拖拽效果
2021/09/15 Javascript