測量圖像內部的區域 - 有可能嗎？

Question

現狀： GOT PNG（或BMP）HTML文件中的圖像，圖像上有白色背景上的黑色矩形。圖像大小始終是恆定的AxB，矩形不會旋轉並且每次都不相同。 Html文件和圖像由一些軟件自動生成作爲工作報告。

我需要測量面積（以正方形像素），該矩形i點的並點擊鼠標。

我想這樣說： 映像加載到數組或東西，當我點擊圖像，所需的功能下列任務執行：

• 找到最近的黑色像素的左，右，上，下， （通過從座標陣列搜索i相光標點擊）
• 矩形（基於這些黑色像素）的計算大小，
• 計算面積，
• 返回區域的一些變量。

現在，是它甚至可能嗎？有沒有其他方法？我在考慮js解決方案，因爲我根本不熟悉jquery; PHP和服務器端解決方案不是一個選項，因爲html文件是本地驅動器上的獨立文件。

預先感謝您

----------------編輯-------------

圖片工藝是黑色&白色（總是1位！），看起來像這裏。 http://www.dropbox.com/s/smh4982om3hkhd8/job_report_image1.png

我知道，第一個矩形標有紅色的「1」。有542x570px（內部）的大小 - 所以面積爲308940個平方像素 - 我與MS畫圖測量它;） - 現在我想實現在瀏覽器中一樣 - 單擊此矩形內，並得到相同的結果。

Answer 1

不是實現，但更多的方式去與JavaScript和HTML5： 導入2D畫布背景圖像 獲得在鼠標點擊發生 然後在畫布上的座標用帆布getImageData並通過他們去到這裏周圍的黑色像素上getImageData

更多信息：http://www.html5canvastutorials.com/advanced/html5-canvas-get-image-data-tutorial/

Answer 2

如果我理解正確，你要計算圖像的區域。 here是一個工作示例。如果您需要的邊界來計算你應該使用myitem.clientHeight * myitem.clientWidth其他myitem.offsetWidth * myitem.offsetHeight

function calculate(myitem) { 
alert(myitem.clientHeight * myitem.clientWidth); 
alert(myitem.offsetWidth*myitem.offsetHeight) 

}

Answer 3

這可能是很少的有用爲你找到區域：（使用PHP）

<?php 
$img = imagecreatefrompng('http://img87.imageshack.us/img87/5673/rotatetrans.png');//open the image 
$w = imagesx($img);//the width 
$h = imagesy($img);//the height 



//Convert to centimeter 
    $dpi = 300; 
    $h = $h * 2.54/$dpi; 
    $w = $w * 2.54/$dpi; 

echo "width is:".$w; 



echo "Height is:".$h; 

$area = $w * $h; 
echo "Area is:".$area; 
?> 

編輯：

圖像中的像素數僅僅是高度乘以寬度。

1. Demo Here>>