我最近沒有摸魚， 一直都在工作 。只不過目前需要爬一點數(shù)據(jù) python 做的，之后看機會分享一下。

忙著忙著老大說要生成海報，有個活動要給每個用戶來個分享圖。

想法

1. PS 批處理？腳本？ 能甩出去的活都甩出去 ，機智如我啊
2. python 處理圖像（PIL）。這么坑的想法，當然不是我想的了。 雖然我實現(xiàn)了
3. 寫個頁面調(diào)用之前生成長截圖的服務。之前有個為了方便分享微信，做了生成長截圖的服務。寫個新的頁面用一下即可。
4. 我堂堂前端er ，怎么能一直用別的工具呢？我的錘子呢？

ps處理

這個方案，經(jīng)過我調(diào)研 行不通 。(也有可能是我菜)
對于批量打碼，統(tǒng)一操作這類的還可以。
對于需要對應名字之類的比較無力

python

老大說 python 。 py 使用 PIL 庫 寫起來還蠻簡單的。
py 使用這段時間以來就是感覺這個 編碼格式極其難受 。有沒有大佬解救我一下。

根據(jù)不同的類型輸出數(shù)據(jù)

1. txt 使用字體，輸出到對應位置
2. image 圖片，覆蓋輸出到對應位置。 mask=img 要注意針對 png 來使用
3. qrcode 生成對應二維碼

通過上面的類型，來增加我們代碼的擴展性。

代碼

          
            # -*- coding: utf-8 -*-
from PIL import Image, ImageDraw, ImageFont
import qrcode
import time;
import re
def AddMoney(data):
  bg = Image.new('RGBA', (data['width'], data['height']))
  for item in data['list']:
    print(item)
    if item['type'] == 'qrcode':
      qr_pil_obj = qrcode.make(item['url'], border=0).resize((item['width'], item['height']), Image.ANTIALIAS)
      bg.paste(qr_pil_obj,(item['x'],item['y']))
    elif item['type'] == 'image':
      extname = re.search( r'(jpg|png|jpeg)$', item['url']).group()
      # 加載圖片
      img = Image.open(item['url'])
      # 縮放
      if (item['width']!= '' and item['height'] != ''):
        img.resize((item['width'], item['height']), Image.ANTIALIAS)

      if extname == 'png':
        bg.paste(img,(item['x'],item['y']), mask=img)
      else:
        bg.paste(img,(item['x'],item['y']))
    elif item['type'] == 'text':
      draw = ImageDraw.Draw(bg)
      ttfront = ImageFont.truetype(item['ttfrontUrl'],item['ttfrontSize'])
      draw.text((item['x'],item['y']),unicode(item['txt'],"UTF-8"), fill=(0,0,0), font=ttfront)
    else:
      print('------------------------------')
  bg.save(data['outputName'])

data = {
  'width': 750,
  'height': 1334,
  'outputName': './out-%s.png' % (str(time.time())),
  'list':[{"type":"image","url":"./avatar.jpg","x":10,"y":360,"width":750,"height":1334},{"type":"image","url":"./bg.png","x":0,"y":0,"width":750,"height":750},{"type":"qrcode","url":"https://www.lilnong.top","x":0,"y":0,"width":120,"height":120},{"type":"text","txt":"你這個死宅說話","x":140,"y":560,"ttfrontUrl":"./abc.ttf","ttfrontSize":55},{"type":"text","txt":"還挺搞笑的","x":160,"y":630,"ttfrontUrl":"./abc.ttf","ttfrontSize":55}]
}
AddMoney(data)
          
        

長截圖

這個也是極好，是之前一個 Node 的服務。省時省力。網(wǎng)上查也不少

前端技術處理

我堂堂前端，怎么也得露一手吧。
基于上面的頁面已經(jīng)成功。我們想一下我們需要干什么？把 html 轉(zhuǎn)成 canvas ，然后 canvas.toBlob ,然后 download 美滋滋。

1. html2canvas 這是一個庫，既然已經(jīng)有寫好的了，我們就不費神了。（最難的一步。。。）
2. 拿到 cavnas 調(diào)用 API ， canvas.toBlob 。
3. 下載。這個就比較簡單了，之前我寫過 前端培訓-初級階段-場景實戰(zhàn)（2019-06-06）-下載文件&下載進度

微信公眾號

各種忘記發(fā)。補上補上

結語

py 寫代碼是真的短。
前端處理需要注意 跨域 、 URL空格 等問題。