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 异常处理使用总结
Jun 21 Javascript
基于jquery的滑动样例代码
Nov 20 Javascript
关于图片按比例自适应缩放的js代码
Oct 30 Javascript
分享精心挑选的23款美轮美奂的jQuery 图片特效插件
Aug 14 Javascript
javascript中判断一个值是否在数组中并没有直接使用
Dec 17 Javascript
JS不用正则验证输入的字符串是否为空(包含空格)的实现代码
Jun 14 Javascript
AngularJS 中的数据源的循环输出
Oct 12 Javascript
jQuery Dom元素操作技巧
Feb 04 jQuery
微信小程序下拉框功能的实例代码
Nov 06 Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
May 06 Javascript
JavaScript原型继承和原型链原理详解
Feb 04 Javascript
Vue+Openlayers自定义轨迹动画
Sep 24 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类的使用 实例代码讲解
2009/12/28 PHP
php UTF-8、Unicode和BOM问题
2010/05/18 PHP
Laravel框架数据库CURD操作、连贯操作总结
2014/09/03 PHP
PHP中的session安全吗?
2016/01/22 PHP
PHP截取发动短信内容的方法
2017/07/04 PHP
showModelessDialog()使用详解
2006/09/07 Javascript
DOM Scripting中的图片切换[兼容Firefox]
2010/06/12 Javascript
jquery获得下拉框值的代码
2011/08/13 Javascript
jQuery之$(document).ready()使用介绍
2012/04/05 Javascript
日历查询的算法 如何计算某一天是星期几
2012/12/12 Javascript
JS解析XML实例分析
2015/01/30 Javascript
JavaScript制作简易的微信打飞机
2015/03/31 Javascript
JavaScript实现的伸展收缩型菜单代码
2015/10/14 Javascript
jQuery实现textarea自动增长宽高的方法
2015/12/18 Javascript
浅谈javascript 函数表达式和函数声明的区别
2016/01/05 Javascript
javascript验证手机号和实现星号(*)代替实例
2016/08/16 Javascript
AngularJS过滤器filter用法实例分析
2016/11/04 Javascript
微信小程序  modal详解及实例代码
2016/11/09 Javascript
vue2单元测试环境搭建
2018/05/24 Javascript
nodejs检测因特网是否断开的解决方案
2019/04/17 NodeJs
vue项目使用.env文件配置全局环境变量的方法
2019/10/24 Javascript
浅谈Three.js截图并下载的大坑
2019/11/01 Javascript
ES6 async、await的基本使用方法示例
2020/06/06 Javascript
javascript 数组(list)添加/删除的实现
2020/12/17 Javascript
深入解析Python中的urllib2模块
2015/11/13 Python
发布你的Python模块详解
2016/09/15 Python
通过css3的filter滤镜改变png图片的颜色的示例代码
2020/05/06 HTML / CSS
澳大利亚家居用品零售商:Harris Scarfe
2020/10/10 全球购物
2014保险公司个人工作总结
2014/12/09 职场文书
小学教学工作总结2015
2015/05/13 职场文书
爱国主题班会教案
2015/08/14 职场文书
医务人员岗前培训心得体会
2016/01/08 职场文书
员工试用期工作总结
2019/06/20 职场文书
Requests什么的通通爬不了的Python超强反爬虫方案!
2021/05/20 Python
pytorch分类模型绘制混淆矩阵以及可视化详解
2022/04/07 Python
vue-cli3.x配置全局的scss的时候报错问题及解决
2022/04/30 Vue.js