jquery怎么模仿ps颜色拾取功能

本篇内容介绍了"jquery怎么模仿ps颜色拾取功能"的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

1.效果展示

2.html代码：index.html

3.插件代码：

(function ($) { $.fn.pickerColor=function (option) {  var opt ={  ck:function () {}  },_this=this  opt=$.extend(opt,option);  _this.on('click',function (e) {  var canvasObj = '';  $('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)')  } }) })

"jquery怎么模仿ps颜色拾取功能"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站，小编将为大家输出更多高质量的实用文章！