生成海報（前端 | python）

nevermind 發布于2019-08-23 18:11 / 1289人閱讀

摘要：忙著忙著老大說要生成海報，有個活動要給每個用戶來個分享圖。雖然我實現了寫個頁面調用之前生成長截圖的服務。使用這段時間以來就是感覺這個編碼格式極其難受。網上查也不少前端技術處理我堂堂前端，怎么也得露一手吧。前端處理需要注意跨域空格等問題。

我最近沒有摸魚，一直都在工作。只不過目前需要爬一點數據 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 生成包

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104817.html

生成海報（前端 | python）

摘要：忙著忙著老大說要生成海報，有個活動要給每個用戶來個分享圖。雖然我實現了寫個頁面調用之前生成長截圖的服務。使用這段時間以來就是感覺這個編碼格式極其難受。網上查也不少前端技術處理我堂堂前端，怎么也得露一手吧。前端處理需要注意跨域空格等問題。我最近沒有摸魚，一直都在工作。只不過目前需要爬一點數據 python 做的，之后看機會分享一下。忙著忙著老大說要生成海報，有個活動要給每個用戶來個分...

james 2019-07-31 10:35 評論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