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 相关文章推荐
ext for eclipse插件安装方法
Apr 27 Javascript
onkeypress字符按键兼容所有浏览器使用介绍
Apr 24 Javascript
javascript实现在某个元素上阻止鼠标右键事件的方法和实例
Aug 12 Javascript
js实现鼠标移到链接文字弹出一个提示层的方法
May 11 Javascript
实例解析jQuery中如何取消后续执行内容
Dec 01 Javascript
vue-axios使用详解
May 10 Javascript
Vue组件通信之Bus的具体使用
Dec 28 Javascript
JS表单传值和URL编码转换
Mar 03 Javascript
Vue通过ref父子组件拿值方法
Sep 12 Javascript
你不可不知的Vue.js列表渲染详解
Oct 01 Javascript
JavaScript中数组去重的5种方法
Jul 04 Javascript
vue+element UI实现树形表格
Dec 29 Vue.js
关于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
destoon实现调用热门关键字的方法
2014/07/15 PHP
PHP性能优化大全(php.ini)
2016/05/20 PHP
PHP调用接口用post方法传送json数据的实例
2018/05/31 PHP
TreeView 用法(有代码)(asp.net)
2011/07/15 Javascript
可简单避免的三个JS发布错误的详细介绍
2013/08/02 Javascript
在jquery中combobox多选的不兼容问题总结
2013/12/24 Javascript
node.js中的fs.futimesSync方法使用说明
2014/12/17 Javascript
JavaScript实现选择框按比例拖拉缩放的方法
2015/08/04 Javascript
AngularJS基础教程之简单介绍
2015/09/27 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
2016/11/22 Javascript
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
2017/03/21 jQuery
关于Webpack dev server热加载失败的解决方法
2018/02/22 Javascript
VUE 配置vue-devtools调试工具及安装方法
2018/09/30 Javascript
vue刷新页面时去闪烁提升用户体验效果的实现方法
2018/12/10 Javascript
vue-cli系列之vue-cli-service整体架构浅析
2019/01/14 Javascript
jQuery选择器之基本选择器用法实例分析
2019/02/19 jQuery
浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)
2019/09/10 Javascript
node.JS路径解析之PATH模块使用方法详解
2020/02/06 Javascript
解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
2020/08/14 Javascript
Python实现提取文章摘要的方法
2015/04/21 Python
使用beaker让Facebook的Bottle框架支持session功能
2015/04/23 Python
python修改list中所有元素类型的三种方法
2018/04/09 Python
Python正则表达式和元字符详解
2018/11/29 Python
Python3.0中普通方法、类方法和静态方法的比较
2019/05/03 Python
Python爬虫工具requests-html使用解析
2020/04/29 Python
scrapy-redis分布式爬虫的搭建过程(理论篇)
2020/09/29 Python
python实现文件分片上传的接口自动化
2020/11/19 Python
HTML5 Canvas如何实现纹理填充与描边(Fill And Stroke)
2013/07/15 HTML / CSS
使用phonegap克隆和删除联系人的实现方法
2017/03/31 HTML / CSS
Scotch Porter官方网站:男士美容产品
2020/08/31 全球购物
医药工作岗位求职信分享
2013/12/31 职场文书
青岛导游词
2015/02/12 职场文书
慰问信格式规范
2015/03/23 职场文书
开除通知书范本
2015/04/25 职场文书
SqlServer 垂直分表(减少程序改动)
2021/04/16 SQL Server