老實說,我不知道在哪里真正尋找這個.我看了SO,但問題遠比檢測汽車或復(fù)雜的游戲形狀要復(fù)雜得多.我只有一個畫布(HTML5元素),里面有一個圖像,里面有一堆矩形和正方形,里面有圖像,想要檢測每一個,“剪掉它們”,然后一個接一個地瀏覽它們.我堅持的作品是找到形狀,然后得到它們的坐標.這些不是我正在繪制的圖像,而是其他圖像正在上傳,然后我繪制到畫布上.
想想像：
------------------ | ---- --- ---- || | | | | | | || ---- --- ---- || --------------- || | | || --------------- || | ------------------ 我想刪除這四個塊中的每一個,所以我可以逐個瀏覽它們,如：
---- --- ---- ---------------| | => | | => | | => | |---- --- ---- ---------------解決方法:
[關(guān)于如何自動剪裁矩形的概述]
首先,將畫布調(diào)整為圖像大小,然后在畫布上繪制圖像.
然后對于畫布圖像中的每個矩形：
>使用getImageData獲取畫布圖像上每個像素顏色的數(shù)組.
>從左上角開始掃描顏色.
>當你點擊非背景顏色時,你會碰到一個矩形邊.
>(您必須輸入背景顏色或假設(shè)左上角的像素定義背景顏色)
>沿順時針方向走矩形,直到回到起始點.
>(“行走”表示按照邊框像素顏色垂直/水平移動).
>你有矩形的邊界區(qū)域.
>(由于消除鋸齒的像素,您需要綁定稍大的區(qū)域).
>創(chuàng)建臨時畫布并將其調(diào)整為發(fā)現(xiàn)的邊界框大小.
>使用context.drawImage的剪切參數(shù)將有界rect從原始畫布復(fù)制到臨時畫布.
>使用canvas.toDataURL將臨時畫布保存為圖像.
>使用context.clearRect清除畫布上的矩形像素.
>再次開始該過程以查找下一個矩形.
這是代碼和顯示自動剪裁到圖像的演示：http://jsfiddle.net/m1erickson/33tf2/
<!doctype html><html><head><link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --><script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script><style> body{ background-color: ivory; } canvas{border:1px solid red;} #clips{border:1px solid blue; padding:5px;} img{margin:3px;} </style><script>$(function(){ var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); var cw,ch; // background definition // OPTION: look at the top-left pixel and assume == background // then set these vars automatically var isTransparent=false; var bkColor={r:255,g:255,b:255}; var bkFillColor="rgb(" bkColor.r "," bkColor.g "," bkColor.b ")"; // load test image var img=new Image(); img.crossOrigin="anonymous"; img.onload=start; img.src="https://dl.dropboxusercontent.com/u/139992952/multple/temp2a.png"; function start(){ // draw the test image on the canvas cw=canvas.width=img.width/2; ch=canvas.height=img.width/2; ctx.drawImage(img,0,0,cw,ch); } function clipBox(data){ var pos=findEdge(data); if(!pos.valid){return;} var bb=findBoundary(pos,data); clipToImage(bb.x,bb.y,bb.width,bb.height); if(isTransparent){ // clear the clipped area // plus a few pixels to clear any anti-aliasing ctx.clearRect(bb.x-2,bb.y-2,bb.width 4,bb.height 4); }else{ // fill the clipped area with the bkColor // plus a few pixels to clear any anti-aliasing ctx.fillStyle=bkFillColor; ctx.fillRect(bb.x-2,bb.y-2,bb.width 4,bb.height 4); } } function xyIsInImage(data,x,y){ // find the starting index of the r,g,b,a of pixel x,y var start=(y*cw x)*4; if(isTransparent){ return(data[start 3]>25); }else{ var r=data[start 0]; var g=data[start 1]; var b=data[start 2]; var a=data[start 3]; // pixel alpha (opacity) var deltaR=Math.abs(bkColor.r-r); var deltaG=Math.abs(bkColor.g-g); var deltaB=Math.abs(bkColor.b-b); return(!(deltaR<5 && deltaG<5 && deltaB<5 && a>25)); } } function findEdge(data){ for(var y=0;y<ch;y ){ for(var x=0;x<cw;x ){ if(xyIsInImage(data,x,y)){ return({x:x,y:y,valid:true}); } }} return({x:-100,y:-100,valid:false}); } function findBoundary(pos,data){ var x0=x1=pos.x; var y0=y1=pos.y; while(y1<=ch && xyIsInImage(data,x1,y1)){y1 ;} var x2=x1; var y2=y1-1; while(x2<=cw && xyIsInImage(data,x2,y2)){x2 ;} return({x:x0,y:y0,width:x2-x0,height:y2-y0 1}); } function drawLine(x1,y1,x2,y2){ ctx.beginPath(); ctx.moveTo(x1,y1); ctx.lineTo(x2,y2); ctx.strokeStyle="red"; ctx.lineWidth=0.50; ctx.stroke(); } function clipToImage(x,y,w,h){ // don't save anti-alias slivers if(w<3 || h<3){ return; } // save clipped area to an img element var tempCanvas=document.createElement("canvas"); var tempCtx=tempCanvas.getContext("2d"); tempCanvas.width=w; tempCanvas.height=h; tempCtx.drawImage(canvas,x,y,w,h,0,0,w,h); var image=new Image(); image.width=w; image.height=h; image.src=tempCanvas.toDataURL(); $("#clips").append(image); } $("#unbox").click(function(){ var imgData=ctx.getImageData(0,0,cw,ch); var data=imgData.data; clipBox(data); });}); // end $(function(){});</script></head><body> <button id="unbox">Clip next sub-image</button><br> <canvas id="canvas" width=300 height=150></canvas><br> <h4>Below are images clipped from the canvas above.</h4><br> <div id="clips"></div></body></html>