Fetch image from JavaScript to flask

Question

Hi, How to fetch matrix of images readed by cv.imread() in JavaScript to flask in backend and returned after using Easyocr as array of images.

Format of image is a matrix image readed by OpenCv (CV.imread(img) )

enter image description here enter image description here

*CODE from python file(Backend): *

@views.route("/detect", methods=['POST', 'GET'])
def detectText():
    print("getdatafromjavascript")
    im = request.files.get('snap')
    cv.imwrite(im)
    #readIm = cv.imread(im)
    #print(im.content_type)
    if im:
        # model = create_model()
        #img = cv.imdecode(np.frombuffer(im.read(), np.uint8), cv.IMREAD_UNCHANGED)
        img = cv.imread('test.png')
        # Detect objects
        # r = model.detect([img], verbose=0)[0]

        # masked_image = visualize.display_instances(img, r['rois'], r['masks'], r['class_ids'], ["BG", "culture"], r['scores'], show_bbox=True)
        # masked_image = cv.putText(img=np.float32(masked_image), text=f'{r["masks"].shape[2]} colonies', org=(50, 50),
        # fontFace=cv.FONT_HERSHEY_DUPLEX, fontScale=2, lineType=cv.LINE_AA, color=(256, 0, 0), thickness=2)

        img = cv.cvtColor(img, cv.COLOR_RGB2GRAY)
        ret, buf = cv.imencode('.jpg', img)

        return send_file_data(buf.tobytes())
        reader = easyocr.Reader(['en'], gpu=False)  # bedre om du har gpu og raaskere
        result = reader.readtext(im, detail=1, ycenter_ths=0.2, paragraph=False, width_ths=0.1)  # Matris
        i = 0
        imgs = []
        for text in result:
            i = 1 + i
            p1 = text[0][0]
            p2 = text[0][2]
            y1 = p1[1]
            y2 = p2[1]
            x1 = p1[0]
            x2 = p2[0]
            # cpx = text[0][2]
            detectedText = text[1]
            cropped = im[y1:y2, x1:x2]
            imgs.append(cropped)
        return imgs```

*CODE from JavaScript(Frontend): *

`function lastopp(data){
     // Create a form using FormData. This holds key value pairs.
    let from = document.getElementById('formIm')
        let formdata = new FormData();

        // Add a key value pair ("snap", file) to the FormData object. file is the original file passed sent to the upload function.
         formdata.append('snap', data);
         
    // The fetch() method returns a Promise and has the syntax of if true, do these sequential functions, else in the case of an error do Y.
    fetch("detect" , {
        method: 'POST',
        body: formdata,
    }).then(function(response) {
        return response.blob();
    }).then(function(blob) {
        ocrIm.src = URL.createObjectURL(blob);
    }).catch(function(err) {
        console.log('Fetch problem: ' + err.message);
    });
}`







*I tried fetch and AJX*

Fetch image from JavaScript to flask

0 Answers0