aboutsummaryrefslogtreecommitdiff
path: root/public/create-placeholder-images-with-sharp.html
diff options
context:
space:
mode:
Diffstat (limited to 'public/create-placeholder-images-with-sharp.html')
-rwxr-xr-xpublic/create-placeholder-images-with-sharp.html111
1 files changed, 0 insertions, 111 deletions
diff --git a/public/create-placeholder-images-with-sharp.html b/public/create-placeholder-images-with-sharp.html
deleted file mode 100755
index b30ee51..0000000
--- a/public/create-placeholder-images-with-sharp.html
+++ /dev/null
@@ -1,111 +0,0 @@
1<!doctype html><html lang=en-us><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><meta name=generator content="JBMAFP - github.com/mitjafelicijan/jbmafp"><link href="data:image/x-icon;base64,AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAL69vf8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAv76+/8LBwQkAAAAAAAAAAAAAAAC+vb3/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAL+9vf/Bv78JAAAAAAAAAAAAAAAAu7q6/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC7ubr/vr29CAAAAAAAAAAAy8nJAZ6foP8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAnqGj/6GipAoAAAAAHLjU/xcXHf/BwsL/I8XY/yPK3v8XGiD/IbjL/yPF2f8XGiD/Fxkf/yLF2f8gnK3/Fxog/62ztv8fwNf/FRcd/x271v8mz93/GRsi/xkXHf8p097/GiIp/xobIv8p0t3/KdPe/xocIv8fYmr/KNPe/xoZH/8aHCL/J87c/xy81/8VFxz/IsPZ/8zS0/8XGiD/Ir/R/yPH2/8XGiD/Fxkf/yPH2/8dd4T/GBog/yPJ3f8jyNr/uru9/xcUGv8cudb/EhITDKi5vRKlvMP/RUpOERwcHRAdOj4QHTk8EBwdHRAdNTgQHTo/EBwcHRAcHB0QSGduEKW4vf+koqQfHzg+EBqz0ewSFRv7EyMr/xq51vsTERb7ExUb+xq41fsau9j7ExUb+xiPp/sZudb7ExUb+xMVG/sZuNX/GKvI/BIUGfMdvdn/IrfL/xcaIP8n1eb/J9Dh/xkcIf8ZGR7/J8/f/xxCSv8ZGyH/J9Dg/ybQ4P8ZHCL/FSQs/yPK3/8UExj/GE1b/ybS5P8ZGB7/Ghwj/ynW5P8p2Ob/Ghwi/yWrtv8p1eH/Ghwi/xocIv8p1uT/J8XT/xkcIv8m1un/Hb7d/xUYH/8hzOr/HtHu/xcaIf8XGB//I8vi/xgxOv8XGSD/I8rg/yPK4P8XGiD/GUFL/yPP6f8SERj/Fhkh/x3A4f8AAAAAJ2f9/ydr//8mZPH/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlYu38J2v//ydo/f8AAAAAAAAAAAd8/fkFqf//Iob8sAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMY39awWr//8FfP3/AAAAAAAAAAAFm/7/SfD//wR+/f8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOB/f9B7v//BaX+/wAAAAAAAAAAQ878SAyZ/v9n1v4KAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADu9v8DDJb+/z3N/XgAAAAA3/sAAN/7AADf+wAA3/sAAAAAAAAAAAAAAAAAAN/7AAAAAAAAAAAAAAAAAAAAAAAAj/EAAI/5AACP8QAA3/sAAA==" rel=icon type=image/x-icon><title>Create placeholder images with sharp Node.js image processing library</title><meta name=description content="I have been searching for a solution to pre-generate some placeholder images forimage server I needed to develop that resizes images on S3."><meta name=author content="Mitja Felicijan"><link rel=alternate type=application/rss+xml title="Mitja Felicijan's posts" href=https://mitjafelicijan.com/index.xml><link rel=alternate type=application/rss+xml title="Mitja Felicijan's notes" href=https://mitjafelicijan.com/notes.xml><style>:root{--border-color:gainsboro;--border-size:2px;--link-color:blue;--bg-color:#eee}*::selection{background:var(--link-color);color:#fff}*::-moz-selection{background:var(--link-color);color:#fff}*::-webkit-selection{background:var(--link-color);color:#fff}body{padding:2.5rem;max-width:1900px;background:#fff;font-family:sans-serif;line-height:1.35rem;font-size:16px}hr{border:0;border-bottom:var(--border-size)solid var(--border-color);margin-block-start:1.5rem}a{color:var(--link-color);text-decoration:none}h1,h2,h3{line-height:initial}h1{font-size:xx-large}footer{margin-block-start:2rem}cap{text-transform:capitalize}blockquote{font-style:italic}table{max-width:100%;border:var(--border-size)solid var(--border-color);border-collapse:separate;border-spacing:0}table thead tr th{border-bottom:var(--border-size)solid var(--border-color);text-align:left}table th,table td{padding:.5em .8em}ul.list li{padding:.2em 0}ul{line-height:1.35em}pre{text-wrap:nowrap;overflow-x:auto;padding:0 1em;border:var(--border-size)solid var(--border-color)}code{padding:0 3px;font-size:14px;border:0;background:var(--bg-color)}pre code{line-height:1.3em;background:#fff}pre,code,pre *,code *{font-family:monospace}figure{margin-inline-start:0;margin-inline-end:0}figcaption{width:800px;max-width:100%;text-align:center}figcaption p{margin:.3em 0 1.5em;font-style:italic}img,video,audio{width:800px;max-width:100%;border:var(--border-size)solid var(--border-color);padding:.5em}header nav{display:flex;gap:.9rem}article iframe{margin:0!important}audio::-webkit-media-controls-enclosure{border-radius:0}@media only screen and (max-width:600px){body{padding:.5em;word-wrap:break-word}header nav{gap:.7rem}header nav .hob{display:none}a{word-wrap:break-word}img,video,audio{padding:0}}</style><header><nav class=main itemscope itemtype=http://schema.org/SiteNavigationElement role=navigation aria-label="Main navigation"><a href=/>Home</a>
2<a href=/#posts>Posts</a>
3<a href=/#notes>Notes</a>
4<a href=/#sideprojects class=hob>Side Projects</a>
5<a href=/vault.html>Vault</a>
6<a href=https://github.com/mitjafelicijan target=_blank>Code</a>
7<a href=/mitjafelicijan.pgp.pub.txt target=_blank class=hob>PGP</a>
8<a href=/curriculum-vitae.html>CV</a>
9<a href=/index.xml target=_blank class=hob>RSS</a></nav></header><main role=main><article itemtype=http://schema.org/Article><h1 itemtype=headline>Create placeholder images with sharp Node.js image processing library</h1><p><cap>post</cap>, Mar 27, 2020 on <a href=https://mitjafelicijan.com>Mitja Felicijan's blog</a><div><p>I have been searching for a solution to pre-generate some placeholder images for
10image server I needed to develop that resizes images on S3. I though this would
11be a 15min job and quickly found out how very mistaken I was.<p>Even though Node.js is not really the best way to do this kind of things (surely
12something written in C or Rust or even Golang would be the correct way to do
13this but we didn't need the speed in our case) I found an excellent library
14<a href=https://github.com/lovell/sharp>sharp - High performance Node.js image
15processing</a>.<p>Getting things running was a breeze.<h2 id=fetch-image-from-s3-and-save-resized>Fetch image from S3 and save resized</h2><pre tabindex=0 style=background-color:#fff><code><span style=display:flex><span><span style=color:#00f>const</span> sharp = require(<span style=color:#a31515>&#39;sharp&#39;</span>);
16</span></span><span style=display:flex><span><span style=color:#00f>const</span> aws = require(<span style=color:#a31515>&#39;aws-sdk&#39;</span>);
17</span></span><span style=display:flex><span>
18</span></span><span style=display:flex><span><span style=color:#00f>const</span> x,y = 100;
19</span></span><span style=display:flex><span><span style=color:#00f>const</span> s3 = <span style=color:#00f>new</span> aws.S3({});
20</span></span><span style=display:flex><span>
21</span></span><span style=display:flex><span>aws.config.update({
22</span></span><span style=display:flex><span> secretAccessKey: <span style=color:#a31515>&#39;secretAccessKey&#39;</span>,
23</span></span><span style=display:flex><span> accessKeyId: <span style=color:#a31515>&#39;accessKeyId&#39;</span>,
24</span></span><span style=display:flex><span> region: <span style=color:#a31515>&#39;region&#39;</span>
25</span></span><span style=display:flex><span>});
26</span></span><span style=display:flex><span>
27</span></span><span style=display:flex><span><span style=color:#00f>const</span> originalImage = <span style=color:#00f>await</span> s3.getObject({
28</span></span><span style=display:flex><span> Bucket: <span style=color:#a31515>&#39;some-bucket-name&#39;</span>,
29</span></span><span style=display:flex><span> Key: <span style=color:#a31515>&#39;image.jpg&#39;</span>,
30</span></span><span style=display:flex><span>}).promise();
31</span></span><span style=display:flex><span>
32</span></span><span style=display:flex><span><span style=color:#00f>const</span> resizedImage = <span style=color:#00f>await</span> sharp(originalImage.Body)
33</span></span><span style=display:flex><span> .resize(x, y)
34</span></span><span style=display:flex><span> .jpeg({ progressive: <span style=color:#00f>true</span> })
35</span></span><span style=display:flex><span> .toBuffer();
36</span></span><span style=display:flex><span>
37</span></span><span style=display:flex><span>s3.putObject({
38</span></span><span style=display:flex><span> Bucket: <span style=color:#a31515>&#39;some-bucket-name&#39;</span>,
39</span></span><span style=display:flex><span> Key: <span style=color:#a31515>`optimized/</span><span style=color:#a31515>${</span>x<span style=color:#a31515>}</span><span style=color:#a31515>x</span><span style=color:#a31515>${</span>y<span style=color:#a31515>}</span><span style=color:#a31515>/image.jpg`</span>,
40</span></span><span style=display:flex><span> Body: resizedImage,
41</span></span><span style=display:flex><span> ContentType: <span style=color:#a31515>&#39;image/jpeg&#39;</span>,
42</span></span><span style=display:flex><span> ACL: <span style=color:#a31515>&#39;public-read&#39;</span>
43</span></span><span style=display:flex><span>}).promise();
44</span></span></code></pre><p>All this code was wrapped inside a web service with some additional security
45checks and defensive coding to detect if key is missing on S3.<p>And at that point I needed to return placeholder images as a response in case
46key is missing or x,y are not allowed by the server etc. I could have created
47PNG in Gimp and just serve them but I wanted to respect aspect ratio and I
48didn't want to return some mangled images.<blockquote><p>Main problem with finding a clean solution I could copy and paste and change a
49bit was a task. API is changing constantly and there weren't clear examples or
50I was unable to find them.</blockquote><h2 id=generating-placeholder-images-using-svg>Generating placeholder images using SVG</h2><p>What I ended up was using SVG to generate text and created image with sharp and
51used composition to combine both layers. Response returned by this function is a
52buffer you can use to either upload to S3 or save to local file.<pre tabindex=0 style=background-color:#fff><code><span style=display:flex><span><span style=color:#00f>const</span> generatePlaceholderImageWithText = <span style=color:#00f>async</span> (width, height, message) =&gt; {
53</span></span><span style=display:flex><span> <span style=color:#00f>const</span> overlay = <span style=color:#a31515>`&lt;svg width=&#34;</span><span style=color:#a31515>${</span>width - 20<span style=color:#a31515>}</span><span style=color:#a31515>&#34; height=&#34;</span><span style=color:#a31515>${</span>height - 20<span style=color:#a31515>}</span><span style=color:#a31515>&#34;&gt;
54</span></span></span><span style=display:flex><span><span style=color:#a31515> &lt;text x=&#34;50%&#34; y=&#34;50%&#34; font-family=&#34;sans-serif&#34; font-size=&#34;16&#34; text-anchor=&#34;middle&#34;&gt;</span><span style=color:#a31515>${</span>message<span style=color:#a31515>}</span><span style=color:#a31515>&lt;/text&gt;
55</span></span></span><span style=display:flex><span><span style=color:#a31515> &lt;/svg&gt;`</span>;
56</span></span><span style=display:flex><span>
57</span></span><span style=display:flex><span> <span style=color:#00f>return</span> <span style=color:#00f>await</span> sharp({
58</span></span><span style=display:flex><span> create: {
59</span></span><span style=display:flex><span> width: width,
60</span></span><span style=display:flex><span> height: height,
61</span></span><span style=display:flex><span> channels: 4,
62</span></span><span style=display:flex><span> background: { r: 230, g: 230, b: 230, alpha: 1 }
63</span></span><span style=display:flex><span> }
64</span></span><span style=display:flex><span> })
65</span></span><span style=display:flex><span> .composite([{
66</span></span><span style=display:flex><span> input: Buffer.from(overlay),
67</span></span><span style=display:flex><span> gravity: <span style=color:#a31515>&#39;center&#39;</span>,
68</span></span><span style=display:flex><span> }])
69</span></span><span style=display:flex><span> .jpeg()
70</span></span><span style=display:flex><span> .toBuffer();
71</span></span><span style=display:flex><span>}
72</span></span></code></pre><p>That is about it. Nothing more to it. You can change the color of the image by
73changing <code>background</code> and if you want to change text styling you can adapt SVG
74to your needs.<blockquote><p>Also be careful about the length of the text. This function positions text at
75the center and adds <code>20px</code> padding on all sides. If text is longer than the
76image it will get cut.</blockquote></div></article></main><section><hr><h2>Posts from blogs I follow around the net</h2><ul><li><a href=https://utcc.utoronto.ca/~cks/space/blog/linux/NFSv4ServerLockClients target=_blank rel=noopener>Finding which NFSv4 client owns a lock on a Linux NFS(v4) server</a> — <a href=https://utcc.utoronto.ca/~cks/space/blog/>Chris's Wiki :: blog</a><div>A while back I wrote an entry about finding which NFS client owns
77a lock on a Linux NFS server, which turned
78out to be specific to NFS v3 (which I really should have seen coming,
79since it involved NLM and lockd). Finding the NFS v4 client that
80owns a lock is, depending on your perspective, either simpl…<li><a href=http://www.landley.net/notes-2023.html#28-10-2023 target=_blank rel=noopener>October 28, 2023</a> — <a href=http://www.landley.net/notes-2023.html>Rob Landley's Blog Thing for 2023</a><div>Oh good grief, two of my least favorite licensing people, Larry Rosen
81and Bradley Kuhn, are interacting on the OSI's license-discuss
82list where the're doing
83bad computer history and insisting that a guy Larry Rosen
84coincidentally interviewed for a book years ago is clearly the origin of
85somethin…<li><a href="http://offbeatpursuit.com:80/blog/?id=25" target=_blank rel=noopener>A fix by any other name</a> — <a href=http://offbeatpursuit.com:80/blog/>WLOG - blog</a><div>tags:
86i2c, plan9
87Another month, another file system.
88Well, if you can’t fix it in software, fix it in hardware (looking at
89you, bme680, we’re not
90done yet). The show must go on, as they say, and I would like my
91experiments to go on.
92So a “new” addition to the environmental sensor family connected to
93the h…<li><a href=https://mirzapandzo.com/next-image-url-parameter-is-valid-but-upstream-response-is-invalid target=_blank rel=noopener>Next/Image "url" parameter is valid but upstream response is invalid</a> — <a href=https://mirzapandzo.com/>Mirza Pandzo's Blog</a><div>Getting "url" parameter is valid but upstream response is invalid error with Next/Image on WSL2<li><a href=https://drewdevault.com/2023/10/13/Going-off-script.html target=_blank rel=noopener>Going off-script</a> — <a href=https://drewdevault.com>Drew DeVault's blog</a><div>There is a phenomenon in society which I find quite bizarre. Upon our entry to
94this mortal coil, we are endowed with self-awareness, agency, and free will.
95Each of the 8 billion members of this human race represents a unique person, a
96unique worldview, and a unique agency. Yet, many of us have the sam…<li><a href=https://szymonkaliski.com/writing/2023-10-02-building-a-diy-pen-plotter/ target=_blank rel=noopener>Building a DIY Pen Plotter</a> — <a href=http://github.com/dylang/node-rss>Szymon Kaliski</a><div>This article documents my learnings from designing and building a DIY Pen Plotter during the summer of 2023.
97My ultimate goal is to build my…<li><a href=https://neil.computer/notes/chart-of-accounts-for-startups-and-saas-companies/ target=_blank rel=noopener>Chart of Accounts for Startups and SaaS Companies</a> — <a href=https://neil.computer/>Neil Panchal</a><div>Accounting is fundamental to starting a business. You need to have a basic understanding of accounting principles and essential bookkeeping. I had to learn it. There was no choice. For filing taxes, your CPA is going to ask you for an Income Statement (also known as P/L statement). If<li><a href=https://journal.valeriansaliou.name/deploy-a-nomad-cluster-on-alpine-linux-with-vultr/ target=_blank rel=noopener>Deploy a Nomad Cluster on Alpine Linux with Vultr</a> — <a href=https://journal.valeriansaliou.name/>Valerian Saliou</a><div>After spending countless hours trying to understand how to deploy my apps on Kubernetes for the first time to host Mirage, an AI API service that I run, I ended up making myself a promise that the next app I work on would be using a more productive & simpler<li><a href=https://jcs.org/2023/10/25/wifi_da target=_blank rel=noopener>BlueSCSI Wi-Fi Desk Accessory 1.0 Released</a> — <a href=https://jcs.org/>joshua stein</a><div>BlueSCSI Wi-Fi Desk Accessory
981.0 has been released:
99wifi_da-1.0.sit
100(StuffIt 3 archive)
101SHA256: ccfc9d27dd5da7412d10cef73b81119a1fec3848e4d1d88ff652a07ffdc6a69aSHA1: ff124972f202ceda6d7fa4788110a67ccda6a13a
102This is the initial public release of my BlueSCSI Wi-Fi Desk Accessory for
103classic MacOS.<li><a href=https://michael.stapelberg.ch/posts/2023-10-25-my-all-flash-zfs-network-storage-build/ target=_blank rel=noopener>My 2023 all-flash ZFS NAS (Network Storage) build</a> — <a href=https://michael.stapelberg.ch/>Michael Stapelbergs Website</a><div>For over 10 years now, I run two self-built NAS (Network Storage) devices which serve media (currently via Jellyfin) and run daily backups of all my PCs and servers.
104In this article, I describe my goals, which hardware I picked for my new build (and why) and how I set it up.
105Design Goals
106I use my netw…</ul><p>Generated with <a href=https://git.sr.ht/~sircmpwn/openring target=_blank rel=noopener>openring</a>.</section><footer><hr><p><big><strong>Want to comment or have something to add?</strong></big><p>You can write me an email
107at <a href=mailto:mitja.felicijan@gmail.com>mitja.felicijan@gmail.com</a> or
108catch up with me <a href=https://telegram.me/mitjafelicijan target=_blank>on Telegram</a>.<hr><p>This website does not track you. Content is made available under the <a href=https://creativecommons.org/licenses/by/4.0/ target=_blank rel=noreferrer>CC BY 4.0 license</a> unless
109specified otherwise. Blog is also available as <a href=/index.xml target=_blank>RSS feed</a>.</footer><script>
110 window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
111 </script><script defer src=/_vercel/insights/script.js></script> \ No newline at end of file
generated by cgit v1.2.3 (git 2.46.0) at 2026-05-01 01:22:07 +0000