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 ')} })})以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持我们!
版权声明:jquery仿著名图象处理软件颜色拾取功能是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。