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 相关文章推荐
doctype后如何获得body.clientHeight的方法
Jul 11 Javascript
Javascript中Event属性搜集整理
Sep 17 Javascript
Jquery插件分享之气泡形提示控件grumble.js
May 20 Javascript
javascript实现带节日和农历的日历特效
Feb 01 Javascript
jQuery中on()方法用法实例详解
Feb 06 Javascript
bootstrap table 服务器端分页例子分享
Feb 10 Javascript
Vue 过渡(动画)transition组件案例详解
Jan 22 Javascript
js常用DOM方法详解
Feb 04 Javascript
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
May 13 jQuery
改变vue请求过来的数据中的某一项值的方法(详解)
Mar 08 Javascript
Element实现表格分页数据选择+全选所有完善批量操作
Jun 07 Javascript
JS 自执行函数原理及用法
Aug 05 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里的中文变量说明
2011/07/23 PHP
Laravel 5框架学习之Laravel入门和新建项目
2015/04/07 PHP
PHP获取网页所有连接的方法(附demo源码下载)
2016/03/30 PHP
firefox浏览器下javascript 拖动层效果与原理分析代码
2007/12/04 Javascript
js两行代码按指定格式输出日期时间
2011/10/21 Javascript
推荐17个优美新鲜的jQuery的工具提示插件
2012/09/14 Javascript
jQuery学习总结之jQuery事件
2014/06/30 Javascript
JavaScript利用正则表达式去除日期中的“-”
2014/07/01 Javascript
javascript操作ul中li的方法
2015/05/14 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
2016/06/17 Javascript
清除js缓存的多种方法总结
2016/12/09 Javascript
AngularJS ui-router (嵌套路由)实例
2017/03/10 Javascript
vue中使用refs定位dom出现undefined的解决方法
2017/12/21 Javascript
详解javascript中的变量提升和函数提升
2018/05/24 Javascript
javascript、php关键字搜索函数的使用方法
2018/05/29 Javascript
JavaScript中import用法总结
2019/01/20 Javascript
javascript设计模式 ? 状态模式原理与用法实例分析
2020/04/22 Javascript
[01:15:56]2018DOTA2亚洲邀请赛3月30日 小组赛A组 TNC VS Newbee
2018/03/31 DOTA
Python MySQLdb模块连接操作mysql数据库实例
2015/04/08 Python
python中私有函数调用方法解密
2016/04/29 Python
Python实现包含min函数的栈
2016/04/29 Python
Python实现批量修改图片格式和大小的方法【opencv库与PIL库】
2018/12/03 Python
Ubuntu下升级 python3.7.1流程备忘(推荐)
2018/12/10 Python
python tornado修改log输出方式
2019/11/18 Python
Python JSON常用编解码方法代码实例
2020/09/05 Python
洗发露广告词
2014/03/14 职场文书
带病坚持工作事迹
2014/05/03 职场文书
优秀班组长事迹
2014/05/31 职场文书
个人委托书
2014/07/31 职场文书
大学生自我评价200字(4篇)
2014/09/17 职场文书
邮政营业员岗位职责
2015/04/14 职场文书
2016年大学生党员公开承诺书
2016/03/24 职场文书
python入门之算法学习
2021/04/22 Python
vue实现列表垂直无缝滚动
2022/04/08 Vue.js
JavaScript前端面试扁平数据转tree与tree数据扁平化
2022/06/14 Javascript
Hive HQL支持2种查询语句风格
2022/06/25 数据库