<!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>
转载于:https://www.cnblogs.com/znj211985211/p/7099499.html
