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 相关文章推荐
JavaScript 动态创建VML的方法
Oct 14 Javascript
Jquery中删除元素的实现代码
Dec 29 Javascript
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
Jan 29 Javascript
js操作iframe兼容各种主流浏览器示例代码
Jul 22 Javascript
Jquery显示、隐藏元素以及添加删除样式
Aug 09 Javascript
Javascript学习笔记之 函数篇(一) : 函数声明和函数表达式
Jun 24 Javascript
jQuery插件之Tocify动态节点目录菜单生成器附源码下载
Jan 08 Javascript
JavaScript禁止用户多次提交的两种方法
Jul 24 Javascript
jQuery 全选 全不选 事件绑定的实现代码
Jan 23 Javascript
MUI 上拉刷新/下拉加载功能实例代码
Apr 13 Javascript
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
Jun 28 Javascript
react native 获取地理位置的方法示例
Aug 28 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
php中文本数据翻页(留言本翻页)
2006/10/09 PHP
PHP使用GIFEncoder类生成gif动态滚动字幕
2014/07/01 PHP
ThinkPHP的MVC开发机制实例解析
2014/08/23 PHP
ThinkPHP 3.2 数据分页代码分享
2014/10/14 PHP
PHP时间函数使用详解
2019/03/21 PHP
JavaScript计算字符串中每个字符出现次数的小例子
2013/07/02 Javascript
js如何判断不同系统的浏览器类型
2013/10/28 Javascript
js中回调函数的学习笔记
2014/07/31 Javascript
javascript正则表达式之search()用法实例
2015/01/19 Javascript
js实现黑色简易的滑动门网页tab选项卡效果
2015/08/31 Javascript
springMVC结合AjaxForm上传文件
2016/07/12 Javascript
Easyui Tree获取当前选择节点的所有顶级父节点
2017/02/14 Javascript
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
2018/03/28 jQuery
nodejs中函数的调用实例详解
2018/10/31 NodeJs
微信小程序实现上传图片裁剪图片过程解析
2019/08/22 Javascript
Vue时间轴 vue-light-timeline的用法说明
2020/10/29 Javascript
web.py获取上传文件名的正确方法
2014/08/26 Python
跟老齐学Python之复习if语句
2014/10/02 Python
python fabric实现远程部署
2017/01/05 Python
理解Python中的绝对路径和相对路径
2017/08/30 Python
学习python中matplotlib绘图设置坐标轴刻度、文本
2018/02/07 Python
Python字符串和正则表达式中的反斜杠('\')问题详解
2019/09/03 Python
python每5分钟从kafka中提取数据的例子
2019/12/23 Python
Python绘图之二维图与三维图详解
2020/08/04 Python
python文件排序的方法总结
2020/09/13 Python
荣耀俄罗斯官网:HONOR俄罗斯
2020/10/31 全球购物
请写出 BOOL flag 与"零值"比较的 if 语句
2016/02/29 面试题
设计部经理的岗位职责
2013/11/16 职场文书
中专生自我鉴定书范文
2013/12/28 职场文书
中学生英语演讲稿
2014/04/26 职场文书
合作协议书模板
2014/10/10 职场文书
党员干部四风问题整改措施思想汇报
2014/10/12 职场文书
4S店收银员岗位职责
2015/04/07 职场文书
社区服务理念口号
2015/12/25 职场文书
python生成随机数、随机字符、随机字符串
2021/04/06 Python
JS新手入门数组处理的实用方法汇总
2021/04/07 Javascript