Ich habe versucht, mit Python viele Bilder wie das Favicon des Google-Kalenders zu generieren und in Vues Projekt zu integrieren
Dieser Artikel stammt von Kronos Co., Ltd. "~ Frühling 2020 ~ Ich werde es in meinem eigenen Adventskalender tun" Dies ist der Artikel am 19. Tag.
Einführung
Kennen Sie das Favicon von Google Kalender?
Dieses Bild wurde am 15. März aufgenommen, aber tatsächlich können sich die Nummern im Inneren je nach Zugriffsdatum ändern.
Also habe ich selbst ich habe zuvor eine kalenderähnliche App erstellt, also werde ich sie vorstellen.
Früher war es so.
Ja, dies ist die Standardeinstellung. Es ist mit ** Vue.js gemacht! !! !! !! Es fühlt sich an wie **. Der Reiz der Technologie ist wichtig, aber als App ist sie etwas unkühl, also werde ich sie beheben.
Wenn ich mir den Google-Kalender mit den Entwicklertools anschaue, scheinen alle Muster von Favicon von 1 bis 31 vorbereitet zu sein. Daher werde ich versuchen, alle Muster vorzubereiten und die Anzeige gemäß Google zu wechseln.
Bereiten Sie ein Bild vor
Benutztes Werkzeug
- Google Colaboratory
- Python 3.6.9 (Version in Colaboratory enthalten)
- PIL(Python Image Library) --ICOOON MONO (Symbol)
Bereiten Sie ein Basisbild vor
Dieses Mal werde ich ein Bild erzeugen, indem ich Zahlen auf das Kalendersymbol in ICOOON MONO überlagere. [Hier](https://icooon-mono.com/12567-%E3%82%AB%E3%83%AC%E3%83%B3%E3%83%80%E3%83%BC%E3%81 Verwenden Sie das Symbol% AE% E3% 83% 95% E3% 83% AA% E3% 83% BC% E3% 82% A2% E3% 82% A4% E3% 82% B3% E3% 83% B320 /) Ich durfte.
Die Größe ist 48x48 und die Farbe ist lila (RGB (121, 88, 214)) entsprechend dem Thema der App.
Öffnen Sie das Labor
Lass es so aussehen wie auf dem Bild unten.
Laden Sie zunächst das Basis-Image hoch. Diesmal habe ich es mit dem Namen base.png hochgeladen. Erstellen Sie als Nächstes einen Ordner zum Speichern des verarbeiteten Bildes. Diesmal habe ich einen Ordner namens aufgerufen.
Wenn Sie fertig sind, schreiben wir den Python-Code. Ich mache einige knifflige Dinge, um die Zahlen in die Mitte zu stellen.
Code zum Synthetisieren von Bildern
from PIL import Image
#verschiedene Einstellungen
IMAGE_WIDTH = 48
IMAGE_HEIGHT = 48
THEME_COLOR = (121, 88, 214)
#Erstellen Sie durch Schleifen von 1 bis 31
for i in range(1, 32):
#Nummer, die im Favicon angezeigt werden soll
i_str = str(i)
#Stellen Sie den Namen und die Größe der Schriftart ein
fnt = ImageFont.truetype('LiberationMono-BoldItalic', 25)
#Ermitteln Sie die Breite und Höhe der Zeichen, um zu berechnen, wo die Zahlen platziert werden sollen
w, h = fnt.getsize(i_str)
#Laden Sie das Basis-Image
im = Image.open('./base.png')
draw = ImageDraw.Draw(im)
#Synthetisieren Sie Text mit dem importierten Bild
draw.text(
#Wenn Sie so schreiben, können Sie es anscheinend in der Mitte platzieren (nur die Höhe ist fein eingestellt 3px)
xy=((IMAGE_WIDTH - w) / 2, (IMAGE_HEIGHT - h) / 2 + 3 ),
text=i_str,
fill=THEME_COLOR,
font=fnt
)
#sparen./out/favicon01.Der Dateiname ist wie png
im.save("./out/favicon{}.png ".format(i_str.zfill(2)))
Übrigens können Sie die Schriftart verwenden, indem Sie die gewünschte herunterladen und in Calaboratory hochladen. Sie können die integrierte Schriftart jedoch überprüfen, indem Sie den folgenden Code ausführen. Dieses Mal habe ich mich nur mit Zahlen befasst, also habe ich die eingebaute verwendet.
Code zum Überprüfen der Schriftart von Colaboratory
import subprocess
res = subprocess.check_output("fc-list")
print(str(res).replace(":", "\n"))
Wenn alles gut geht, sollte das folgende Bild im Ordner out generiert werden.
Laden Sie die Bilder in den Ordner out herunter.
Mit Colaboratory können Sie anscheinend nicht den gesamten Ordner herunterladen
Sie können es einfach herunterladen, indem Sie es mit dem folgenden Code komprimieren.
Packen Sie den Out-Ordner in eine Zip
import shutil
shutil.make_archive('./out', 'zip', root_dir='./out')
In Vue-Projekte einbinden
Platzieren Sie das generierte Bild im öffentlichen Ordner Ihres Vue-Projekts.
Ändern Sie index.html. Fügen Sie ein Skript hinzu, das das href-Attribut des Link-Tags neu schreibt, mit dem das Favicon festgelegt wird.
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<!--Zusätzlicher Teil-->
<script>
const faviconLink = document.querySelector("link[rel='icon']");
//0 Holen Sie sich das ausgefüllte Datum und favicon01.Ich generiere einen String wie png
faviconLink.href = `favicon${("0" + new Date().getDate()).slice(-2)}.png`
</script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
Es fühlt sich gut an. (Befriedigung)
Der Rest ist das Erstellen und Bereitstellen in der Produktionsumgebung. Herzliche Glückwünsche ...
Ich denke ...
Wenn ich am nächsten Tag (16.) darauf zugreife, hat sich das Symbol nicht von 15 geändert. Warum…! Dachte ich und als ich mir die transpiled index.html ansah
dist/index.html
<!DOCTYPE html><html lang=ja><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/favicon.ico><script>const faviconLink = document.querySelector("link[rel='icon']");
Dies → faviconLink.href = `favicon15.png`</script><link rel=stylesheet href=https://use.fontawesome.com/releases/v5.2.0/css/all.css><title>ad-calendar</title><link href=/css/app.9c57fa73.css rel=preload as=style><link href=/css/chunk-vendors.a4393e1d.css rel=preload as=style><link href=/js/app.ed32e83e.js rel=preload as=script><link href=/js/chunk-vendors.80e1df9b.js rel=preload as=script><link href=/css/chunk-vendors.a4393e1d.css rel=stylesheet><link href=/css/app.9c57fa73.css rel=stylesheet></head><body><noscript><strong>We're sorry but ad-calendar doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/js/chunk-vendors.80e1df9b.js></script><script src=/js/app.ed32e83e.js></script></body></html>
Es ist auf das Datum festgelegt, an dem der Build ausgeführt wurde. Wenn Sie die JavaScript-Vorlagennotation in index.html verwenden, scheint sie zur Laufzeit auf den Wert festgelegt zu sein.
Schließlich habe ich es wie folgt geändert und es hat wie erwartet funktioniert.
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<script>
const faviconLink = document.querySelector("link[rel='icon']");
//Geändert, um in einer Variablen zu speichern
const now = new Date();
const nowDate = ("0" + now.getDate()).slice(-2);
// +Kombinieren Sie Zeichenfolgen mit Operatoren
faviconLink.href = "<%= BASE_URL %>favicon" + nowDate + ".png ";
</script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
Diesmal fühlt es sich gut an. (Zufrieden)
Referenz
https://qiita.com/agajo/items/90a29627e7c9a06ec24a https://www.tech-tech.xyz/drawtext.html https://icooon-mono.com/license/ https://stackoverflow.com/questions/1970807/center-middle-align-text-with-pil
Recommended Posts