生成海报（前端 | python）

我最近没有摸鱼，一直都在工做。只不过目前须要爬一点数据 python 作的，以后看机会分享一下。

忙着忙着老大说要生成海报，有个活动要给每一个用户来个分享图。

想法

1. PS 批处理？脚本？ 能甩出去的活都甩出去，机智如我啊
2. python 处理图像（PIL）。这么坑的想法，固然不是我想的了。虽然我实现了
3. 写个页面调用以前生成长截图的服务。以前有个为了方便分享微信，作了生成长截图的服务。写个新的页面用一下便可。
4. 我堂堂前端er，怎么能一直用别的工具呢？个人锤子呢？

ps处理

这个方案，通过我调研行不通。(也有多是我菜)
对于批量打码，统一操做这类的还能够。
对于须要对应名字之类的比较无力

python

老大说 python。py 使用 PIL 库 写起来还蛮简单的。
py 使用这段时间以来就是感受这个编码格式极其难受。有没有大佬解救我一下。

根据不一样的类型输出数据

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 的服务。省时省力。网上查也很多

前端技术处理

我堂堂前端，怎么也得露一手吧。
基于上面的页面已经成功。咱们想一下咱们须要干什么？把 html 转成 canvas，而后 canvas.toBlob,而后 download 美滋滋。

1. html2canvas 这是一个库，既然已经有写好的了，咱们就不费神了。（最难的一步。。。）
2. 拿到 cavnas 调用 API， canvas.toBlob。
3. 下载。这个就比较简单了，以前我写过 前端培训-初级阶段-场景实战（2019-06-06）-下载文件&下载进度

微信公众号

各类忘记发。补上补上

结语

py 写代码是真的短。
前端处理须要注意跨域、URL空格等问题。