如何使用javascript检测图像中图标的宽度？

我想检测图标的宽度（右手） 在下图中

---

我想可能的解决方案可能包括，在这种情况下，它可以用来去除浅蓝色的背景色。但我不确定去除颜色后的下一步是什么。

我想出了办法

我是这样做的：

由于跨来源问题，使用

将图像添加到文档中

如果你需要更多的解释，请告诉我。此解决方案可能不是最有效的，但它确实有效


/**
*如有必要，将0-255之间的数字转换为以零填充的十六进制数
*@param{number}number
*/
函数toHex（数字）{
常量numberAsString=Number（Number）.toString（16）；
返回numberAsString.length==1？'0'+numberAsString:numberAsString；
}
/**
*从图像中获取像素颜色并将其存储在矩阵中
*@param{HTMLImageElement}img
*/
函数转换器ImageToPixelData（img）{
//获得像素颜色的功劳来自以下方面：
// https://stackoverflow.com/questions/8751020/how-to-get-a-pixels-x-y-coordinate-color-from-an-image
const canvas=document.createElement（'canvas'）；
常量imgWidth=img.clientWidth；
常数imgHeight=img.clientHeight；
canvas.width=imgWidth；
canvas.height=imghight；
const context=canvas.getContext（'2d'）；
drawImage（img，0，0，imgWidth，imgHeight）；
const rawPixelData=context.getImageData（0,0，imgWidth，imgHeight）.data；
//转换为十六进制字符串
const pixelColors=rawPixelData.reduce（（组、像素颜色、索引）=>{
如果（索引%4==3）{//跳过alpha通道
返回组；
}
if（组[groups.length-1]。长度===6）{
组。推（“”）；
}
groups[groups.length-1]+=toHex（像素颜色）；
返回组；
}, ['']);
//转换为矩阵
/**
*@type{string[][]}
*/
常量像素矩阵=像素颜色。减少（（矩阵，像素）=>{
const currentRow=矩阵[matrix.length-1]；
if（currentRow.length最大值）{
maxX=列；
}
如果（行<最小值）{
minY=行；
}
如果（行>最大值）{
maxY=行；
}
}
}
}
常数宽度=最大值-最小值+1；
常数高度=最大-最小+1；
返回{宽度，高度}；
}
const img=document.querySelector（“#我的图像”）；
常量框=findBox（img）；
控制台日志（框）
我想我找到了。我将尝试用这个解决方案来实现它，但是欢迎任何更好的解决方案。这看起来非常好！你的方法更干净，更有条理。谢谢！