# Preface

When I was writing an article, in order to solve the problem of inserting images, I used Tencent Cloud's object Storage (COS) to store my images and used PicGo to upload files on the Windows platform.

There was no problem when there was not much traffic on my site, but after the traffic gradually increased, I found that the free traffic of object storage exceeded every month, although not much, but it was also an extra expense. And over time, this part of the expenditure will become more and more, so I intend to save the files on my own server.

And in Google Search Console, it says that my pictures are uncompressed and should be in a more advanced webP format, which can save storage space and bandwidth.

# Analysis of demand

Although the above requirements can be implemented in PicGo, there are corresponding plug-ins. However, it is very inconvenient to operate in PicGo. I tossed about for a long time but did not realize the need to use sftp to transfer files to my server, while the compression function could not be used at all. The two plug-ins in the plug-in market are implemented by calling cloud services, and the cloud services update api and hang up directly.

So I intend to implement a simple picture upload gadget, embedded in my blog system, its function is very simple, just need to achieve the upload and conversion format function.

# Simple implementation

Here I use the simplest way to build a page that has only one function: upload the image to the server and return the link in markdown format. The picture below is the final result.

Its front-end code is so lengthy that I put it on simplenote: html-code The front-end function is very simple. It supports selection, drag-and-drop and direct ctrl+v pasting of images. The backend will automatically process the upload. If there is an error, an error will be reported in the console. After all the normal upload is successful, the link returned from the back end will be output on the page and a copy button will be provided.

Backend code:

if 'image' not in request.files:
            return 'No file uploaded!', 400
        file = request.files['image']
        if file.filename == '':
            return 'No file selected!', 400
        try:
            timestamp = datetime.datetime.now().strftime("%d%H%M%S%f")
            filename = timestamp + '.webp'
            now = datetime.datetime.now()
            folder_name = now.strftime("%Y/%m")
            folder_path = os.path.join('/home/wwwroot/img.learn2.cn/new_img/', folder_name)
            os.makedirs(folder_path, exist_ok=True)
            save_path = folder_path +"/"+ filename
            image = Image.open(file)
            image = image.convert('RGB')
            image.save(save_path, 'WEBP')
            return f'![tstrs.me_img](https://img.learn2.cn/new_img/{folder_name}/{filename})', 200
        except Exception as e:
            return str(e), 500

The working logic in the above code is as follows: check whether the file from request is an image file. If so, continue to the next step, generate a new file name based on the date to generate the folder in which it is stored. Then use PIL to convert the picture to WebP format, and finally return the link in markdown format to the front-end page for copying.

The above code is just an idea, not a script that can actually be run, and not everyone can use this customized plug-in. You can transplant the above code to your own program with a little modification.

# Postscript

Do-it-yourself can provide adequate food and clothing. Many ready-made tools are really good, but they are too bloated to use so many functions at all. By the way, most of the JS code in this is written by ChatGPT. I just modified the api part.

I have been so busy at work in the last two months that this blog is about to become a monthly shift. A lot of manuscripts have been accumulated and will be updated later.