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 相关文章推荐
childNodes.length与children.length的区别
May 14 Javascript
jquery tools 系列 scrollable学习
Sep 06 Javascript
js原型继承的两种方法对比介绍
Mar 30 Javascript
Node.js(安装,启动,测试)
Jun 09 Javascript
jquery实现显示已选用户
Jul 21 Javascript
js实现宇宙星空背景效果的方法
Mar 03 Javascript
前端设计师们最常用的JS代码汇总
Sep 25 Javascript
angular源码学习第一篇 setupModuleLoader方法
Oct 20 Javascript
vue中配置mint-ui报css错误问题的解决方法
Oct 11 Javascript
Vue.js在数组中插入重复数据的实现代码
Nov 17 Javascript
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
Nov 13 Javascript
使用Vant完成Dialog弹框案例
Nov 11 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
隐藏X-Space个人空间下方版权方法隐藏X-Space个人空间标题隐藏X-Space个人空间管理版权方法
2007/02/22 PHP
PHP 5.0对象模型深度探索之类的静态成员
2008/03/27 PHP
php在window iis的莫名问题的测试方法
2013/05/14 PHP
解析php时间戳与日期的转换
2013/06/06 PHP
PHP的几个常用加密函数
2016/02/03 PHP
浅谈PHP错误类型及屏蔽方法
2017/05/27 PHP
flexigrid 参数说明
2010/11/23 Javascript
jQuery中width()方法用法实例
2014/12/24 Javascript
Javascript实现颜色rgb与16进制转换的方法
2015/04/18 Javascript
JS字符串false转boolean的方法(推荐)
2017/03/08 Javascript
javascript实现圣旨卷轴展开效果(代码分享)
2017/03/23 Javascript
详解React 16 中的异常处理
2017/07/28 Javascript
AngularJS select设置默认值的实现方法
2017/08/25 Javascript
Nodejs连接mysql并实现增、删、改、查操作的方法详解
2018/01/04 NodeJs
JS如何实现动态添加的元素绑定事件
2019/11/12 Javascript
javascript设计模式 ? 策略模式原理与用法实例分析
2020/04/21 Javascript
JavaScript中如何调用Java方法
2020/09/16 Javascript
python实现单向链表详解
2018/02/08 Python
python的继承知识点总结
2018/12/10 Python
python实现自动化上线脚本的示例
2019/07/01 Python
postman传递当前时间戳实例详解
2019/09/14 Python
python元组的概念知识点
2019/11/19 Python
Django认证系统user对象实现过程解析
2020/03/02 Python
CSS3 :default伪类选择器使用简介
2018/03/15 HTML / CSS
HTML5之SVG 2D入门10—滤镜的定义及使用
2013/01/30 HTML / CSS
HTML5 weui使用笔记
2019/11/21 HTML / CSS
酒店服务与管理毕业生求职信
2013/11/02 职场文书
医院合作协议书
2014/08/19 职场文书
员工年终自我评价
2014/09/14 职场文书
小学生自我评价100字(15篇)
2014/09/18 职场文书
公司员工离职证明书
2014/10/04 职场文书
2014年政协工作总结
2014/12/09 职场文书
2015年全国爱眼日活动方案
2015/05/05 职场文书
2015年度校学生会工作总结报告
2015/05/23 职场文书
navicat 连接Ubuntu虚拟机的mysql的操作方法
2022/04/02 MySQL
mysql 获取相邻数据项
2022/05/11 MySQL