生成海报（前端 | python）

james 发布于2019-07-31 10:35 / 2831人阅读

摘要：忙着忙着老大说要生成海报，有个活动要给每个用户来个分享图。虽然我实现了写个页面调用之前生成长截图的服务。使用这段时间以来就是感觉这个编码格式极其难受。网上查也不少前端技术处理我堂堂前端，怎么也得露一手吧。前端处理需要注意跨域空格等问题。

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

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

想法

PS 批处理？脚本？ 能甩出去的活都甩出去，机智如我啊

python 处理图像（PIL）。这么坑的想法，当然不是我想的了。虽然我实现了

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

我堂堂前端er，怎么能一直用别的工具呢？我的锤子呢？

ps处理

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

python

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

根据不同的类型输出数据

txt 使用字体，输出到对应位置

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

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 美滋滋。

html2canvas 这是一个库，既然已经有写好的了，我们就不费神了。（最难的一步。。。）

拿到 cavnas 调用 API， canvas.toBlob。

下载。这个就比较简单了，之前我写过前端培训-初级阶段-场景实战（2019-06-06）-下载文件&下载进度

微信公众号

各种忘记发。补上补上

结语

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

GPU云服务器云服务器前端代码生成前端js 生成二维码前端js验证码的生成 python 生成包

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/44061.html

生成海报（前端 | python）

摘要：忙着忙着老大说要生成海报，有个活动要给每个用户来个分享图。虽然我实现了写个页面调用之前生成长截图的服务。使用这段时间以来就是感觉这个编码格式极其难受。网上查也不少前端技术处理我堂堂前端，怎么也得露一手吧。前端处理需要注意跨域空格等问题。我最近没有摸鱼，一直都在工作。只不过目前需要爬一点数据 python 做的，之后看机会分享一下。忙着忙着老大说要生成海报，有个活动要给每个用户来个分...

nevermind 2019-08-23 18:11 评论0 收藏0
fastposter 2.4.0 全新发布低代码海报生成器

摘要：支持等多种语言。全新发布低代码海报生成器生成二维码 fastposter 2.4.0 全新发布低代码海报生成器fastposter低代码海报生成器，一分钟完成海报开发。支持Java、Python、PHP、 Go、JavaScript等多种语言。v2.4.0 全新发布电商级海报生成...

番茄西红柿 2021-11-25 09:43 评论0 收藏2637
Canvas绘图在微信小程序中的应用:生成个性化海报

摘要：解析进到首页其实关键字在本地就随机取完了，在首页中的方法中就通过缓存了要画的元素，比如关键字这里是图片关键字解析语也是图片毕竟微信小程序的不支持字体等等。一、Canvas应用的背景(个人理解)及基础语法背景从2012年开始，微信那个时候用户的积累的量已经非常大了，推出公众号，当然大屏智能手机在那个时候也流行，传统的大众媒体逐步消亡，像微信公众号这样的新媒体盛行。企业的广告投入开始...

vpants 2019-08-23 12:11 评论0 收藏0
H5海报制作实践

摘要：效果展示目前活动还是在线状态，这里是最后生成海报的效果，扫描二维码就可以进入页面。最后生成图片的时候使用，这个是隐藏的，用户不可见，这样还有一个优点，最终生成的海报大小是固定的，跟手机屏幕大小无关。方案看着很简单，实现的时候各种细节问题。引言年后一直处于秣马厉兵的状态，上周接到了一个紧急需求，为38妇女节做一个活动页，主要功能是生成海报，第一次做这种需求，我也是个半桶水前端，这里将...

苏丹 2019-08-26 13:32 评论0 收藏0