-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
367 lines (335 loc) · 12.7 KB
/
index.html
1
<!DOCTYPE html><html> <head> <meta charset="utf-8" > <title> 测试canvas 功能 </title> </head> <body> <div> <div> <div> 扫描距离:(每个多少个像是取一次值)<br/> 宽：<input id="source-w" type="text" value="2" /><br/> 高：<input id="source-h" type="text" value="2" /><br/> 填充文字：<input id="fill-word" type="text" value="测试" /> 选择图片 <select id="select-img"> <option value="./one.jpg">one</option> <option value="./two.jpg">two</option> <option value="./three.jpg">three</option> <option value="./four.jpg">four</option> <option value="./five.jpg">five</option> <option value="./six.jpg">six</option> <option value="./seven.jpg">seven</option> </select> <img id="prev-img" height="100px" > </div> <div style="border-top:1px solid black;"> 生成图片大小:(生成的比例)<br/> 倍数:<input id="target-ratio" value="1" type="text" /> <input type="button" value="完成"> </div> </div> <p>状态:<span id="draw-status" style="color:red;"></span></p> <p><input id="begin-sacn" type="button" value="执行转换"></p> </div> <div style="border:1px solid blue;"> <canvas id="img-panel" > 你的浏览器不支持canvas ! </canvas> </div> <div style=" border:1px solid red;"> <canvas id="panel" style="position:absolute;"></canvas> </div> <script> //将照片按照色块 转换成矩阵 var colorBlock = [{"r":255,"g":255,"b":255},{"r":224,"g":224,"b":224},{"r":192,"g":192,"b":192},{"r":160,"g":160,"b":160},{"r":128,"g":128,"b":128},{"r":96,"g":96,"b":96},{"r":64,"g":64,"b":64},{"r":32,"g":32,"b":32},{"r":0,"g":0,"b":0},{"r":255,"g":204,"b":229},{"r":255,"g":153,"b":204},{"r":255,"g":102,"b":178},{"r":255,"g":51,"b":153},{"r":255,"g":0,"b":127},{"r":204,"g":0,"b":102},{"r":153,"g":0,"b":76},{"r":102,"g":0,"b":51},{"r":51,"g":0,"b":25},{"r":255,"g":204,"b":204},{"r":255,"g":153,"b":255},{"r":255,"g":102,"b":255},{"r":255,"g":51,"b":255},{"r":255,"g":0,"b":255},{"r":204,"g":0,"b":204},{"r":153,"g":0,"b":153},{"r":102,"g":0,"b":102},{"r":51,"g":0,"b":51},{"r":229,"g":204,"b":255},{"r":204,"g":153,"b":255},{"r":178,"g":102,"b":255},{"r":153,"g":51,"b":255},{"r":127,"g":0,"b":255},{"r":102,"g":0,"b":204},{"r":76,"g":0,"b":153},{"r":51,"g":0,"b":102},{"r":25,"g":0,"b":51},{"r":204,"g":204,"b":255},{"r":153,"g":153,"b":255},{"r":102,"g":102,"b":255},{"r":51,"g":51,"b":255},{"r":0,"g":0,"b":255},{"r":0,"g":0,"b":204},{"r":0,"g":0,"b":153},{"r":0,"g":0,"b":102},{"r":0,"g":0,"b":51},{"r":204,"g":229,"b":255},{"r":153,"g":204,"b":255},{"r":102,"g":178,"b":255},{"r":51,"g":153,"b":255},{"r":0,"g":128,"b":255},{"r":0,"g":102,"b":204},{"r":0,"g":76,"b":153},{"r":0,"g":51,"b":102},{"r":0,"g":25,"b":51},{"r":204,"g":255,"b":255},{"r":153,"g":255,"b":255},{"r":102,"g":255,"b":255},{"r":51,"g":255,"b":255},{"r":0,"g":255,"b":255},{"r":0,"g":204,"b":204},{"r":0,"g":153,"b":153},{"r":0,"g":102,"b":102},{"r":0,"g":51,"b":51},{"r":204,"g":255,"b":229},{"r":153,"g":255,"b":204},{"r":102,"g":255,"b":178},{"r":51,"g":255,"b":153},{"r":0,"g":255,"b":128},{"r":0,"g":204,"b":102},{"r":0,"g":153,"b":76},{"r":0,"g":102,"b":51},{"r":0,"g":51,"b":25},{"r":204,"g":255,"b":204},{"r":153,"g":255,"b":153},{"r":102,"g":255,"b":102},{"r":51,"g":255,"b":51},{"r":0,"g":255,"b":0},{"r":0,"g":204,"b":0},{"r":0,"g":153,"b":0},{"r":0,"g":102,"b":0},{"r":0,"g":51,"b":0},{"r":229,"g":255,"b":204},{"r":204,"g":255,"b":153},{"r":178,"g":255,"b":102},{"r":153,"g":255,"b":51},{"r":128,"g":255,"b":0},{"r":102,"g":204,"b":0},{"r":76,"g":153,"b":0},{"r":51,"g":102,"b":0},{"r":25,"g":51,"b":0},{"r":255,"g":255,"b":204},{"r":255,"g":255,"b":153},{"r":255,"g":255,"b":102},{"r":255,"g":255,"b":51},{"r":255,"g":255,"b":0},{"r":204,"g":204,"b":0},{"r":153,"g":153,"b":0},{"r":102,"g":102,"b":0},{"r":51,"g":51,"b":0},{"r":255,"g":229,"b":204},{"r":255,"g":204,"b":153},{"r":255,"g":178,"b":102},{"r":255,"g":153,"b":51},{"r":255,"g":128,"b":0},{"r":204,"g":102,"b":0},{"r":153,"g":76,"b":0},{"r":102,"g":51,"b":0},{"r":51,"g":25,"b":0},{"r":255,"g":204,"b":204},{"r":255,"g":153,"b":153},{"r":255,"g":102,"b":102},{"r":255,"g":51,"b":51},{"r":255,"g":0,"b":0},{"r":204,"g":0,"b":0},{"r":153,"g":0,"b":0},{"r":102,"g":0,"b":0},{"r":51,"g":0,"b":0}]; //全局配置 var __GLOBAL__ = { CONFIG:{ mosaicSize:{x:2,y:2}, fillSize:{w:3,h:3}, fillWord:"", renderImg:"./one.jpg" } } //状态元素 var statusEle = document.getElementById("draw-status"); var getNearstColor = function(color){ if(!color){ return; } var resColor = null; var tmp = 0; var tmpColor = null; var tmpv = 0; for(var i =0; i< colorBlock.length;i++){ tmpColor = colorBlock[i]; tmpv = (color.r-tmpColor.r)*(color.r-tmpColor.r) + (color.g-tmpColor.g)*(color.g-tmpColor.g) + (color.b-tmpColor.b)*(color.b-tmpColor.b); if(i==0){ tmp = tmpv; resColor = tmpColor; continue; } if(tmp > tmpv){ tmp = tmpv; resColor = tmpColor; } } return resColor; } //将根据色块 将照片 转换成矩阵 var eachImageData = function(cvs,ctx,offset,callback,execOver){ if(!cvs || !ctx || !ctx.getImageData){ alert("image data error!"); return; } offset = offset || {x:1,y:1}; callback = callback || function(){}; execOver = execOver || function(){}; var imgDatas = ctx.getImageData(0, 0, cvs.width, cvs.height); var idw = imgDatas.width; var idh = imgDatas.height; var isExecEnd = false; var interval = null; var currY = -1; //执行任务 var execTask = function(i,idw,imgDatas,execCall){ execCall = execCall || function(){}; if(isExecEnd){ console.log("fuck end!!!"); return; } for(var j = 0; j < idw; j+=offset.x){ var yIdx = (i * 4) * idw; var xIdx = yIdx + j * 4; var r = imgDatas.data[xIdx]; var g = imgDatas.data[xIdx+1]; var b = imgDatas.data[xIdx+2]; var a = imgDatas.data[xIdx+3]; callback(imgDatas.data,{x:xIdx,y:yIdx ,w:idw,h:idh},r,g,b,a); } execCall(); } //下一个任务 var nextTask = function(taskEnd){ if(interval){ clearTimeout(interval); interval = null; } if(currY >= idh){ taskEnd = taskEnd || function(){}; isExecEnd = true; taskEnd(); return; } currY += offset.y; interval = setTimeout(function(){ execTask(currY,idw,imgDatas,function(){ nextTask(taskEnd); }); },0); ctx.putImageData(imgDatas,0, 0, 0, 0, imgDatas.width, imgDatas.height); statusEle.innerHTML = "扫描原始图片进度：" + parseInt(currY/idh*100) +"%"; //console.log(currY); } nextTask(function(){ console.log("over"); ctx.putImageData(imgDatas,0, 0, 0, 0, imgDatas.width, imgDatas.height); execOver(); }); } //变灰色 var imageGray = function(cvs,ctx){ var bs = {x:6,y:1} eachImageData(cvs,ctx,bs,function(imgDatas,info,r,g,b,a){ var avg = (r+g+b)/3; for(var i=0;i<bs.x;i++){ var xidx = info.x + i*4; imgDatas[xidx] = avg; imgDatas[xidx+1] = avg; imgDatas[xidx+2] = avg; } }); } //打马赛克 var setMosaic = function(cvs,ctx){ var mosaicSize = __GLOBAL__.CONFIG.mosaicSize; var fillSize = __GLOBAL__.CONFIG.fillSize; console.log(fillSize); var tmpColor = { r:0, g:0, b:0, a:0 }; var parend = document.getElementById("panel"); var parendCtx = parend.getContext("2d") var drawImgY = 0; var idxLine = 0; var getAvgColor = function(r,g,b,a){ tmpColor.r = (tmpColor.r+r)/2; tmpColor.g = (tmpColor.g+g)/2; tmpColor.b = (tmpColor.b+b)/2; tmpColor.a = (tmpColor.a+a)/2; } var resetTmpColor = function(){ tmpColor = { r:0, g:0, b:0, a:0 }; } //获取div元素，这个是生成标签,来填充图像的 var getEle = function(color,info){ var num = Math.round(Math.random()*9); var ele = document.createElement("div"); ele.style.color = "rgb("+(color.r-10)+","+(color.g+10)+","+color.b+")"; ele.style.width = info.w; ele.style.height = info.h; ele.style.top = info.x+"px"; ele.style.left = info.y+"px"; ele.style.position = "absolute"; ele.style.background = "rgb("+color.r+","+color.g+","+color.b+")"; ele.innerHTML = num; return ele; } var fillText = function(ctx,color,info){ var words = __GLOBAL__.CONFIG.fillWord; if(words.length < 1){ return; } var idx = idxLine%words.length; var cChar = words[idx]; ctx.fillStyle = "rgb("+(color.r-10)+","+(color.g+10)+","+color.b+")"; ctx.font = "bold "+info.h+"px sans-serif"; //ctx.translate(info.h,info.w); ctx.fillText(cChar,info.x,info.y); //ctx.restore(); } var drawImage = function(line,y,endCall){ endCall = endCall || function(){}; setTimeout(function(){ for(var x=0, len2=line.length; x <len2;x++){ idxLine++; fillText(parendCtx,line[x],{w:fillSize.w,h:fillSize.h,x:x*fillSize.w,y:y*fillSize.h}); //parend.appendChild(ele); } endCall(); },1); } var fillRandomNum = function(matix,size){ if(drawImgY>matix.length-1){ console.log("draw over!"); return; } drawImage(matix[drawImgY],drawImgY,function(){ fillRandomNum(matix,size); statusEle.innerHTML = "绘制文字图片进度："+ parseInt(drawImgY/matix.length*100) + "%"; }); drawImgY++; } //准备状态 var readyCanvasStatus = function(){ var w = cvs.width; var h = cvs.height; var nw = w/mosaicSize.x*fillSize.w; var nh = h/mosaicSize.y*fillSize.h; parend.width = nw; parend.height = nh; parendCtx.clearRect(0,0,nw,nh); } var wordMatix = []; var tmpY = -1; var tmpLine = []; eachImageData(cvs,ctx,mosaicSize,function(imgDatas,info,r,g,b,a){ var tmpColor = {r:r,g:g,b:b}; //var tpc = getNearstColor(tmpColor); var wordUnit = []; var yidx = info.y; var xidx = info.x; var idw = info.w; //console.log(yidx); for(var y=0; y < mosaicSize.y; y++){ for(var x=0; x < mosaicSize.x; x++){ //line var yp = (y * 4 * idw) + xidx + (x*4); //var p = x; getAvgColor(imgDatas[yp],imgDatas[yp+1],imgDatas[yp+2],0); } } for(var y=0; y < mosaicSize.y; y++){ for(var x=0; x < mosaicSize.x; x++){ //line var yp = (y * 4 * idw) + xidx + (x*4); //var p = x; imgDatas[yp] = tmpColor.r; imgDatas[yp+1] = tmpColor.g; imgDatas[yp+2] = tmpColor.b; } } if(yidx == tmpY){ tmpLine.push({r:tmpColor.r,g:tmpColor.g,b:tmpColor.b,a:tmpColor}); }else{ wordMatix.push(tmpLine); tmpLine = []; tmpY = yidx; } resetTmpColor(); //console.log(r); //console.log(tpc); //var avg = (r+g+b)/3 //imgDatas[xidx] = tpc.r; //imgDatas[xidx+1] = tpc.g; //imgDatas[xidx+2] = tpc.b; },function(){ readyCanvasStatus(); fillRandomNum(wordMatix); }); } var init = function(imageName){ var cvs = document.getElementById("img-panel"); var imgSrc = imageName; var ctx = null; var nImg = new Image(); if(!cvs.getContext){ alert("你的浏览器 不支持 canvas!"); return; } ctx = cvs.getContext("2d"); nImg.onload = function(data){ var wt = nImg.width; var ht = nImg.height; cvs.width = wt; cvs.height = ht; ctx.drawImage(nImg,0,0); setMosaic(cvs,ctx); } nImg.src = imgSrc; }; (function(){ var scanEle = document.getElementById("begin-sacn"); var selectImg = document.getElementById("select-img"); var prevImg = document.getElementById("prev-img"); var upateSetting = function(){ var sourceW = document.getElementById("source-w"); var sourceH = document.getElementById("source-h"); var tr = document.getElementById("target-ratio"); var fw = document.getElementById("fill-word"); __GLOBAL__.CONFIG.mosaicSize.x = parseInt(sourceW.value); __GLOBAL__.CONFIG.mosaicSize.y = parseInt(sourceH.value); __GLOBAL__.CONFIG.fillSize.w = parseInt(tr.value); __GLOBAL__.CONFIG.fillSize.h = parseInt(tr.value); __GLOBAL__.CONFIG.fillWord = fw.value; }; selectImg.onchange = function(){ prevImg.src = this.value; __GLOBAL__.CONFIG.renderImg = this.value; } scanEle.onclick = function(){ upateSetting(); init(__GLOBAL__.CONFIG.renderImg); } })() </script> </body></html>