jasan
jasan

Reputation: 12957

Dynamic Image resizing for firebase storage

Is there an efficient method to serve dynamic size images stored in firebase storage through changing Query parameter in image URL? Or something like Imgix? what is the most efficient method?

Upvotes: 9

Views: 6446

Answers (2)

MonkeyBonkey
MonkeyBonkey

Reputation: 47911

I use the following technique on my firebase project to do just what you are asking. Google cloud has a dynamic imageURL you can get that serves up image sizes based on the url parameter.

You'll have to call the getImageServingUrl method on the image after it's been uploaded - this will give you the dynamic image serving url you can then use. So, in addition to your firebase project, you'll have to set up a google cloud project to host the service that will generate the serving URL for an image.

Below is a GO example of an endpoint you can hit after the file is uploaded to get the dynamic image url.

import (
    "fmt"
    "net/http"
    "google.golang.org/appengine"
    "google.golang.org/appengine/image"
    "google.golang.org/appengine/blobstore"
)

func init() {
    http.HandleFunc("/photo", photoHandler)
}

func photoHandler(w http.ResponseWriter, r *http.Request) {

    c := appengine.NewContext(r)
    v := r.URL.Query()
    fileName := v.Get("file")
    if (fileName == "") {
        fmt.Fprint(w, "file name is required")
    } else {
        filename := "/gs/" + fileName;
        blobKey,err := blobstore.BlobKeyForFile(c, filename)
        if (err == nil) {
            url, urlErr := image.ServingURL(c, blobKey, nil)
            if (urlErr == nil) {
                fmt.Fprint(w, url)
            } else {
                fmt.Fprint(w, urlErr)
            }
        } else {
            fmt.Fprint(w, "image does not exist")
        }
    }  
}

Upvotes: 2

aofdev
aofdev

Reputation: 1812

I recommend You try this Cloud Functions for Firebase Storage resizing using ImageMagick

Writing a Cloud Storage Trigger with Cloud Functions for Firebase

sample code

generate thumbnail

Upvotes: 8

Related Questions