jq仿ps颜色拾取功能-js颜色拾取
2024-08-30 23:29:17
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,插件调用
$(function () {
$('.source').pickerColor({
ck:function (data) {
console.log(data)
$('.color').css('background','rgba('+data+',1)')
}
})
})
代码仅供参考,具体功能可以自己扩展。
个人博客 :很多好用的 npm 包 , 可以看看 https://gilea.cn/
http://www.cnblogs.com/jiebba 我的博客,来看吧!
最新文章
- JVM之SerialOld收集器
- Note3 :《集体智慧编程》用户相似度计算
- C#函数与SQL储存过程
- C#处理Excel
- hdoj 1010 Tempter of the Bone【dfs查找能否在规定步数时从起点到达终点】【奇偶剪枝】
- Tomcat8 配置NIO
- python中去掉空行的问题
- 关于asp:login控件和验证码的问题?(转)
- unix系统非roo账号安装JDK
- Shell基础一
- Linux线程 之 线程 线程组 进程 轻量级进程(LWP)
- 【javascript】数组的操作
- Tomcat7 JDK8 Java HotSpot(TM) 64-Bit Server VM warning: INFO: os::commit_memory(0x0000000540000000, 5368709120, 0) failed; error=&#39;Cannot allocate memory&#39; (errno=12)
- 软件工程(FZU2015) 赛季得分榜,第一回合
- Java判断当前时间是否在某一时间段内
- 更新VS2017会出现“请更新 Visual Studio 安装程序 再继续” 提示
- chrome浏览器直接打印 - z
- solus 系统 - 怎么使用中文输入法?
- Hyper-V 虚拟机连网
- Django-RestfulFramework --- DRF