【问题标题】：Pass cropperjs output to OCR in Django将cropperjs输出传递给Django中的OCR
【发布时间】：2021-08-04 03:56:14
【问题描述】：

在我的 Django 应用程序中，有人上传图像，进行框选择，单击按钮裁剪，框内的图像使用 fengyuachen Cropperjs 裁剪。我想将裁剪后的图像传递给 OCR（在我的情况下，我使用 Pytesseract。我有两个独立的应用程序（一个用于裁剪，一个用于 OCR，两者都有效。现在，我想加入它们）。所以，我的问题是：

如何将裁剪后的图像传递给 pytesseract 用于提取信息的表单输入？我是 Javascript 新手，所以我一直在努力解决它。

我认为这些图片会有所帮助。 Someone uploads and image, selects the cropping box and then select the button crop. The image is displayed

"Someone" would click on the button Send to OCR and then Django Views recieves the input

HTML 和 JS 代码

<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.11/cropper.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.11/cropper.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

</head>
<body>
    
  <h1>Upload Image to Crop</h1>
  <input type="file" name="image" id="image" enctype="multipart/form-data" multiple="true" onchange="readURL(this);" />
  <div class="image_container">
      <img id="blah" src="#" alt="your image" height="600px" width="600px" />
  </div>
  
  <!--<div id="cropped_result" ></div>-->
  <button id="crop_button">Crop</button> 

{% if ....%} <!-- I am getting multivalue key error, there has to be and if statement here I think)
<!-- Cropped image passes to the OCR-->

<form method="post" enctype="multipart/form-data"  >
  {% csrf_token %}  
<input type="submit" value="Send to OCR" name="cropped_result" >
<div class="row">
<div id="cropped_result" >
</div>
</form>
<p><textarea name="dataPath" >{{k}}</textarea></p>
{% endif %}
  <script type="text/javascript" defer>
    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#blah').attr('src', e.target.result)
            };
            reader.readAsDataURL(input.files[0]);
            setTimeout(initCropper, 1000);
        }
    }
    function initCropper(){
        var image = document.getElementById('blah');
        var cropper = new Cropper(image, {
          aspectRatio: NaN,
          crop: function(e) {
            console.log(e.detail.x);
            console.log(e.detail.y);
          }
        });

        // On crop button clicked
        document.getElementById('crop_button').addEventListener('click', function(){
            var imgurl =  cropper.getCroppedCanvas().toDataURL();
            var img = document.createElement("img");
            img.src = imgurl;
            document.getElementById("cropped_result").appendChild(img);


        })
    }
</script>

</body>

</html>

用于 OCR 的 Django 视图

from django.shortcuts import render
from django.core.files.storage import FileSystemStorage
from PIL import Image
import pytesseract
import os
import csv

 def predictImage(request):

    fileObj = request.FILES['cropped_result']
    fs = FileSystemStorage()
    filePathName=fs.save(fileObj.name , fileObj)
    filePathName=fs.url(filePathName)
    testimage = '.'+filePathName
    k=pytesseract.image_to_string(Image.open(testimage))
    context = {'filePathName':filePathName,'k':k}
    return render(request,'crop.html',context)

谢谢！

【问题讨论】：

我采用的方法是“填写表格”，但这似乎不是正确的方法。相反，最好将两个应用程序分开并进行通信（例如，使用 Ajax 将裁剪后的图像发送到服务器，然后使用 Pytesseract 应用程序以某种方式对其进行处理）。

标签： javascript django python-tesseract cropperjs

【解决方案1】：

使用 Ajax 发送发布请求。那么这个观点就很简单了。无需使用 base64、blob 或图像的任何二进制表示。（也许我遗漏了一些东西，或者 Django 真的是用户友好的）。无论如何，我希望这可以帮助某人。

from PIL import Image
import pytesseract
import os


def main_view(request):
    
    form = ImageForm(request.POST or None ,request.FILES or None)
    if form.is_valid():
        instance = form.save()
        path = instance.file
        text = pytesseract.image_to_string(Image.open(path))
        print(text)
        
    context = {'form':form}
    return render(request, 'main.html',context)

【讨论】：