将cropperjs输出传递给Django中的OCR
在我的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)谢谢!
回答 1
Stack Overflow用户
发布于 2021-05-22 14:13:28
Post请求使用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)https://stackoverflow.com/questions/67526464
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号