Cannot show result of edge detection

Anvil Q&A
1

What I’m trying to do:
I want to show the result on web app but I don’t know how to do it.

What I’ve tried and what’s not working:
I have tried to make it an image with PIL on the server, but the result is disappointing. I get error like this :

anvil.server.SerializationError: Cannot serialize return value from function. Cannot serialize <class ‘PIL.Image.Image’> object at msg[‘response’][2]

I read the documentation about media and it’s all about get an image file from a link. My result is array saved in output1 variable.

Code Sample:
this is my code in server

@anvil.server.callable

def gui():
    output1 = kirsch(image)
    output1 = Image.fromarray(output1)
    return([fitur_bentuk, prediksi, output1])

and this is my code in anvil

class Form1(Form1Template):

  def button_1_click(self, **event_args):
    """This method is called when the button is clicked"""
    
    gui = anvil.server.call('gui')
    
    tepi = gui[2]
    self.image_4.source = tepi

Clone link:
share a copy of your app

2

As the error message says, you cannot simply return a PIL image. The typical approach is to construct a Media object from the image and return it. Here’s a fairly recent post dealing with the same issue: Cannot serialize <class 'PIL.Image.Image'> object - #3 by helperfunction

1 Like
3

Thank you for your response

the problem is, my output is in array, and it is not RGB. so, i have to covert to RGB first. But the result is not what i wanted. If I’m not convert it to RGB, i will get error like this : “cannot write mode F as JPEG”.

edit : my output array contain 0 and 255 only

4

I got the solution for my problem, I save the array with cv2, and then I call it again

gambarK = np.array(kirsch(image))
gambarR = np.array(robinson(image))

cv2.imwrite("hasilK.jpeg",gambarK)
cv2.imwrite("hasilR.jpeg",gambarR)

citra_DTK =  cv2.imread('hasilK.jpeg')
citra_DTR =  cv2.imread('hasilR.jpeg')

finaly store it in anvil media

   
def image():
    DTK_byte_arr = io.BytesIO()
    DTR_byte_arr = io.BytesIO()

    DTK = Image.fromarray(citra_DTK)
    DTK.save(DTK_byte_arr,format="JPEG")
    img_DTK = DTK_byte_arr.getvalue()
    media_DTK = anvil.BlobMedia(content_type="image/jpeg", content=img_DTK)
    
    DTR = Image.fromarray(citra_DTR)
    DTR.save(DTR_byte_arr,format="JPEG")
    img_DTR = DTR_byte_arr.getvalue()
    media_DTR = anvil.BlobMedia(content_type="image/jpeg", content=img_DTR)

    return([ media_DTK, media_DTR])

that’s looks silly but it works