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

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

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

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

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

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

先谢谢你

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

要处理的图像是黑白的（总是1bit！），看起来像这里。

---

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

如果我理解为true，您需要计算图像的面积。 这是一个工作样本。如果需要使用边框进行计算，则应使用myitem.clientHeight*myitem.clientWidth else myitem.offsetWidth*myitem.offsetHeight

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

---

}

这对您查找以下区域可能没有什么用处：（使用php）

编辑：

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

---

不是一种实现，而是一种使用javascript和HTML5的方式： 在二维画布上下文中导入图像 获取发生鼠标单击的画布中的坐标 然后使用canvas getImageData并遍历它们以获得周围的黑色像素

---

更多关于getImageData的信息，请点击此处：

否，否-图像内部的矩形区域（已绘制），而不是图像本身。有趣的是-但我不需要将结果转换为[cm]，像素就足够了，而且我无法运行php。看看你的示例图片-你能告诉我“在‘笑脸’中有多少黄色像素？”？（我需要这些信息）如果你不需要[cm]的答案，那么从上面的代码中删除“转换为cm”部分。因为我理解代码-它只是整个图像的宽度和高度。我刚刚对我上面的问题补充了一些解释。我会调查一下：）谢谢

<?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;
?>