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 22 Javascript
Jquery 学习笔记(一)
Oct 13 Javascript
异步动态加载JS并运行(示例代码)
Dec 13 Javascript
textarea 控制输入字符字节数(示例代码)
Dec 27 Javascript
Javascript学习笔记之 函数篇(一) : 函数声明和函数表达式
Jun 24 Javascript
javascript判断图片是否加载完成的方法推荐
May 13 Javascript
Vue.JS入门教程之事件监听
Dec 01 Javascript
分享一道关于闭包、bind和this的面试题
Feb 20 Javascript
Js实现京东无延迟菜单效果实例(demo)
Jun 02 Javascript
JS实现图片切换效果
Nov 17 Javascript
vue中对象数组去重的实现
Feb 06 Javascript
使用Vue实现一个树组件的示例
Nov 06 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 Squid中可缓存的动态网页设计
2008/09/17 PHP
apache2.2.4+mysql5.0.77+php5.2.8安装精简
2009/04/29 PHP
php抓取https的内容的代码
2010/04/06 PHP
基于flush()不能按顺序输出时的解决办法
2013/06/29 PHP
PHP echo,print,printf,sprintf函数之间的区别与用法详解
2013/11/27 PHP
PHP调用VC编写的COM组件实例
2014/03/29 PHP
php-fpm服务启动脚本的方法
2018/04/27 PHP
PHP钩子实现方法解析
2019/05/21 PHP
JavaScript方法和技巧大全
2006/12/27 Javascript
javascript跨域原因以及解决方案分享
2015/04/08 Javascript
JavaScript实现自动弹出窗口并自动关闭窗口的方法
2015/08/06 Javascript
基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
2016/08/29 Javascript
JS中微信小程序自定义底部弹出框
2016/12/22 Javascript
使用AngularJS对表单提交内容进行验证的操作方法
2017/07/12 Javascript
vue中子组件调用兄弟组件方法
2018/07/06 Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
2019/07/31 jQuery
详解基于Vue的支持数据双向绑定的select组件
2019/09/02 Javascript
JavaScript中this函数使用实例解析
2020/02/21 Javascript
JavaScript Window浏览器对象模型原理解析
2020/05/30 Javascript
js将日期格式转换为YYYY-MM-DD HH:MM:SS
2020/09/18 Javascript
Python常用库推荐
2016/12/04 Python
解读python如何实现决策树算法
2018/10/11 Python
解决Pycharm运行时找不到文件的问题
2018/10/29 Python
一篇文章弄懂Python中所有数组数据类型
2019/06/23 Python
印度首个本地在线平台:nearbuy
2019/03/28 全球购物
建筑人员岗位职责
2013/12/25 职场文书
教育科研先进个人材料
2014/01/26 职场文书
妇产医师自荐信
2014/01/29 职场文书
开办大学饮食联盟创业计划书
2014/01/29 职场文书
房产代理公证处委托书
2014/04/04 职场文书
优秀安全员事迹材料
2014/05/11 职场文书
应届毕业生自荐信
2014/05/28 职场文书
医院合作协议书
2014/08/19 职场文书
反四风个人对照检查材料
2014/09/26 职场文书
2014年电厂工作总结
2014/12/04 职场文书
2016个人廉洁自律承诺书
2016/03/25 职场文书