Return the image data with Flask of Python and draw it to the canvas element of HTML

The image data acquired by Flask of Python is drawn on the canvas element of HTML.

Thing you want to do

Read the image data saved in Google Cloud Storage with Cloud functions and draw it on the canvas element of your HTML. In Cloud functions, the image is first read in blob format. Convert this to png or jpg, return it with flask, and draw it with the canvas element.

Load and download Storage files with Cloud functions

I didn't hesitate because the official documents are extensive here.

https://cloud.google.com/storage/docs/downloading-objects#code-samples

`main.py`


from google.cloud import storage

def download_blob(bucket_name, source_blob_name, destination_file_name):
    """Downloads a blob from the bucket."""
    # bucket_name = "your-bucket-name"
    # source_blob_name = "storage-object-name"
    # destination_file_name = "local/path/to/file"

    storage_client = storage.Client()

    bucket = storage_client.bucket(bucket_name)
    #bucket_name is the name of the storage destination created in Storage. Manually set
    
    blob = bucket.blob(source_blob_name)#In short, the file name
    blob.download_to_filename(destination_file_name)

    print(
        "Blob {} downloaded to {}.".format(
            source_blob_name, destination_file_name
        )
    )

When executed, the file will be downloaded locally.

Instead of downloading as a single file, return as jpg with flask and download

It started to get stuck around here. In short, read the blob in bytes, add header etc. to it and return it as an image. At that time, use Flask's send_file module. No, you don't know this.

In addition, since hosting is done by Cloud functions of GCP this time, there is no app.run () etc. However, if you host this, the download_blob () function will work if you hit a certain URL.

`main.py`


from google.cloud import storage
import io
from flask import send_file

def download_blob(request):
    """Downloads a blob from the bucket."""
    bucket_name = "your-bucket-name"
    source_blob_name = "storage-object-name"

    storage_client = storage.Client()

    bucket = storage_client.bucket(bucket_name)
    #bucket_name is the name of the storage destination created in Storage. Manually set
    
    blob = bucket.blob(source_blob_name)#In short, the file name
    image_binary= blob.download_as_bytes()
    return send_file(
            io.BytesIO(image_binary),
            mimetype='image/jpeg',
            as_attachment=True,
            attachment_filename='%s.jpg' % source_blob_name)

Refer to the following for deployment with Cloud functions. https://qiita.com/NP_Systems/items/f0f6de899a84431685ff

If you have installed the library etc., just type the following to emulate it locally.

`teriminal.`


functions-framework --target=hello  --port=8081

Hit the hosted URL and the image will be downloaded. But unlike a single file, it is returning. Use this to draw what you receive on the canvas

Depiction on canvas element

This is also quite clogged. Even though it's such a simple thing. This site was really helpful. https://stackoverflow.com/questions/57014217/putting-an-image-from-flask-to-an-html5-canvas

It's php, but html is similar.

`index.php`


<?php get_header(); ?>
<main>
<article>
  <section>
       <input type="button" value="Start" onclick="main();"/>
        <canvas></canvas>
  </section>
</article>
</main>

<script language="javascript" type="text/javascript">

    function main(){
      var canvas = document.getElementsByTagName('canvas');
      var ctx = canvas[0].getContext('2d');

      var img = new Image();
      img.src = 'http://0.0.0.0:8081';//URL hosted on Flask

      img.onload = function() {
        img.style.display = 'none'; //I don't know
        console.log('WxH: ' + img.width + 'x' + img.height)

        ctx.drawImage(img, 0, 0);
        var imageData = ctx.getImageData(0, 0, img.width*2, img.height*2)

        for(x = 0 ; x < 100 ; x += 10) {
          for(y = 0 ; y < 100 ; y += 10) {
             ctx.putImageData(imageData, x, y);
          }
        }
      };    }
</script>
<?php get_footer(); ?>