Question

情况：在html文件中获得了png（或bmp）图像，在图像上有白色背景上的黑色矩形。图像大小始终是常数AxB，矩形不会旋转，每次都不同。某些软件会自动生成Html文件和图像作为作业报告。

我需要测量该矩形的面积（以平方像素为单位），然后点击鼠标。

我用这种方式想象：图像被加载到数组或其他东西，当我点击图像时，所需的功能执行以下任务：

向左，向右，向上和向下找到最接近的黑色像素，（从坐标搜索数组我用光标点击）
计算矩形的大小（基于那些黑色像素），
计算面积，
将区域返回某个变量。

现在，它甚至可能吗？还有其他方法吗？我正在考虑js解决方案，因为我根本不熟悉jquery; php和服务器端解决方案不是一个选项，因为html文件是本地驱动器上的独立文件。

提前谢谢

----------------编辑-------------

要处理的图像是黑色和白色（总是1位！），看起来像这里。 http://www.dropbox.com/s/smh4982om3hkhd8/job_report_image1.png

我知道第一个标有红色“1”的矩形大小为542x570px（内部） - 所以面积是308940平方像素 - 我用MS Paint测量它;） - 现在我想在浏览器中实现相同 - 点击这个矩形内部并得到相同的结果。

Answer 1

如果我理解为真，你想要计算图像的面积。 here是一个工作样本。如果你需要用边框计算你应该使用myitem.clientHeight * myitem.clientWidth else myitem.offsetWidth * myitem.offsetHeight

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

}

Answer 2

这可能对您找到该区域没什么用处:(使用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;
?>

编辑：

图像中的像素数就是高度乘以宽度。

Demo Here>>

Answer 3

不是实现，而是javascript和HTML5的更多方式：在2D画布上下文中导入图像获取画布中鼠标单击发生的坐标然后使用canvas getImageData并通过它们来获取周围的黑色像素

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

测量图像内部区域 - 是否可能？

3 个答案: