Shulou(Shulou.com)06/01 Report--

In this issue, the editor will bring you about how to achieve image compression and watermarking in Serverless. The article is rich in content and analyzes and narrates it from a professional point of view. I hope you can get something after reading this article.

In actual production, users upload pictures is a very common behavior, whether it is to do a photo album system, or publish articles with pictures, it can be said that pictures and Web services are very close. However, the space occupied by the pictures and the size of the pictures are uneven. At the same time, the pictures of some websites may be collected and embezzled by other platforms or developers after uploading. At this time, the practice of many people is to compress, standardize and add watermarks when uploading pictures, but this process often takes up resources. Especially when a large number of large pictures are produced. So under the Serverless architecture, is there a way to achieve a "one-stop" service for image compression and watermarking, and will not affect the overall user experience because of the large number of users?

Serverless and Image processing

In the preface, it is mentioned that the traditional image processing methods will occupy more resources, put more pressure on the server, and even affect the user experience:

So can we implement an asynchronous processing process through the Serverless architecture?

The so-called asynchronous processing process is that users upload pictures directly to object storage, persist images and other resources directly, and then trigger specified functions through triggers related to object storage. the function carries on image compression and image watermarking and other related processing, and persists again.

Take the photo album system as an example: after the user uploads the picture, the system compresses the watermark and generates a thumbnail, which is stored in the object storage. When the user browses the picture list, the thumbnail with the watermark is displayed, which can greatly improve the loading speed. The watermark can be regarded as a kind of copyright protection of the image. When the user clicks on the picture to view the original image, it can show the original picture to the user. In this way, it can not only ensure the existence of the original image, but also improve the speed of browsing the list, and also have the preliminary ability of copyright protection.

Image compression

In the image compression part, only the size of the image is used as the compression basis, in addition, the quality of the image can also be processed.

Compression by size alone can be seen as passing in an image object and width, and adjusting the size through the resize method to achieve the compression function.

Def compressImage (image, width): height = image.size [1] / (image.size [0] / width) return image.resize ((int (width), int (height) Image watermarking

The image watermarking part uses the text watermark, in addition to the text watermark, we can also consider using the picture watermark and so on.

Here, in order to place the watermark in the lower right corner of the image, and just within the range of the image, the size of each character is obtained:

Height = [] width = [] for eveStr in watermarkStr: thisWidth, thisHeight = drawImage.textsize (eveStr, font) height.append (thisHeight) width.append (thisWidth)

After this processing, the resulting height list is the height of all the soon-to-be watermarked text, and the width list is the width of all the soon-to-be watermarked text. To place the watermark in the lower right corner, you only need to subtract the maximum value of the height list from the overall height of the image, and subtract the sum of the width list from the overall width of the image:

Def watermarImage (image, watermarkStr): txtImage = Image.new ('RGBA', image.size, (0,0,0,0)) font = ImageFont.truetype ("Brimborion.TTF", 40) drawImage = ImageDraw.Draw (txtImage) height = [] width = [] for eveStr in watermarkStr: thisWidth, thisHeight = drawImage.textsize (eveStr Font) height.append (thisHeight) width.append (thisWidth) drawImage.text ((txtImage.size [0]-sum (width)-10, txtImage.size [1]-max (height)-10), watermarkStr, font=font, fill= (255,255,255,255) return Image.alpha_composite (image, txtImage) are deployed to cloud functions

Through the event description of the function, you can determine that the result of the object storage trigger event of Tencent Cloud function is:

{"Records": [{"cos": {"cosSchemaVersion": "1.0"," cosObject ": {" url ":" http://testpic-1253970026.cos.ap-chengdu.myqcloud.com/testfile", "meta": {"x-cos-request-id": "NWMxOWY4MGFfMjViMjU4NjRfMTUyMV8yNzhhZjM=" "Content-Type": "}," vid ":", "key": "/ 1253970026/testpic/testfile", "size": 1029}, "cosBucket": {"region": "cd", "name": "testpic" "appid": "1253970026"}, "cosNotificationId": "unkown"}, "event": {"eventName": "cos: ObjectCreated:Post", "eventVersion": "1253970026", "eventTime": 1545205770, "eventSource": "qcs::cos" "requestParameters": {"requestSourceIP": "192.168.15.101", "requestHeaders": {"Authorization": "q-sign-algorithm=sha1&q-ak=AKIDQm6iUh3NJ6jL41tVUis9KpY5Rgv49zyC&q-sign-time=1545205709" 1545215769 "eventQueue": "qcs:0:lambda:cd:appid/1253970026:default.printevent.$LATEST", "reservedInfo": "reservedInfo": "," reqid ": 179398952}}

Based on this structure, we can determine the relevant details, such as bucket / APPID and the Key of the image. Rewrite the above code in the format calculated by the function:

#-*-coding: utf8-*-import osfrom PIL import Image, ImageFont, ImageDrawfrom qcloud_cos_v5 import CosConfigfrom qcloud_cos_v5 import CosS3Clientsecret_id = os.environ.get ('secret_id') secret_key = os.environ.get (' secret_key') region = os.environ.get ('region') cosClient = CosS3Client (CosConfig (Region=region, SecretId=secret_id, SecretKey=secret_key) def compressImage (image) Width): height = image.size [1] / (image.size [0] / width) return image.resize ((int (width), int (height)) def watermarImage (image, watermarkStr): txtImage = Image.new ('RGBA', image.size, (0,0,0,0) font = ImageFont.truetype ("Brimborion.TTF", 40) drawImage = ImageDraw.Draw (txtImage) height = [] width = [] for eveStr in watermarkStr: thisWidth ThisHeight = drawImage.textsize (eveStr, font) height.append (thisHeight) width.append (thisWidth) drawImage.text ((txtImage.size [0]-sum (width)-10, txtImage.size [1]-max (height)-10), watermarkStr, font=font, fill= (255,255,255,255) return Image.alpha_composite (image, txtImage) def main_handler (event Context): for record in event ['Records']: bucket = record [' cos'] ['cosBucket'] [' name'] +'-'+ record ['cos'] [' cosBucket'] ['appid'] key = "/" .join (record [' cos'] ['cosObject'] [' key'] .split ("/") [3:]) download_path ='/ tmp/ {} '.format (key.split ( '/') [- 1]) download_path ='/ tmp/ {} '.format (key.split (' /') [- 1]) upload_path ='/ tmp/new_mp4- {} '.format (key.split (' /') [- 1]) # download picture response = cosClient.get_object (Bucket=bucket Key=key) response ['Body']. Get_stream_to_file (download_path) # Image processing image = Image.open (download_path) image = compressImage (image, width=500) image = watermarImage (image, "Hello Serverless") image.save (upload_path) # upload picture cosClient.put_object_from_local_file (Bucket=bucket LocalFilePath=upload_path, Key= "/ compress-watermark/" + key.split ('/') [- 1])

At this point, create a new serverless.yaml file:

MyPicture: component: "@ serverless/tencent-scf" inputs: name: MyPicture codeUri:. / handler: index.main_handler runtime: Python3.6 region: ap-guangzhou description: MyPicture Compress And Watermark memorySize: 128 timeout: 20 environment: variables: secret_id: user key id secret_key: user key key region: ap-guangzhou events:-cos: Name: picture-1256773370.cos.ap-guangzhou.myqcloud.com parameters: bucket: picture-1256773370.cos.ap-guangzhou.myqcloud.com filter: prefix: source/ events: cos:ObjectCreated:* enable: true

As you can see, this function has a cos trigger that triggers for resource creation in the source/ directory under bucket picture-1256773370.

Simple test

Deploy the project through serverless:

After the deployment is complete, we create a new source/ directory and a compress-watermark/ directory in the bucket picture-1256773370.

The former is used to upload files, and the latter is used to generate new files. Randomly search for a picture:

You can see that this picture is 4.5m, which is quite large. Upload this picture to the source/ directory:

Wait a moment, and you can find a new file generated in the compress-watermark/ directory:

Download the file and view the details:

As you can see, the size of the image is significantly smaller and compressed from 4.5m to 340K, while a preset watermark appears in the lower right corner of the image.

So far, we have completed the image compression and watermarking function through COS trigger.

In this experiment, we successfully realize the function of uploading images, compressing them and adding watermarks through Serverless architecture. In this function, we can see that many problems encountered in traditional production can be solved through Serverless architecture, and it can save resources and costs to customize new strategies for common problems. When our services are faced with high concurrency, traditionally, our services will probably die due to image compression and watermark operations, but through such a strategy, even if high concurrency occurs It is only to transfer the picture to the object storage, as for the logic of conversion, compression and watermark, there are Serverless architecture to help us realize it. For us, it can be said to be not only safe and stable, but also save costs and resources. As a valuable article, only take compression and watermarking as an example, in addition, there can also be image standardization, image production of different sizes, video compression, video production of different resolutions, and even tagging images through deep learning. All of this can be done asynchronously and handed over to the Serverless architecture.

This is how to achieve image compression and watermarking in Serverless shared by Xiaobian. If you happen to have similar doubts, you might as well refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.