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}.
owner
Making the user namerepo
Warehouse,path
Represents 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 picture
file
convertbase64
data - Create a consumer for this
base64
theimg
The label - Will the
img
Label conversion tocanvas
The element - through
canvas
thetoBlob
Method compress the data to generate the appropriate sizeblob
- will
blob
Converted 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.