I always wanted to give my daughter a little gift in my own way: it should be something that reflects dad’s characteristics (programmer) and lasts forever. Considering that children change quickly and need something to record, I decided to make an album. Considering that it would be easy to track every upload record and download the backup one day, I decided to save the pictures to github warehouse

We’re used to interacting with the GitHub repository via the command line or integration tools, but GitHub also provides a REST API that allows developers to commit and retrieve the repository’s content, which provides the foundation for cloud photo albums.

Function point analysis

First, there are a few feature points and issues to note:

  • Upload pictures. Upload images to remote repository via API
  • Get the list of images. Obtain image information in batches through interfaces
  • Show pictures. For some reason the GitHub file link is not accessible, so you need to take an extra step to get the bloB data of the image through the interface and convert it to Base64 for display
  • GitHub provides an interface that only supports image files of up to 1MB, so we need to compress images when uploading them.

The implementation steps

Create the repository and configure the Access Token

First create a new repository and then configure the Access Token:Then click Ok to generate and save the token to a safe place where it won’t appear again:The Token is then carried in the following interface request header:Authorization:token ghp_C2312321sdsaeqweqevd.

Note: Do not put this token in the repository in clear text, because on the one hand it is very insecure, and on the other hand GitHub will recognize it and automatically remove the token

To upload pictures

The URL format of the uploaded file is put /repos/{owner}/{repo}/contents/{path}.

  • ownerMaking the user name
  • repoWarehouse,
  • pathRepresents the path of the picture.

For example: are you going to upload newFile. JPG images folder under the root directory: / repos/myAccountName myRepo/contents/images/newFile. JPG

The upload interface looks like this:

After selecting a gallery picture or taking a picture, compress the picture according to the size of the picture.

Principle of compression:

  • The picturefileconvertbase64data
  • Create a consumer for thisbase64theimgThe label
  • Will theimgLabel conversion tocanvasThe element
  • throughcanvasthetoBlobMethod compress the data to generate the appropriate sizeblob
  • willblobConverted intofile

For details, please refer to toBlob method on MDN

Then convert the compressed file to Base64, since Github upload interface only supports Base64 data, and call upload interface:

// Get the file suffix from base64 with the number of milliseconds and description as the file name
var fileName = Date.now() + "_" + desc +"." + bs64.match(/data:image\/(\w+)/) [1];
// The message uploaded this time is similar to the message added each commit time
var message = "Test information"
fetch("https://api.github.com/repos/anderlaw/gallery/contents/images/" + fileName, {
    method: "put".headers: {
      Authorization:"token ghp_C2312321sdsaeqweqevd".Accept:"application/vnd.github.v3+json"
    },
    body: JSON.stringify({
      message: message,
      Github only allows strict Base64 content, truncating file types and base64 identifiers.
      content: base64.split("base64,") [1,})}Copy the code

Note: GitHub only allows base64 data strictly, truncated at the beginning, such as Data :image/ JPEG; Base64, 9 j / 4 aaqskzjrgabaqeayabgaad /, should be: / 9 j / 4 aaqskzjrgabaqeayabgaad /, making won’t be able to the normal.

Display images

Get all the image file information in the images directory.

The format of the interface for obtaining the file list in a directory is: get /repos/{owner}/{repo}/contents/{path}

fetch("https://api.github.com/repos/anderlaw/gallery/contents/images", {method: "get".headers: {
      Authorization:"token ghp_C2312321sdsaeqweqevd".Accept:"application/vnd.github.v3+json"}})Copy the code

Returns the following:

It can be seen that the returned data has the absolute path of the image file (it cannot be accessed normally in China), so it needs to retrieve the image data according to the path attribute of each file.

var filePath = "images/laughter.jpg"
fetch("https://api.github.com/repos/anderlaw/gallery/contents/"+filePath, {
    headers: {
      Authorization:"token ghp_C2312321sdsaeqweqevd".Accept:"application/vnd.github.v3+json"
    },
}).then(function (res) {
  return res.blob();
})
.then(function (blob) {
  console.log(blob)
})
Copy the code

The printed BLOb object looks like this:

Switch to Base64 to display normally:

The last

After the feature was developed and the logo was missing, I went to Wix to create a Favicon image for the site.

Now the whole has been completed, the warehouse address: GitHub, if you like, you can give a star.

Website preview: GitHub Page.

Finally, listening to Enigma’s “Return to Innocence”, the melodious song, it was like seeing me in the future: holding my daughter’s hand, beside the endless fields, the air filled with the fragrance of rice, big and small, high and low, as if this was the whole world.