Using Oracle Object Storage as a Blog Image Hosting Service (Part 2)

Introduction#

In the previous chapter, we have already achieved the ability to upload images using PicGo and obtain a publicly accessible link. This chapter will explain how to use CloudFlare to proxy image access, add a custom domain, and apply screen recording to GIF conversion.

Accessing Images through CloudFlare Proxy#

Create a Cloudflare Worker with the following code:

export default {

  async fetch(request, env) {

    const url = new URL(request.url);

    const path = url.pathname.replace('/blog/', '')

    const originUrl = `${env.OBJECT_STORAGE_BASE_URL}${path}${url.search}`;

    const res = await fetch(originUrl)

    return new Response(res.body);

  },

};

The above code is used to remove the storage bucket name from the accessed URL, retrieve the content through workers, and return it to the visitor. It acts as a proxy, allowing us to use a custom domain to replace the access domain of Oracle Object Storage. This way, even if we switch to a different image bed provider in the future, we don't need to change the links in our blog.

After deployment, the value of the environment variable OBJECT_STORAGE_BASE_URL needs to be configured as the access address mentioned above, up to /o/, for example:

Now you can use the domain provided by workers as the image prefix for access. You can also use a custom domain. However, this feature is only available if your own domain is hosted and resolved by CloudFlare. If you are already using CloudFlare as your domain registrar, you can configure it in the Custom Domains section of workers. CloudFlare will automatically generate an HTTPS certificate.

After configuring, change the urlPrefix in the configuration file of PicGo to the domain mentioned above:

{
    "aws-sr3": {
      "accessKeyID": "{ak}",
      "secretAccessKey": "{sk}",
      "bucketName": "blog",
      "region": "ap-chuncheon-1",
      "uploadPath": "images/{year}/{month}/{md5}.{extName}",
      "endpoint": "https://{ns}.compat.objectstorage.ap-chuncheon-1.oraclecloud.com/",
      "acl": "public-read",
      "pathStyleAccess": true,
      "urlPrefix": "https://img.linkzz.eu.org",
      "disableBucketPrefixToURL": true
    }

}

Creating GIFs#

Sometimes we have the need to create a GIF from a screen recording. No matter what platform you are using, there are always software options available to meet this need. Here, I will only introduce my method. If you find it troublesome, feel free to use your own method.

Screen Recording#

There is a screen recording software called "Snip & Sketch" in the Windows Store, which allows you to record a specific area. This UWP program is usually pre-installed.

Open it and select "Video", then click "New". Draw the recording area and click "Start" to start recording the selected area. Click "Stop" to preview the video. Click "Save". After that, you can use an MP4 to GIF conversion tool to obtain the GIF.

MP4 to GIF Conversion#

I use ffmpeg + Gifski for this.

ffmpeg#

ffmpeg - A well-known image processing software, no need for further introduction. You can use it to extract video frames one by one:

ffmpeg -i video.mp4 farme%04d.png

Gifski#

Gifski - Gifski is an open-source video to GIF conversion tool that can generate high-quality GIFs. We will be using its command-line version.

If you have already installed Rust, you can use Cargo to install Gifski:

cargo install gifski

Alternatively, you can download the installation package for your platform from the release page on GitHub.

Use the frames generated by ffmpeg to create a GIF:

gifski -o output.gif frame*.png

Here is a demonstration:

Now you can upload your GIF to the image bed and access it happily using your own domain!

Conclusion#

With this, we have successfully utilized Oracle Object Storage. The free 20GB quota is sufficient for me as a low-traffic personal blogger (~~actually, I just want to freeload~~). However, the access speed as an image bed is still too slow at the moment. But hey, it's free, so what more can we ask for? 😂