jquery仿著名图象处理软件颜色拾取功能

1.效果展示

2.html代码：index.html

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title/title script src=' http :/jquery-1。12 .4 .量滴js '/script/headdymg class=' source ' style=' float : left ' src=' http :/测试2。jpg ' alt=' div class=' color ' style=' width : 150 px；高度： 150像素；向左浮动：余量： 50px背景技术# eee/div/body/html3 .插件代码：

(函数($){ $。fn。pickercolor=function(option){ var opt={ CK : function(){ } }，_this=this opt=$ .扩展（选择，选项);_this.on('点击')，函数(e){ var canvasObj=' canvasPickerColor id=' canvasPickerColor ' style='位置：固定；left : 50000 pxtop : 500 px/canvas '；$(“正文”).追加(canvasObj)；var CVS=文档。getelementbyid(' canvasPickerColor ')，CTX=CVS。getcontext(' 2d ')CVS。高度=1；CVS。width=1 var img=new Image()；img。src=_ this。attr(' src ')；var osX=e.offsetX，osY=e . offsecty CTX。绘制图像(img，osX，osY，1，1，0，0，1，1)；var imgData=ctx.getImageData(0，0，1，1)；控制台。日志(IMgdata)if(opt。CK)选择。CK(IMgdata。data[0]'、' imgData.data[1]'、' imgData。数据[2])；})})))(jQuery)3、插件调用

$(function () { $(').来源')。pickerColor({ CK :函数(数据){控制台。日志(数据)$(').颜色')。css('背景'，' rgba '(数据，1 ')} })})以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！