|
老實說,我不知道在哪里真正尋找這個.我看了SO,但問題遠(yuǎn)比檢測汽車或復(fù)雜的游戲形狀要復(fù)雜得多.我只有一個畫布(HTML5元素),里面有一個圖像,里面有一堆矩形和正方形,里面有圖像,想要檢測每一個,“剪掉它們”,然后一個接一個地瀏覽它們.我堅持的作品是找到形狀,然后得到它們的坐標(biāo).這些不是我正在繪制的圖像,而是其他圖像正在上傳,然后我繪制到畫布上.
想想像：
------------------
| ---- --- ---- |
| | | | | | | |
| ---- --- ---- |
| --------------- |
| | | |
| --------------- |
| |
------------------
我想刪除這四個塊中的每一個,所以我可以逐個瀏覽它們,如：
---- --- ---- ---------------
| | => | | => | | => | |
---- --- ---- ---------------
解決方法: [關(guān)于如何自動剪裁矩形的概述]
首先,將畫布調(diào)整為圖像大小,然后在畫布上繪制圖像.
然后對于畫布圖像中的每個矩形：
>使用getImageData獲取畫布圖像上每個像素顏色的數(shù)組.
>從左上角開始掃描顏色.
>當(dāng)你點擊非背景顏色時,你會碰到一個矩形邊.
>(您必須輸入背景顏色或假設(shè)左上角的像素定義背景顏色)
>沿順時針方向走矩形,直到回到起始點.
>(“行走”表示按照邊框像素顏色垂直/水平移動).
>你有矩形的邊界區(qū)域.
>(由于消除鋸齒的像素,您需要綁定稍大的區(qū)域).
>創(chuàng)建臨時畫布并將其調(diào)整為發(fā)現(xiàn)的邊界框大小.
>使用context.drawImage的剪切參數(shù)將有界rect從原始畫布復(fù)制到臨時畫布.
>使用canvas.toDataURL將臨時畫布保存為圖像.
>使用context.clearRect清除畫布上的矩形像素.
>再次開始該過程以查找下一個矩形.
這是代碼和顯示自動剪裁到圖像的演示：http:///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.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./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>
來源：https://www./content-1-427451.html
|
