成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

生成海報(前端 | python)

nevermind / 1315人閱讀

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

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

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

想法

PS 批處理?腳本? 能甩出去的活都甩出去,機智如我啊

python 處理圖像(PIL)。這么坑的想法,當然不是我想的了。雖然我實現(xiàn)了

寫個頁面調(diào)用之前生成長截圖的服務(wù)。之前有個為了方便分享微信,做了生成長截圖的服務(wù)。寫個新的頁面用一下即可。

我堂堂前端er,怎么能一直用別的工具呢?我的錘子呢?

ps處理

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

python

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

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

txt 使用字體,輸出到對應(yīng)位置

image 圖片,覆蓋輸出到對應(yīng)位置。mask=img要注意針對 png 來使用

qrcode 生成對應(yīng)二維碼

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

代碼
# -*- 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ù)。省時省力。網(wǎng)上查也不少

前端技術(shù)處理

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

html2canvas 這是一個庫,既然已經(jīng)有寫好的了,我們就不費神了。(最難的一步。。。)

拿到 cavnas 調(diào)用 API, canvas.toBlob。

下載。這個就比較簡單了,之前我寫過 前端培訓(xùn)-初級階段-場景實戰(zhàn)(2019-06-06)-下載文件&下載進度

微信公眾號

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

結(jié)語

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

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/104817.html

相關(guān)文章

  • 生成海報前端 | python

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

    james 評論0 收藏0
  • fastposter 2.4.0 全新發(fā)布 低代碼海報生成

    摘要:支持等多種語言。全新發(fā)布低代碼海報生成器生成二維碼 fastposter 2.4.0 全新發(fā)布 低代碼海報生成器fastposter低代碼海報生成器,一分鐘完成海報開發(fā)。支持??Java??、??Python??、??PHP??、 ??Go??、??JavaScript??等多種語言。v2.4.0 全新發(fā)布 電商級海報生成...

    番茄西紅柿 評論0 收藏2637
  • Canvas繪圖在微信小程序中的應(yīng)用:生成個性化海報

    摘要:解析進到首頁其實關(guān)鍵字在本地就隨機取完了,在首頁中的方法中就通過緩存了要畫的元素,比如關(guān)鍵字這里是圖片關(guān)鍵字解析語也是圖片畢竟微信小程序的不支持字體等等。 一、Canvas應(yīng)用的背景(個人理解)及基礎(chǔ)語法 背景 從2012年開始,微信那個時候用戶的積累的量已經(jīng)非常大了,推出公眾號,當然大屏智能手機在那個時候也流行,傳統(tǒng)的大眾媒體逐步消亡,像微信公眾號這樣的新媒體盛行。企業(yè)的廣告投入開始...

    vpants 評論0 收藏0
  • H5海報制作實踐

    摘要:效果展示目前活動還是在線狀態(tài),這里是最后生成海報的效果,掃描二維碼就可以進入頁面。最后生成圖片的時候使用,這個是隱藏的,用戶不可見,這樣還有一個優(yōu)點,最終生成的海報大小是固定的,跟手機屏幕大小無關(guān)。方案看著很簡單,實現(xiàn)的時候各種細節(jié)問題。 引言 年后一直處于秣馬厲兵的狀態(tài),上周接到了一個緊急需求,為38婦女節(jié)做一個活動頁,主要功能是生成海報,第一次做這種需求,我也是個半桶水前端,這里將...

    蘇丹 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<