Javascript 从图像中检测和裁剪卡片

我们正在开发一款移动应用程序，目的是拍摄一张卡（更准确地说，是一张公民卡）的照片，然后使用ORC提取信息。

对于相机预览和图片捕获，我们使用cordova插件：

有关应用程序如何工作的一些上下文：

使用相机预览将屏幕上的框架与卡片对齐，框架本身始终使用相同的百分比绘制（74%宽度乘以24%屏幕大小的高度）

这张照片是拍的

我们使用不同比例的不同百分比（通过在多个设备中进行测试）对其进行裁剪（裁剪是通过

Javascript

完成的），并向用户展示一张仅包含卡的图像

我添加了一些图片，以提供更多的上下文

1。摄影机预览屏幕，我们可以在其中看到帧

2。这是cordova插件在我们拍照后返回的图像

3。这是使用我们的值裁剪后的图像

我们为每个比率使用一个范围表：（我们只显示范围，而不是使用的百分比，如果您需要百分比，我可以分享）

我们已经测试了一些我们的值不起作用的设备，因为有太多不同的设备，我们不能为每个设备使用单独的值

我们的问题是：

如何计算图像上显示的卡的X、Y、宽度和高度，知道拍摄的图片因设备而异

这是达到假装结果的最佳方式吗

还有哪些其他方法可以实现这一目标？知道我们被绑定到javascript解决方案