Project Code 1

fetch-image-proxy

An image, an image! My Kingdom for a header image!

King Richard III, probably

Uses the wonderful npm package open-graph-scraper to fetch some image from a given URL.

Usage

I have a demo server running at https://image.letterq.org/URL_TO_FETCH_IMAGE_FROM

URL_TO_FETCH_IMAGES_FROM must be url encoded.

For example, the header image to this repo can be fetched like this: https://image.letterq.org/https%3A%2F%2Fgithub.com%2Fqcasey%2Ffetch-image-proxy

Docker Image is built automatically to run your own server.

Implementation

The package prefers open graph images, but will fall back to the first inline <img> otherwise.

This API 302 redirects requests to the found image, so you can include it (with an errorBuilder) in components like:

final String url = "https://ogp.me/";
Image.network("https://image.letterq.org/${Uri.encodeComponent(url)}",
    loadingBuilder:
        (context, child, loadingProgress) {
        if (loadingProgress == null) return child;
        return CircularProgressIndicator();
    },
    errorBuilder: (context, error, stackTrace) =>
        Text("Could not load image"),
)),

Responses are in the ~1-3 second range, depending on a number of factors. You can put an image cache like Cloudflare in front of this API to drastically improve response times after the first fetch.

What works well

URLs with premade open graph images

URLs with img tags in the html

What doesn’t work

Pages that require javascript before loading any html

API Responses