取色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
(function(w){
var quse = {
colors : [],
getUrl : function(obj){
var url;
url = window.webkitURL.createObjectURL(obj.files.item(0));
return url;
},
bing : function(obj){
var self = this;
obj.onchange = function(){
var img = self.createImage(self.getUrl(this));
}
},
createImage : function(url){
var img = new Image;
img.src = url;
var self = this;
img.onload = function(){
self.putImage(img);
}
},
putImage : function(img){
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var imgWidth = canvas.width = img.width;
var imgHeight = canvas.height = img.height;
canvas.style.marginLeft = -imgWidth/2+"px";
ctx.drawImage(img , 0,0,imgWidth,imgHeight,0,0,imgWidth,imgHeight);
this.bindCanvas(canvas);
},
start : function(id){
var fileInput = document.getElementById("fileInput");
this.bing(fileInput);
},
bindCanvas : function(canvas){
var self = this;
canvas.onmousedown = function(e){
this.down = true;
this.style.cursor = "crosshair";
if( this.down ){
var x = e.pageX , y = e.pageY;
var left = x - this.offsetLeft , top = y - this.offsetTop;
self.getColor(this , {x : left , y : top});
}
}
canvas.onmousemove = function(e){
if( this.down ){
var x = e.pageX , y = e.pageY;
var left = x - this.offsetLeft , top = y - this.offsetTop;
self.getColor(this , {x : left , y : top});
}
}
canvas.onmouseup = function(){
this.down = false;
this.style.cursor = "default"
}
},
getColor : function(canvas , obj){
var ctx = canvas.getContext("2d");
var imgData = ctx.getImageData(obj.x , obj.y , 1 , 1);
var self = this;
var r = imgData.data[0] , g = imgData.data[1] , b = imgData.data[2];
var span = document.getElementById("mianban").getElementsByTagName("span")[0];
var i = document.getElementById("mianban").getElementsByTagName("i")[0];
var btn = document.getElementById("mianban").getElementsByTagName("button")[0];
span.innerHTML = "颜色 : " + this.RGB(r,g,b);
i.style.background = this.RGB(r,g,b);
this.colors = [r,g,b];
if(!btn.jianting){
btn.jianting = true;
btn.onclick = function(){
if(confirm("是否需要模糊匹配?")){
self.quse(canvas, ctx ,true)
}else{
self.quse(canvas, ctx ,false)
}
}
}
},
quse : function(canvas , ctx , o){
var data = ctx.getImageData(0,0,canvas.width,canvas.height);
var r = this.colors[0] , g = this.colors[1] , b = this.colors[2];
for(var i = 0 ; i < data.data.length; i+=4){
var newdata = data.data;
var r1 = newdata[i+0] , g1 = newdata[i+1] , b1 = newdata[i+2];
if(o){
var r3 = (r - r1) / 256 , g3 = (g - g1) / 256 , b3 = (b - b1) / 256;
var bai = (1 - Math.sqrt(r3 * r3 + g3 * g3 + b3 * b3)) * 100;
if(bai > 90){
data.data[i+3] = 0;
}
}else{
if(r1 == r && g1 == g && b1 == b){
data.data[i+3] = 0;
}
}
}
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.putImageData(data,0,0);
},
RGB : function(r,g,b){
var str = "#" + r.toString(16) + "" + g.toString(16) + "" + b.toString(16);
return str;
}
}
w.quse = quse;
})(window);
</script>
<style type="text/css">
html{
background: #f0f0f0;
}
*{
margin: 0;
padding: 0;
}
canvas{
background: transparent;
position: absolute;
left: 50%;
top: 120px;
}
#fileInput{
opacity: 0;
height: 40px;
width: 120px;
}
button{
background: deepskyblue;
color: #fff;
width: 120px;
height: 40px;
border: 0;
border-radius: 4px;
outline: none;
}
.wrap{
padding-top: 50px;
position: absolute;
width: 300px;
left: 50%;
margin-left: -150px;
}
.wrap div{
position: absolute;
right: 0;
top: 45px;
width: 120px;
}
.wrap div button{
position: absolute;
top: 0;
z-index: -1;
}
#mianban{
background: rgba(255,255,255,.8);
width: 160px;
padding: 10px 20px;
position: absolute;
right: 0;
height: 330px;
top: 50%;
margin-top: -175px;
color: #333;
border-radius: 4px 0 0 4px;
border: 1px solid #CCCCCC;
}
#mianban p:first-child{
margin-top: 30px;
}
#mianban p i{
display: inline-block;
width: 20px;
height: 20px;
border: 1px solid #00BFFF;
border-radius: 2px;
position: relative;
left: 10px;
top: 4px;
background: rgb(230,230,230);
}
#mianban button{
display: block;
position: static;
margin: 0 auto;
margin-top: 30px;
}
</style>
</head>
<body>
<div class="wrap">
<h1>去色系统</h1>
<div>
<input type="file" id = "fileInput"/>
<button>打开图片</button>
</div>
</div>
<div id="mianban">
<p><span>颜色</span><i></i></p>
<button>去色</button>
</div>
<canvas id = "canvas"></canvas>
<script>
quse.start("fileInput");
</script>
</body>
</html>
浙公网安备 33010602011771号