Is there a way to turn PIL string bytes into a viewable image on my web application?

Question

I have marshalled PIL image into bytes via toBytes() on my Flask Server.

Then these bytes was then embedded in Json as a string and transferred via http to my Angular web application.

Is there a way to turn this binary into a viewable image on my web application? Or is there a better way transfering image from my Flask server to my Angular web application?

How did you embed them? Base 64 or just throwing them in as UTF? — DownloadPizza, Aug 13 '21 at 10:07
Also, does this help: https://stackoverflow.com/a/11017839/8997916 — DownloadPizza, Aug 13 '21 at 10:09
wouldnt it be possible to craft an image that encodes to a double quote to have a JSON injection? Seems unsecure — DownloadPizza, Aug 13 '21 at 10:18
I think that link helps, I will try that out later when I have the opportunity — Ryan, Aug 13 '21 at 10:19
Yes that is possible, I did that on another part of my system already; RaspberryPi -> Flask. — Ryan, Aug 13 '21 at 10:21
The link's suggestion may not work because I also want to send additional information in a form of JSON. — Ryan, Aug 14 '21 at 01:46
right now you dump raw utf into a string. Now let's say an image has the byte 0x22. Thats " in utf. You are now outside of the string and can add arbitary json. (except if you escaped it, which now that im using my brain you probably have) — DownloadPizza, Aug 14 '21 at 04:41

score 0 · Accepted Answer · answered Aug 16 '21 at 13:28

A part of my code python flask code:

    imgByteArrTemp = io.BytesIO()
    img.save(imgByteArrTemp, format="PNG")
#        imgByteArrTemp = base64.b64encode(imgByteArrTemp.getvalue())
    imgByteArrTemp = imgByteArrTemp.getvalue()

My GET method:

@app.route("/get-resulting-image", methods=["GET"]) 
def get_resulting_image(): 
    global q 
    if not q.empty(): 
        item = q.get() 
        return send_file(io.BytesIO(item),
                mimetype = "image/png",
                as_attachment=True,
                download_name="%s.png")
    return "no image to provide"

My typescript app.component.ts:

createImageFromBlob(image:Blob){
    let reader = new FileReader();
    reader.addEventListener("load", () => {
        this.imageBinary = reader.result;
        console.log(this.imageBinary);
    },false);
    if (image){
        reader.readAsDataURL(image);
    }
}   
getResponse(){
 ...
this.restService.getCorrespondingImage().subscribe( 
                            data1 => {
                                this.createImageFromBlob(data1);
                                this.isImageLoading = false;
                            },
                            error => {
                                this.isImageLoading = false;
                                console.log(error)
                            }
                        );
 ...
}

app.component.html

<img [src]="imageBinary" *ngIf="!isImageLoading">

rest.service.ts

import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {Observable, throwError} from 'rxjs';
import {catchError, retry} from 'rxjs/operators';
@Injectable({
    providedIn: 'root'
})
export class RestService {

    constructor(private http: HttpClient) { } 

....
    getCorrespondingImage():Observable<Blob>{
        return this.http.get(
            "http://192.168.1.2:9500/get-resulting-image",
            {responseType:"blob"});
    }   
}

Hope this could help someone out there.

Is there a way to turn PIL string bytes into a viewable image on my web application?

1 Answers1