Question

我正在尝试构建一个网页，以捕获用户的电话和计算机上的媒体流（为身份证和此类文件拍照），然后允许用户裁剪图像以去除不需要的内容零件，然后将文档图片发送到OCR服务器进行处理。

我知道这是很多工作。我发现有许多页面可以在计算机上运行，但无法在手机上运行（android），但我还无法弄清楚裁剪部分，而且我不知道如何将其发送到我想用于OCR的网站服务器。

如果您有什么可以帮助的，我将永远感激

Answer 1

正如您所发现的，

getUserMedia()在不同的浏览器和设备上工作不一致。（兼容性是该区域脖子上的一个臭名昭著的痛苦。）您可以在此URL上使用示例来测试基本的快照功能。 https://webrtc.github.io/samples/src/content/getusermedia/canvas/

该示例代码将其结果放置在普通的2d画布中（画布实际上可在多个浏览器上工作）。

我不会在这里描述裁剪操作，只是说它可以与canvas元素一起使用，并将其结果放置在另一个画布中。您可以通过简单的网络搜索在plenty中找到implementations。

在Javascript中，一旦裁剪出具有所需图像的Canvas，就可以像这样使用toBlob()：

  var quality = 0.8
  croppedCanvas.toBlob(
     function callback (blob) {
       /* POST the blob here */
     }, 
     'image/jpg',
     quality);

在回调中，您将获得一个Blob object，其中包含编码的（jpeged）图像。然后，您可以在回调中使用ajax或fetch操作将其发布到您的服务器中。

我担心您的问题涉及很多主题，所以我还没有为所有内容编写示例代码。但这应该可以帮助您入门。（我本人最近不得不爬过所有这些内容，要弄清这一切都很困难。）