{"componentChunkName":"component---src-templates-best-practice-detail-tsx","path":"/best-practice/2020-05-04-image-compression","result":{"data":{"currentBlog":{"id":"60cdbe64-7a7b-5d2a-a46c-135944060867","frontmatter":{"thumbnail":"https://img.serverlesscloud.cn/2020511/1589207417692-ZalNtxgQAC_small.jpg","authors":["Anycodes"],"categories":["best-practice"],"date":"2020-05-04T00:00:00.000Z","title":"Serverless 实现图片压缩与水印","description":"图片和 Web 服务非常紧密，在 Serverless 架构下，是否有一种方法，可以对图像的压缩与水印实现「一条龙」服务，而且不会因为用户量比较多，而影响用户整体体验呢？","authorslink":["https://zhuanlan.zhihu.com/ServerlessGo"],"translators":null,"translatorslink":null,"tags":["Serverless","图片压缩"],"keywords":"Serverless 多环境配置,Serverless 管理环境,Serverless配置方案","outdated":true},"wordCount":{"words":179,"sentences":36,"paragraphs":36},"fileAbsolutePath":"/opt/build/repo/content/best-practice/2020-05-04-image-compression.md","fields":{"slug":"/best-practice/2020-05-04-image-compression/","keywords":["go","python","serverless","函数计算","云函数","image","width","水印","cos","height","图片","size","txtImage"]},"html":"

上传图片是很常见的用户需求，无论是做一个相册系统，还是发布文章中带有图片，都有上传图片的场景，可以说图片和 Web 服务是紧密相连的了。但是图片大小等属性又参差不齐的，而且图片在上传之后，还可能会被其他平台采集并且盗用。这个时候，就需要进行图像压缩、标准化以及添加水印等操作，这一套流程下来很占用计算资源。那么在 Serverless 架构下，是否可以对图像的压缩与水印实现「一条龙」服务，而且不会因为用户量比较多，而影响整体体验呢？

\n

一起试试！

\n

Serverless 与图像处理

\n

传统的图像处理，会比较占用资源，让服务器压力山大，影响用户体验：

\n

\n

我们尝试通过 Serverless 架构，实现一个异步处理流程 —— 用户直接上传图片到对象存储，将图片等资源进行持久化，然后通过对象存储相关的触发器，触发指定函数，函数进行图像压缩以及水印等相关处理，再次进行持久化。

\n

\n

以相册系统为例：用户上传图片之后，系统进行压缩以及水印并生成缩略图，存储到对象存储中。当用户浏览图片列表时，展示带有水印的缩略图，可以大大提升加载速度。水印还可以看作图像的一种版权保护，当用户点击图片查看原图时，可以为用户展示原始图片。这样既能保证原图的存在，也可以浏览列表加载速度，还具备初步的版权保护能力。

\n

一、图像压缩

\n

这里只用图像的大小作为压缩依据，除此之外还可以对图像的质量进行处理。

\n

单以尺寸进行压缩处理，可以看作是将一个 image 对象的宽度传入，通过 resize 方法进行大小调整，实现压缩功能。

\n\n \n 复制代码\n \n \n
def compressImage(image, width):\n    height = image.size[1] / (image.size[0] / width)\n    return image.resize((int(width), int(height)))
\n

二、图像水印

\n

这部分采用文字水印，当然也可以使用图片水印等。

\n

此处为了将水印放在图像的右下角，并且不超出图像范围，进行了每个字符大小的获取：

\n\n \n 复制代码\n \n \n
height = []\nwidth = []\nfor eveStr in watermarkStr:\n    thisWidth, thisHeight = drawImage.textsize(eveStr, font)\n    height.append(thisHeight)\n    width.append(thisWidth)
\n

通过这样处理之后，得到的 height 列表就是所有即将水印文字的高度，width 列表是所有即将水印文字的宽度。此处要将水印放在右下角只需要在图片整体高度上减去 height 列表最大值，图片整体宽度基础上减去 width 列表的总和即可：

\n\n \n 复制代码\n \n \n
def watermarImage(image, watermarkStr):\n    txtImage = Image.new('RGBA', image.size, (0, 0, 0, 0))\n    font = ImageFont.truetype(\"Brimborion.TTF\", 40)\n    drawImage = ImageDraw.Draw(txtImage)\n    height = []\n    width = []\n    for eveStr in watermarkStr:\n        thisWidth, thisHeight = drawImage.textsize(eveStr, font)\n        height.append(thisHeight)\n        width.append(thisWidth)\n    drawImage.text((txtImage.size[0] - sum(width) - 10, txtImage.size[1] - max(height) - 10),\n                   watermarkStr, font=font,\n                   fill=(255, 255, 255, 255))\n    return Image.alpha_composite(image, txtImage)
\n

三、部署到云函数 SCF 中

\n

通过函数的事件描述，可以确定腾讯云函数的对象存储触发器事件结果为：

\n\n \n 复制代码\n \n \n
{\n  \"Records\": [\n  {\n      \"cos\": {\n          \"cosSchemaVersion\": \"1.0\",\n          \"cosObject\": {\n              \"url\": \"http://testpic-1253970026.cos.ap-chengdu.myqcloud.com/testfile\",\n              \"meta\": {\n                  \"x-cos-request-id\": \"NWMxOWY4MGFfMjViMjU4NjRfMTUyMV8yNzhhZjM=\",\n                  \"Content-Type\": \"\"\n              },\n              \"vid\": \"\",\n              \"key\": \"/1253970026/testpic/testfile\",\n              \"size\": 1029\n          },\n          \"cosBucket\": {\n              \"region\": \"cd\",\n              \"name\": \"testpic\",\n              \"appid\": \"1253970026\"\n          },\n          \"cosNotificationId\": \"unkown\"\n      },\n      \"event\": {\n          \"eventName\": \"cos: ObjectCreated:Post\",\n          \"eventVersion\": \"1.0\",\n          \"eventTime\": 1545205770,\n          \"eventSource\": \"qcs::cos\",\n          \"requestParameters\": {\n              \"requestSourceIP\": \"192.168.15.101\",\n              \"requestHeaders\": {\n                  \"Authorization\": \"q-sign-algorithm=sha1&q-ak=AKIDQm6iUh2NJ6jL41tVUis9KpY5Rgv49zyC&q-sign-time=1545205709;1545215769&q-key-time=1545205709;1545215769&q-header-list=host;x-cos-storage-class&q-url-param-list=&q-signature=098ac7dfe9cf21116f946c4b4c29001c2b449b14\"\n              }\n          },\n          \"eventQueue\": \"qcs:0:lambda:cd:appid/1253970026:default.printevent.$LATEST\",\n          \"reservedInfo\": \"\",\n          \"reqid\": 179398952\n      }\n  }]\n}
\n

根据这个结构，我们可以确定出相关详细信息，例如存储桶、APPID，以及图片 Key 等信息。将上面的代码按照函数计算的格式进行改写：

\n\n \n 复制代码\n \n \n
# -*- coding: utf8 -*-\nimport os\nfrom PIL import Image, ImageFont, ImageDraw\nfrom qcloud_cos_v5 import CosConfig\nfrom qcloud_cos_v5 import CosS3Client\n\nsecret_id = os.environ.get('secret_id')\nsecret_key = os.environ.get('secret_key')\nregion = os.environ.get('region')\ncosClient = CosS3Client(CosConfig(Region=region, SecretId=secret_id, SecretKey=secret_key))\n\n\ndef compressImage(image, width):\n    height = image.size[1] / (image.size[0] / width)\n    return image.resize((int(width), int(height)))\n\n\ndef watermarImage(image, watermarkStr):\n    txtImage = Image.new('RGBA', image.size, (0, 0, 0, 0))\n    font = ImageFont.truetype(\"Brimborion.TTF\", 40)\n    drawImage = ImageDraw.Draw(txtImage)\n    height = []\n    width = []\n    for eveStr in watermarkStr:\n        thisWidth, thisHeight = drawImage.textsize(eveStr, font)\n        height.append(thisHeight)\n        width.append(thisWidth)\n    drawImage.text((txtImage.size[0] - sum(width) - 10, txtImage.size[1] - max(height) - 10),\n                   watermarkStr, font=font,\n                   fill=(255, 255, 255, 255))\n    return Image.alpha_composite(image, txtImage)\n\n\ndef main_handler(event, context):\n    for record in event['Records']:\n        bucket = record['cos']['cosBucket']['name'] + '-' + record['cos']['cosBucket']['appid']\n        key = \"/\".join(record['cos']['cosObject']['key'].split(\"/\")[3:])\n        download_path = '/tmp/{}'.format(key.split('/')[-1])\n        download_path = '/tmp/{}'.format(key.split('/')[-1])\n        upload_path = '/tmp/new_mp4-{}'.format(key.split('/')[-1])\n\n        # 下载图片\n        response = cosClient.get_object(Bucket=bucket, Key=key)\n        response['Body'].get_stream_to_file(download_path)\n\n        # 图片处理\n        image = Image.open(download_path)\n        image = compressImage(image, width=500)\n        image = watermarImage(image, \"Hello Serverless\")\n        image.save(upload_path)\n\n        # 上传图片\n        cosClient.put_object_from_local_file(\n            Bucket=bucket,\n            LocalFilePath=upload_path,\n            Key=\"/compress-watermark/\" + key.split('/')[-1]\n        )
\n

新建 serverless.yaml 文件：

\n\n \n 复制代码\n \n \n
MyPicture:\n  component: \"@serverless/tencent-scf\"\n  inputs:\n    name: MyPicture\n    codeUri: ./\n    handler: index.main_handler\n    runtime: Python3.6\n    region: ap-guangzhou\n    description: My Picture Compress And Watermark\n    memorySize: 128\n    timeout: 20\n    environment:\n      variables:\n        secret_id: 用户密钥id\n        secret_key: 用户密钥key\n        region: ap-guangzhou\n    events:\n      - cos:\n          name: picture-1256773370.cos.ap-guangzhou.myqcloud.com\n          parameters:\n            bucket: picture-1256773370.cos.ap-guangzhou.myqcloud.com\n            filter:\n              prefix: source/\n            events: cos:ObjectCreated:*\n            enable: true
\n

可以看到，这个函数有一个 cos 触发器，触发器是针对存储桶 picture-1256773370 下面 source/ 目录下的资源创建进行触发。

\n

四、简单测试

\n

通过 serverless 进行部署：

\n

\n

部署完成之后，我们在存储桶 picture-1256773370 中，新建 source/ 目录与 compress-watermark/ 目录。

\n

前者用来上传文件，后者用来生成新的文件。随机搜索一张图片：

\n

\n

可以看到这张图片 4.5M，还是蛮大的，将这个图片上传到 source/ 目录下：

\n

\n

稍等片刻，可以在 compress-watermark/ 目录下发现有一个新的文件生成：

\n

\n

将文件下载下来，查看详情：

\n

\n

可以看到，图片尺寸明显变小，从 4.5M 压缩到了 340K。同时，图像右下角出现了预设的水印标志。

\n

我们终于完成了通过 COS 触发器实现的图片压缩与水印功能。

\n

总结

\n

本示例实现了用户上传图像，通过 Serverless 架构对其进行压缩与增加水印的功能。

\n

在这个功能中，我们可以看到，通过 Serverless 架构可以解决很多传统生产中遇到的问题，并且可以以更少的资源对常见问题进行新策略的定制。以本文为例，当函数服务面临高并发时，传统情况下，很可能会由于图像压缩、水印的操作导致服务宕机，但是通过这样的策略，在高并发的场景，也仅仅是将图片传入对象存储。至于转换逻辑、压缩逻辑以及水印逻辑等都是由 Serverless 架构进行实现，可以说是既安全稳定，又节约成本和资源。

\n

除此之外，视频制作、深度学习下的标签处理等，也都可以异步完成，交给 Serverless 架构实现。

\n
\n
\n
\n
\n

传送门：

\n\n
\n

欢迎访问：Serverless 中文网，您可以在 最佳实践 里体验更多关于 Serverless 应用的开发！

","tableOfContents":""},"previousBlog":{"id":"d1450693-7418-5532-8bd4-4fe42f275bdf","frontmatter":{"thumbnail":"https://img.serverlesscloud.cn/2020512/1589274622959-J2kmfdLCPpX436WYvs0D.jpg","authors":["Anycodes"],"categories":["best-practice"],"date":"2020-05-05T00:00:00.000Z","title":"Serverless 与人工智能实现微信公众号的智能服务","description":"一般情况下，想给公众号增加更多的功能，需要我们在服务器上搭建后台服务。那么在 Serverless 架构下，能否更简单地实现相同的后台服务呢？","authorslink":["https://zhuanlan.zhihu.com/ServerlessGo"],"translators":null,"translatorslink":null,"tags":["Serverless","人工智能"],"keywords":"Serverless 多环境配置,Serverless 管理环境,Serverless配置方案","outdated":true},"wordCount":{"words":519,"sentences":119,"paragraphs":119},"fileAbsolutePath":"/opt/build/repo/content/best-practice/2020-05-05-ai-wechat.md","fields":{"slug":"/best-practice/2020-05-05-ai-wechat/","keywords":["python","serverless","函数计算","函数计算服务","event","json","media","time"]}},"nextBlog":{"id":"71466a42-3d49-5877-a603-88867ab2d9e2","frontmatter":{"thumbnail":"https://img.serverlesscloud.cn/2020511/1589207417703-ZalNtxgQAC_small.jpg","authors":["Anycodes"],"categories":["best-practice"],"date":"2020-05-03T00:00:00.000Z","title":"Serverless 实现视频压缩与格式转换","description":"在 Serverless 架构的应用案例中，有这样一个非常实在的应用：视频处理，我们应该如何实现它呢？","authorslink":["https://zhuanlan.zhihu.com/ServerlessGo"],"translators":null,"translatorslink":null,"tags":["Serverless","视频处理"],"keywords":"Serverless 多环境配置,Serverless 管理环境,Serverless配置方案","outdated":true},"wordCount":{"words":404,"sentences":48,"paragraphs":48},"fileAbsolutePath":"/opt/build/repo/content/best-practice/2020-05-03-video-compression.md","fields":{"slug":"/best-practice/2020-05-03-video-compression/","keywords":["go","python","serverless","函数计算","云函数","ffmpeg","视频","copy","output","Serverless"]}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"blogId":"60cdbe64-7a7b-5d2a-a46c-135944060867","previousBlogId":"d1450693-7418-5532-8bd4-4fe42f275bdf","nextBlogId":"71466a42-3d49-5877-a603-88867ab2d9e2"}}}