jquery仿ps顏色拾取功能

更新時間：2017年03月08日 14:09:15 作者：小結巴巴吧

本文主要介紹jquery仿ps顏色拾取功能的實例，具有很好的參考價值。下面跟著小編一起來看下吧

1.效果展示

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，插件調(diào)用

$(function () {
 $('.source').pickerColor({
  ck:function (data) {
  console.log(data)
  $('.color').css('background','rgba('+data+',1)')
  }
 })
 })

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

您可能感興趣的文章:

jQuery四種選擇器使用及示例
本文給大家匯總介紹了jQuery的四種選擇器的使用方法以及示例，非常的簡單實用，希望對大家學習jquery能夠有所幫助。
2016-06-06
Confirmer JQuery確認對話框組件
點擊鏈接或按鈕時要確認是否繼續(xù)當前操作。
2010-06-06
基于jQuery的試卷自動排版系統(tǒng)實現(xiàn)代碼
題目提干、選擇題的選項、說明文字可以包含多媒體信息（文字、圖片、列表、表格、視頻等等……）。
2011-01-01
『jQuery』.html(),.text()和.val()的概述及使用
如何使用jQuery中的.html(),.text()和.val()三種方法，用于讀取，修改元素的html結構，元素的文本內(nèi)容，以及表單元素的value值的方法
2013-04-04
jquery實現(xiàn)煙花效果(面向?qū)ο?
這篇文章主要為大家詳細介紹了jquery面向?qū)ο髮崿F(xiàn)煙花效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-03-03
Jquery左右滑動插件之實現(xiàn)超級炫酷動畫效果附源碼下載
這是一款基于jquery.pogo-slider插件實現(xiàn)的多個滑塊切換特效。本篇文章給大家介紹Jquery左右滑動插件之實現(xiàn)超級炫酷動畫效果，對jquery左右滑動插件相關知識感興趣的朋友參考下
2015-12-12
jQuery實現(xiàn)公告文字左右滾動的實例代碼
這篇文章介紹了jQuery實現(xiàn)公告文字左右滾動的實例代碼，有需要的朋友可以參考一下
2013-10-10
jquery isType() 類型判斷代碼
jquery isType() 類型判斷代碼，需要的朋友可以參考下。
2011-02-02
jQuery時間插件jquery.clock.js用法實例(5個示例)
這篇文章主要介紹了jQuery時間插件jquery.clock.js用法,結合5個實例簡單分析了jQuery時間插件jquery.clock.js的具體使用技巧,需要的朋友可以參考下
2016-01-01
jQuery與ExtJS之選擇實例分析
對于我們的用途，jQuery是一個更合適。該js中的功能更難以配置，這是需要我們的處理的，這是很難定義。
2010-08-08