Geben Sie die Bilddaten mit Flask of Python zurück und zeichnen Sie sie in das Canvas-Element von HTML

Zeichnen Sie die von Flask of Python erfassten Bilddaten in das Canvas-Element von HTML.

Was du machen willst

Lesen Sie die in Google Cloud Storage mit Cloud-Funktionen gespeicherten Bilddaten und zeichnen Sie sie in das Canvas-Element Ihres HTML-Codes. Cloud-Funktionen lesen das Bild zuerst im Blob-Format. Konvertieren Sie dies in png oder jpg, geben Sie es mit dem Kolben zurück und zeichnen Sie es mit dem Canvas-Element.

Laden und Herunterladen von Speicherdateien mit Cloud-Funktionen

Ich habe nicht gezögert, weil die offiziellen Dokumente hier umfangreich sind.

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 ist der Name des in Storage erstellten Speicherziels. Manuell einstellen
    
    blob = bucket.blob(source_blob_name)#Kurz gesagt Dateiname
    blob.download_to_filename(destination_file_name)

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

Bei der Ausführung wird die Datei lokal heruntergeladen.

Anstatt als einzelne Datei herunterzuladen, geben Sie als JPG mit Flasche zurück und laden Sie sie herunter

Es fing an, hier hängen zu bleiben. Kurz gesagt, lesen Sie den Blob in Bytes, fügen Sie einen Header usw. hinzu und geben Sie ihn als Bild zurück. Verwenden Sie zu diesem Zeitpunkt das send_file-Modul von Flask. Nein, das weißt du nicht.

Dieses Mal erfolgt das Hosting über die Cloud-Funktionen von GCP, sodass es keine app.run () usw. gibt. Wenn Sie dies jedoch hosten, funktioniert die Funktion download_blob (), wenn Sie eine bestimmte URL eingeben.

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 ist der Name des in Storage erstellten Speicherziels. Manuell einstellen
    
    blob = bucket.blob(source_blob_name)#Kurz gesagt Dateiname
    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)

Informationen zur Bereitstellung mit Cloud-Funktionen finden Sie im Folgenden. https://qiita.com/NP_Systems/items/f0f6de899a84431685ff

Wenn Sie die Bibliothek usw. installiert haben, geben Sie einfach Folgendes ein, um sie lokal zu emulieren.

teriminal.

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

Wenn Sie auf die gehostete URL klicken, wird das Bild heruntergeladen. Im Gegensatz zu einer einzelnen Datei wird sie jedoch zurückgegeben. Verwenden Sie diese Option, um das, was Sie erhalten, auf die Leinwand zu zeichnen

Darstellung auf Leinwandelement

Dies ist auch ziemlich verstopft. Auch wenn es so einfach ist. Diese Seite war wirklich hilfreich. https://stackoverflow.com/questions/57014217/putting-an-image-from-flask-to-an-html5-canvas

Es ist PHP, aber HTML ist ähnlich.

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';//Auf Flask gehostete URL

      img.onload = function() {
        img.style.display = 'none'; //Ich weiß es nicht
        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(); ?>

Impressionen

Nein, es war so einfach, aber ich blieb stecken. Ich habe das Gefühl, dass ich wenig Verständnis für Blob und PNG habe.