Renvoyez les données d'image avec Flask of Python et dessinez-les dans l'élément canvas de HTML

Dessinez les données d'image acquises par Flask of Python dans l'élément canvas de HTML.

Chose que tu veux faire

Lisez les données d'image enregistrées dans Google Cloud Storage avec les fonctions Cloud et dessinez-les dans l'élément canvas de votre HTML. Les fonctions cloud lit d'abord l'image au format blob. Convertissez-le en png ou jpg, renvoyez-le avec flask et dessinez-le avec l'élément canvas.

Charger et télécharger des fichiers de stockage avec les fonctions Cloud

Je n'ai pas hésité car les documents officiels sont volumineux ici.

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_nom est le nom de la destination de stockage créée dans Storage. Défini manuellement
    
    blob = bucket.blob(source_blob_name)#Dans le nom de fichier court
    blob.download_to_filename(destination_file_name)

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

Une fois exécuté, le fichier sera téléchargé localement.

Au lieu de télécharger en un seul fichier, retournez au format jpg avec flask et téléchargez

Il a commencé à rester coincé ici. En bref, lisez le blob en octets, ajoutez-y un en-tête, etc. À ce moment-là, utilisez le module send_file de Flask. Non, tu ne le sais pas.

Cette fois, l'hébergement est effectué par les fonctions Cloud de GCP, il n'y a donc pas d'app.run () etc. Cependant, si vous hébergez ceci, la fonction download_blob () fonctionnera si vous frappez une certaine 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_nom est le nom de la destination de stockage créée dans Storage. Défini manuellement
    
    blob = bucket.blob(source_blob_name)#Dans le nom de fichier court
    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)

Reportez-vous aux informations suivantes pour le déploiement avec les fonctions Cloud. https://qiita.com/NP_Systems/items/f0f6de899a84431685ff

Si vous avez une bibliothèque installée, tapez simplement ce qui suit pour l'émuler localement.

teriminal.

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

Appuyez sur l'URL hébergée et l'image sera téléchargée. Mais contrairement à un seul fichier, il revient. Utilisez ceci pour dessiner ce que vous recevez sur la toile

Représentation sur élément de toile

Ceci est également assez bouché. Même si c'est une chose si simple. Ce site a été vraiment utile. https://stackoverflow.com/questions/57014217/putting-an-image-from-flask-to-an-html5-canvas

C'est php, mais html est similaire.

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 hébergée sur Flask

      img.onload = function() {
        img.style.display = 'none'; //Je ne sais pas
        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(); ?>

Impressions

Non, c'était une chose tellement simple, mais je suis resté coincé. Je sens que je comprends peu les blob et png.