Pass cropperjs output to OCR in Django (Javascript Knowledge)

In my Django App someone uploads an image, makes a box selection, clicks the button crop and the image inside the box is cropped using fengyuachen Cropperjs. I want to pass the cropped image to an OCR (in my case I use Pytesseract. I had two independent apps (one for cropping and one for OCR and both works. Now, I want to join them). So, my questions is :

How can I pass the cropped Image to the form input that is used by pytesseract to extract the information? I’m new to Javascript so I’ve been struggling with it.


<link rel="stylesheet" href="">
<script src=""></script>
<script src=""></script>

  <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 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" >
<p><textarea name="dataPath" >{{k}}</textarea></p>
{% endif %}

<!-- JS section -->

  <script type="text/javascript" defer>
    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
            setTimeout(initCropper, 1000);
    function initCropper(){
        var image = document.getElementById('blah');
        var cropper = new Cropper(image, {
          aspectRatio: NaN,
          crop: function(e) {

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

Django view used for the OCR

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

 def predictImage(request):

    fileObj = request.FILES['cropped_result']
    fs = FileSystemStorage() , fileObj)
    testimage = '.'+filePathName
    context = {'filePathName':filePathName,'k':k}
    return render(request,'crop.html',context)

I think these images could help (I’m new so I can only upload one). On the first one I show that the Cropper is working and the pic shown under is the cropped image. These is what I have so far

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


I don’t think I’d approach this as “filling out a form”. Since you’ve got this data in JavaScript, I’d create an api-style endpoint in your other application where you can submit the image data (along with any other desired metadata) as JSON through that API. I believe you’re going to find that to be easier to implement, test, and verify.

Thank you Sr. I will learn about it and give it a try.