生成海报(前端|python)

简介: 我最近没有摸鱼,一直都在工作。只不过目前需要爬一点数据 python 做的,之后看机会分享一下。忙着忙着老大说要生成海报,有个活动要给每个用户来个分享图。

想法


  1. PS 批处理?脚本? 能甩出去的活都甩出去,机智如我啊


  1. python 处理图像(PIL)。这么坑的想法,当然不是我想的了。虽然我实现了


  1. 写个页面调用之前生成长截图的服务。之前有个为了方便分享微信,做了生成长截图的服务。写个新的页面用一下即可。


  1. 我堂堂前端er,怎么能一直用别的工具呢?我的锤子呢?


ps处理


这个方案,经过我调研行不通。(也有可能是我菜)

对于批量打码,统一操作这类的还可以。

对于需要对应名字之类的比较无力


python


老大说 python。py 使用 PIL 库 写起来还蛮简单的。

py 使用这段时间以来就是感觉这个编码格式极其难受。有没有大佬解救我一下。


根据不同的类型输出数据


  1. txt 使用字体,输出到对应位置


  1. image 图片,覆盖输出到对应位置。mask=img要注意针对 png 来使用


  1. 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 这是一个,既然已经有写好的了,我们就不费神了。(最难的一步。。。)


  1. 拿到 cavnas 调用 APIcanvas.toBlob


  1. 下载。这个就比较简单了,之前我写过 前端培训-初级阶段-场景实战(2019-06-06)-下载文件&下载进度
相关文章
|
3月前
|
前端开发 数据库 Python
使用 Python 的 Web 框架(如 Django 或 Flask)来建立后端接口,用于处理用户的请求,从数据库中查找答案并返回给前端界面
【1月更文挑战第13天】使用 Python 的 Web 框架(如 Django 或 Flask)来建立后端接口,用于处理用户的请求,从数据库中查找答案并返回给前端界面
78 7
|
5天前
|
JavaScript 前端开发 API
游戏开发入门:Python后端与Vue前端的协同工作方式
【4月更文挑战第11天】使用Python后端(Flask或Django)和Vue.js前端开发游戏变得流行,能提高开发效率和可维护性。本文指导如何构建这样的项目,包括设置环境、创建虚拟环境、搭建后端API及前端Vue组件,强调前后端协作和API接口的重要性。这种架构促进团队合作,提升代码质量和游戏体验。
|
4月前
|
前端开发 JavaScript 语音技术
|
5月前
|
前端开发 小程序 JavaScript
前端,Java,产品经理,微信小程序,Python等资源合集大放送
前端,Java,产品经理,微信小程序,Python等资源合集大放送
39 0
|
6月前
|
缓存 前端开发 JavaScript
【100天精通Python】Day47:Python网络编程_Web开发:web服务器,前端基础以及静态服务器
【100天精通Python】Day47:Python网络编程_Web开发:web服务器,前端基础以及静态服务器
79 0
|
9月前
|
数据采集 Dart 前端开发
【前端】从JavaScript到Python:我的技能扩展之路
【前端】从JavaScript到Python:我的技能扩展之路,简单介绍一下自己吧\~我是一名应届生,专业是铁路方面的,自己从小就喜欢捣鼓计算机这些,导致自己一步步的走上了“不归路”。
【前端】从JavaScript到Python:我的技能扩展之路
|
Web App开发 编解码 前端开发
石火电光追风逐日|前端优化之次时代图片压缩格式WebP的项目级躬身实践(Python3 PIL+Nginx)
我们知道,在前端界有一个共识:速度就是生命,带宽就是金钱。怎样将页面加载速度有效提升是无数前端工程师无时不刻在思考的课题,目前的网络环境中,除了视频,图片仍旧是占用流量较大的一部分,对于app端尤其如此,因此,如何在保证图片视觉不失真的前提下缩小图片体积,对于节省带宽和电池电量都十分重要,因此Google在十年前提出了一种新的图片压缩格式 :WebP,给图片的优化提供了新的方向。
石火电光追风逐日|前端优化之次时代图片压缩格式WebP的项目级躬身实践(Python3 PIL+Nginx)
|
存储 前端开发 JavaScript
使用python3.7+Vue.js2.0+Django2.0.4异步前端通过api上传文件到七牛云云端存储
之前一篇文章是通过普通js+tornado来上传七牛云:[使用Tornado配合七牛云存储api来异步切分上传文件](https://v3u.cn/a_id_123),本次使用vue+django来进行异步上传,因为毕竟vue.js才是目前的前端的主流。
使用python3.7+Vue.js2.0+Django2.0.4异步前端通过api上传文件到七牛云云端存储
|
算法 前端开发 小程序
Python | C++、Java、Linux、Go、前端、算法资料分享
Python | C++、Java、Linux、Go、前端、算法资料分享
Python | C++、Java、Linux、Go、前端、算法资料分享
|
前端开发
Python+selenium 自动化高级应用篇:借助pyautogui实现web前端带轨迹拖拽功能,解决ActionChains拖拽失效问题
Python+selenium 自动化高级应用篇:借助pyautogui实现web前端带轨迹拖拽功能,解决ActionChains拖拽失效问题
398 0
Python+selenium 自动化高级应用篇:借助pyautogui实现web前端带轨迹拖拽功能,解决ActionChains拖拽失效问题