0

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

我需要测量我指向的那个矩形的面积（以正方形像素为单位）并用鼠标单击。

我这样想：图像被加载到数组或其他东西中，当我单击图像时，所需的功能执行以下任务：

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

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

先感谢您

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

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

我知道第一个矩形标有红色“1”。大小为 542x570 像素（内部）-因此面积为 308940 平方像素-我用 MS Paint 测量了它；）-现在我想在浏览器中实现相同的效果-在此矩形内单击并获得相同的结果。

4

3 回答 3

0

这对您查找该区域可能没什么用：（使用 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. 在这里演示>>
于 2013-04-30T11:04:11.017 回答
0

如果我理解正确，您想计算图像的面积。 这是一个工作示例。如果你需要计算边框，你应该使用 myitem.clientHeight * myitem.clientWidth 否则 myitem.offsetWidth*myitem.offsetHeight

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

}

于 2013-04-30T10:58:01.367 回答
0

不是一个实现，而是更多使用 javascript 和 HTML5 的方法： 在 2d 画布上下文中导入您的图像 获取画布中发生鼠标单击的坐标，然后使用画布 getImageData 并遍历它们以获取周围的黑色像素

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

于 2013-04-30T11:28:09.727 回答