从嵌入元素裁剪并在ASP MVC项目中使用javascript保存图像

如何解决从嵌入元素裁剪并在ASP MVC项目中使用javascript保存图像

在这种情况下，用户应指定Google Vision必须阅读上载文档中的哪个部分以进行文本提取，此操作支持图像和PDF，并且google Vision目前运行良好，但可以提取所有内容图片/ PDF中的内容。

我需要的是用户从文档中拖动并选择Vision应处理的区域，我认为解决方案是从所选区域中截取屏幕截图，保存并进行处理。

Preview from my form

到目前为止，我已经可以使用此库（https://jcrop.com/从嵌入项目中选择区域了，但是现在我必须保存该选择的屏幕截图并将其发送到google vision。该请求将由文档底部的按钮控制，如下所示：

Buttons to process screenshot

应该是这样的：用户从文档中选择区域，单击这三个按钮之一，生成屏幕截图，保存，将其发送给google，恢复OCR文本，填充输入框。

该解决方案正在MVC ASP.NET中开发，该文档显示在embed元素内，因为它需要具有显示PDF或图像的灵活性。

要生成我在该库（https://html2canvas.hertzen.com/中创建的屏幕截图，它可以与坐标一起使用，问题在于它们可能相对于屏幕而不是我正在处理的元素。

我可以共享一些代码：用于托管文档的元素

<div class="col">
    @if (Model.ArchivoAdjunto.FileName.toupper().Contains(".PDF"))
    {
        <div class="embed-responsive embed-responsive-1by1" id="Adjunto">
        <embed class="embed-responsive-item" src="~/Uploads/tmpEquivalencias/@Model.ArchivoAdjunto.FileName" style="display: block; max-width: 100%;" type='application/pdf' />
        </div>
    }
    else
    {    
        <div class="embed-responsive embed-responsive-1by1" id="Adjunto">
        <embed class="embed-responsive-item" id="Adjunto" src="~/Uploads/tmpEquivalencias/@Model.ArchivoAdjunto.FileName" style="display: block; max-width: 100%;" />
        </div>
    }
</div>

JCrop实施

<script>
    var jcp;
    jcp = Jcrop.attach('Adjunto');
    const rect = Jcrop.Rect.sizeOf(jcp.el);
    jcp.newWidget(rect.scale(.7,.5).center(rect.w,rect.h));
    jcp.focus();    
</script>

到目前为止，这就是我所拥有的，如果任何人都可以想到更好的解决方案或完成此解决方案，我将非常感激！谢谢！