jquery怎么模仿ps颜色拾取功能
jquery怎么模仿ps颜色拾取功能
本篇内容介绍了“jquery怎么模仿ps颜色拾取功能”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
1.效果展示
2.html代码：index.html
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scriptsrc="./jquery-1.12.4.min.js"></script></head><body><imgclass="source"src="./test2.jpg"alt=""><divclass="color"></div></body></html>
3.插件代码：
(function($){$.fn.pickerColor=function(option){varopt={ck:function(){}},_this=thisopt=$.extend(opt,option);_this.on('click',function(e){varcanvasObj='<canvasid="canvasPickerColor"></canvas>';$('body').append(canvasObj);varcvs=document.getElementById("canvasPickerColor"),ctx=cvs.getContext('2d')cvs.height=1;cvs.width=1varimg=newImage();img.src=_this.attr('src');varosX=e.offsetX,osY=e.offsetYctx.drawImage(img,osX,osY,1,1,0,0,1,1);varimgData=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颜色拾取功能”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注恰卡编程网网站，小编将为大家输出更多高质量的实用文章！
