<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js上传图片取色器插件</title>
<style type="text/css">
body{margin:0;}
.module-content{
min-width:770px;
max-width:1000px;
width:100%;
color:#000;
margin:0 auto;
}
.module-head{
text-align:center;
font-weight:500;
margin:0;
font-size:30px;
height:100px;
line-height:100px;
}
.module-check-img-box{
width:77%;
float:left;
}
.module-check-box{
width:20%;
float:right;
}
.module-list-name{
font-size:16px;
height:50px;
line-height:50px;
}
.module-box{
width:100px;
height:100px;
overflow:hidden;
position:relative;
}
.module-boxinput{
width:100px;
height:100px;
opacity:0;
position:absolute;
top:0;
left:0;
z-index:10;
}
.module-boximg{
width:100px;
height:100px;
}
.module-file-box{
min-width:400px;
min-height:400px;
max-height:1000px;
overflow:auto;
border:1px solid #eee;
border-radius:5px;
padding:10px;
}
.module-check{
position:relative;
display:inline-block;
height:50px;
line-height:50px;
}
.module-checkspan{
display:block;
background:#fffurl(img/check.png) no-repeat center center/16px 16px;
width:16px;
height:50px;
position:absolute;
top:0;
left:0;
z-index:10;
}
.module-checkinput:checked + span{
background:#fffurl(img/checked.png) no-repeat center center/16px 16px;
}
.clear-float:after{
content:'';
display:block;
height:0px;
clear:both;
}
.module-show-areasection{
float:left;
width:50%;
font-size:0;
}
.module-show-areasection p{
line-height:30px;
display:inline-block;
width:200px;
font-size:16px;
}
.module-show-areasection p span{
display:inline-block;
width:16px;
height:16px;
margin-right:5px;
}
.show-all-color{
width:100px;
height:40px;
line-height:40px;
text-align:center;
font-size:14px;
color:#fff;
border:none;
outline:none;
background:blue;
border-radius:5px;
margin:20px 0;
}
</style>
</head>
<body>
<divclass="module-content">
<h1class="module-head">在线取色器</h1>
<divclass="clear-float">
<divclass="module-check-img-box">
<divclass="module-list-name">请选择一张本地图片：</div>
<divclass="module-box">
<imgsrc="img/tu.png">
<inputtype="file" id="file" onChange="setFiles(this,'showImg')"class="form-control" placeholder="请选择一张本地图片">
</div>
<divclass="module-list-name">图片显示区域：</div>
<divclass="module-file-box">
<imgid="showImg"onClick="colorPicker(0,{showImg:'showImg',area16:'area-16',areaRgba:'area-rgba',check16:'check16',checkRgb:'checkRgb',checkAlike:'checkAlike',checkRange:'checkRange'})"src="www.shaxiangift.com/tu.png">
</div>
</div>
<divclass="module-check-box">
<divclass="module-list-name">
<labelclass="module-check">
<inputtype="checkbox" id="checkRange"checked="checked">
<span></span>
是否模糊周边颜色
</label>
</div>
<divclass="module-list-name">
<labelclass="module-check">
<inputtype="checkbox" id="check16"onClick="check({area16:'area-16p',areaRgba:'area-rgbap',check16:'check16',checkRgb:'checkRgb'})"checked="checked">
<span></span>
是否十六进制显示
</label>
</div>
<divclass="module-list-name">
<labelclass="module-check">
<inputtype="checkbox" id="checkRgb"onClick="check({area16:'area-16p',areaRgba:'area-rgbap',check16:'check16',checkRgb:'checkRgb'})"checked="checked">
<span></span>
是否RGB显示
</label>
</div>
<divclass="module-list-name">
<labelclass="module-check">
<inputtype="checkbox" id="checkAlike">
<span></span>
显示相同颜色(此项由于较大，打印在控制台！)
</label>
</div>
</div>
</div>
<div>
<buttonclass="show-all-color"onClick="colorPicker(1,{showImg:'showImg',area16:'area-16',areaRgba:'area-rgba',check16:'check16',checkRgb:'checkRgb',checkAlike:'checkAlike',checkRange:'checkRange'})">显示所有颜色</button>
</div>
<divclass="module-show-area">
<sectionid="area-16p">
<divclass="module-list-name">十六进制显示区域：</div>
<divid="area-16"></div>
</section>
<sectionid="area-rgbap">
<divclass="module-list-name">RBGA显示区域：</div>
<divid="area-rgba"></div>
</section>
</div>
</div>
<scripttype="text/javascript">
(()=> {
letobj = {};
//获取DOM对象的方法
let$ = function(id){
returndocument.getElementById(id);
}
//获取预览图片路径
letgetObjectURL = function(file){
leturl = null ;
if(window.createObjectURL!=undefined) { // basic
url= window.createObjectURL(file) ;
}else if (window.URL!=undefined) { // mozilla(firefox)
url= window.URL.createObjectURL(file) ;
}else if (window.webkitURL!=undefined) { // webkit or chrome
url =window.webkitURL.createObjectURL(file) ;
}
returnurl ;
}
//十六进制转换器
lethexadecimal = function(num) {
varr = parseInt(num).toString(16);
if(r.length == 1) {
return'0' + r;
}
returnr.toUpperCase();
}
//判断颜色是否已存在
letcheckHasColor = function(arr, r, g, b) {
for(var i = 0; i < arr.length; i++) {
varn = equalsColor(arr[0], arr[1], arr[2], r, g, b);
if(n >= 0.8) {
returntrue;
}
}
returnfalse;
}
//判断相同颜色
letequalsColor = function(r1, g1, b1, r2, g2, b2) {
return(255 - Math.abs(r1 - r2) * 0.297 - Math.abs(g1 - g2) * 0.593 - Math.abs(b1 -b2) * 0.11) / 255;
}
//建立canvas画布
letcanvas = function(obj,size,param){
letcanvas = document.createElement("canvas");
if(!canvas.getContext) {
alert("很遗憾，您浏览器版本太老了，无法使用我们的小工具！");
return;
}
letctx = canvas.getContext("2d");
letstr = "",str1 = "";
letimg = $(obj.showImg);
letimgWidth = img.width;
letimhHeight = img.height;
letimgData = null;
letnewImg = new Image();
newImg.onload= function(){
canvas.width= newImg.width;
canvas.height= newImg.height;
ctx.drawImage(newImg,0, 0);
if(param=== 0){
letx = newImg.width * size.x / imgWidth;
lety = newImg.height * size.y / imhHeight;
letimgData = ctx.getImageData(x, y, 1, 1);
letcolor16 = '#'+ hexadecimal(imgData.data[0]) + hexadecimal(imgData.data[1]) +hexadecimal(imgData.data[2])
str1= '<p><span style="background:'+ color16+'"></span>'+ imgData.data.slice(0,3) +'</p>';
str= '<p><span style="background:'+ color16+'"></span>'+ color16 +'</p>';
}elseif(param === 1){
if(!confirm("显示所有颜色会比较慢，您是否要继续进行该操作？")){
return;
}
letflag = false;
letindexRange;
letjsonObj = {};
letarr = [];
letcheck = [];
if($(obj.checkRange).checked) {
flag= true;
indexRange= 10;
}else {
indexRange= 1;
}
for(let i = 0; i < imgWidth; i += indexRange) {
for(let j = 0; j < imhHeight; j += indexRange) {
letimgData = ctx.getImageData(i, j, indexRange, indexRange);
letcolor = '#' + hexadecimal(imgData.data[0]) + hexadecimal(imgData.data[1]) +hexadecimal(imgData.data[2]);
if(flag) {
if(!checkHasColor(check, imgData.data[0], imgData.data[1], imgData.data[2])&& arr.indexOf(color) === -1) {
arr.push(color);
check.push([imgData.data[0],imgData.data[1], imgData.data[2]]);
}
}else {
if(arr.indexOf(color) === -1) {
arr.push(color);
check.push([imgData.data[0],imgData.data[1], imgData.data[2]]);
}
}
}
}
for(let index = 0; index < arr.length; index++) {
str+= '<p><span style="background-color:' + arr[index] +'"></span>' + arr[index] +'</p>';
str1+= '<p><span style="background-color:' + arr[index] +'"></span>' + check[index] +'</p>';
}
if($(obj.checkAlike).checked){
for(let i = 0; i < imgWidth; i+=3) {
letarr = {};
for(let j = 0; j < imhHeight; j+=3) {
letimgData = ctx.getImageData(i, j, indexRange, indexRange);
letcolor = '#' + hexadecimal(imgData.data[0]) + hexadecimal(imgData.data[1]) +hexadecimal(imgData.data[2]);
arr[j]= color;
}
jsonObj[i]= arr;
}
console.log(JSON.stringify(jsonObj));
}
}
$(obj.area16).innerHTML= str;
$(obj.areaRgba).innerHTML= str1;
}
newImg.src= img.src;
}
window.setFiles= function(e,areaId){
e= e || window.event;
if(!window.File || !window.FileReader || !window.FileList || !window.Blob) {
alert("很遗憾，您浏览器版本太老了，无法使用我们的小工具！");
return;
}
if(e.files.length> 0)$(areaId).src = getObjectURL(e.files[0]);
}
window.colorPicker= function(param,obj,e){
e= e || window.event;
$(obj.areaRgba).innerHTML= '';
$(obj.area16).innerHTML= '';
letsize = {};
if(param=== 0){
if(e["offsetX"]) {
size.x= e.offsetX;
size.y= e.offsetY;
}else {
letoffset = img.getBoundingClientRect();
size.x= touch.clientX - offset.left;
size.y= touch.clientY - offset.top;
}
}
canvas(obj,size,param);
}
window.check= function(obj){
console.log($(obj.check16).checked);
if($(obj.check16).checked){
$(obj.area16).style.display= 'block';
}else{
$(obj.area16).style.display= 'none';
}
if($(obj.checkRgb).checked){
$(obj.areaRgba).style.display= 'block';
}else{
$(obj.areaRgba).style.display= 'none';
}
}
})()
</script>
<divstyle="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoftYaHei';">
<p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>
<p>来源：<a href="http://down.admin5.com/"target="_blank"> </a></p>
</div>
</body>
</html>
联系客服
