實戰：Serverless 實現圖片壓縮與水印

時間 2020-05-17

標籤實戰 serverless 實現圖片壓縮水印简体版

原文原文鏈接

在實際生產中，用戶上傳圖片是很是常見的行爲，不管是作一個相冊系統，仍是發佈文章中帶有圖片，能夠說圖片和Web服務是很是緊密的了。可是圖片所佔用的空間，以及圖片的大小等又都是不良莠不齊的，同時有些網站的圖片在上傳以後，可能被其餘平臺或者開發者採集而且盜用，這個時候，不少人的作法是在圖片上傳的時候，進行圖像壓縮、標準化以及添加水印，可是這一套流程每每又比較佔用資源，尤爲是大量大尺寸的圖片產生時。那麼在Serverless架構下，是否有一種方法，能夠對圖像的壓縮與水印實現"一條龍"服務，並且不會由於用戶量比較多，而影響用戶總體體驗呢？html

Serverless與圖像處理

在前言部分說到，傳統的圖像處理方法，會比較佔用資源，讓服務器壓力比較大，甚至會影響用戶體驗：python

那麼咱們是否能夠經過Serverless架構，實現一個異步處理流程？git

所謂的異步處理流程就是，用戶直接上傳圖片到對象存儲，直接將圖片等資源進行持久化，而後經過對象存儲相關的觸發器，觸發指定函數，函數進行圖像壓縮以及圖像水印等相關處理，再次進行持久化。github

以相冊系統爲例：用戶上傳圖片以後，系統進行壓縮以及水印並生成縮略圖，存儲到對象存儲中，當用戶瀏覽圖片列表時，展現帶有水印的縮略圖，能夠大大提高加載速度，水印能夠看做圖像的一種版權保護，當用戶點擊圖片查看原圖時，能夠爲用戶展現原始圖片。這樣既能保證原圖的存在，就能夠提升瀏覽列表等的速度，也具有初步的版權保護能力。express

圖像壓縮

圖像壓縮部分，在這裏只用圖像的大小做爲壓縮依據，除此以外還能夠對圖像的質量進行處理。json

單以尺寸進行壓縮處理，能夠看做是將一個image對象和寬度傳入，經過resize方法進行大小的調整，實現壓縮功能。瀏覽器

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

圖像水印

圖像水印部分採用的是文字水印，除了文字水印還能夠考慮使用圖片水印等。安全

此處爲了將水印放在圖像的右下角，而且剛好不超出圖像範圍，進行了每一個字符大小的獲取：服務器

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

經過這樣處理以後，獲得的height列表就是全部即將水印文字的高度，width列表是全部即將水印文字的寬度。此處要將水印放在右下角只須要在圖片總體高度上減去height列表最大值，圖片總體寬度基礎上減去width列表的總和便可：架構

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)

部署到雲函數

經過函數的事件描述，能夠肯定騰訊雲函數的對象存儲觸發器事件結果爲：

{
  "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": "1.0",
          "eventTime": 1545205770,
          "eventSource": "qcs::cos",
          "requestParameters": {
              "requestSourceIP": "192.168.15.101",
              "requestHeaders": {
                  "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"
              }
          },
          "eventQueue": "qcs:0:lambda:cd:appid/1253970026:default.printevent.$LATEST",
          "reservedInfo": "",
          "reqid": 179398952
      }
  }]
}

根據這個結構，咱們能夠肯定出相關詳細信息，例如存儲桶/APPID以及圖片的Key等。將上面的代碼按照函數計算的格式進行改寫：

# -*- coding: utf8 -*-
import os
from PIL import Image, ImageFont, ImageDraw
from qcloud_cos_v5 import CosConfig
from qcloud_cos_v5 import CosS3Client

secret_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])

        # 下載圖片
        response = cosClient.get_object(Bucket=bucket, Key=key)
        response['Body'].get_stream_to_file(download_path)

        # 圖片處理
        image = Image.open(download_path)
        image = compressImage(image, width=500)
        image = watermarImage(image, "Hello Serverless")
        image.save(upload_path)

        # 上傳圖片
        cosClient.put_object_from_local_file(
            Bucket=bucket,
            LocalFilePath=upload_path,
            Key="/compress-watermark/" + key.split('/')[-1]
        )

此時，新建serverless.yaml文件：

MyPicture:
  component: "@serverless/tencent-scf"
  inputs:
    name: MyPicture
    codeUri: ./
    handler: index.main_handler
    runtime: Python3.6
    region: ap-guangzhou
    description: My Picture Compress And Watermark
    memorySize: 128
    timeout: 20
    environment:
      variables:
        secret_id: 用戶密鑰id
        secret_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

能夠看到，這個函數有一個cos觸發器，觸發器是針對存儲桶picture-1256773370下面source/目錄下的資源建立進行觸發。

簡單測試

將項目經過經過serverless進行部署：

部署完成以後，咱們在存儲桶picture-1256773370中，新建source/目錄與compress-watermark/目錄。

前者用來上傳文件，後者用來生成新的文件。隨機搜索一張圖片：

能夠看到這張圖片4.5M，仍是蠻大的，將這個圖片上傳到source/目錄下：

稍等片刻，能夠在compress-watermark/目錄下發現有一個新的文件生成：

將文件下載下來，查看詳情：

能夠看到，圖片尺寸，明顯變小，而且從4.5M壓縮到了340K，與此同時圖像右下角出現了預設的水印標誌。

至此，咱們完成了經過COS觸發器實現的圖片壓縮與水印功能。

總結

本實驗成功實現了用戶上傳圖像，經過Serverless架構對其進行壓縮與增長水印的功能。在這個功能中，咱們能夠看到，經過Serverless架構能夠解決不少傳統生產中遇到的問題，而且能夠更節約資源，節約成本對常見的問題進行新策略的定製，以本文爲例，當咱們的服務面臨高併發的時候，傳統狀況下，極可能會因爲圖像壓縮，水印的操做致使咱們的服務掛掉，可是經過這樣一個策略，就算是高併發出現，也僅僅是將圖片傳入對象存儲，至於轉換的邏輯、壓縮的邏輯以及水印的邏輯等都是有Serverless架構幫咱們實現。對咱們而言能夠說是既安全穩定，又節約成本和資源。
做爲拋磚引玉的文章，本文僅僅以壓縮與水印爲例，除此以外，還能夠有圖像標準化、不一樣尺寸圖像製做、視頻壓縮、不一樣分辨率的視頻製做甚至是能夠經過深度學習對圖像進行打標籤等。這些的一切均可以異步完成，交給Serverless架構完成。