1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
|
<!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}}</style><header><nav class=main itemscope itemtype=http://schema.org/SiteNavigationElement role=toolbar><a href=/>Home</a>
<a href=/#posts>Posts</a>
<a href=/#notes>Notes</a>
<a href=/#sideprojects class=hob>Side Projects</a>
<a href=/vault.html>Vault</a>
<a href=https://github.com/mitjafelicijan target=_blank>Code</a>
<a href=/mitjafelicijan.pgp.pub.txt target=_blank class=hob>PGP</a>
<a href=/curriculum-vitae.html>CV</a>
<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
image server I needed to develop that resizes images on S3. I though this would
be 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
something written in C or Rust or even Golang would be the correct way to do
this but we didn't need the speed in our case) I found an excellent library
<a href=https://github.com/lovell/sharp>sharp - High performance Node.js image
processing</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>'sharp'</span>);
</span></span><span style=display:flex><span><span style=color:#00f>const</span> aws = require(<span style=color:#a31515>'aws-sdk'</span>);
</span></span><span style=display:flex><span>
</span></span><span style=display:flex><span><span style=color:#00f>const</span> x,y = 100;
</span></span><span style=display:flex><span><span style=color:#00f>const</span> s3 = <span style=color:#00f>new</span> aws.S3({});
</span></span><span style=display:flex><span>
</span></span><span style=display:flex><span>aws.config.update({
</span></span><span style=display:flex><span> secretAccessKey: <span style=color:#a31515>'secretAccessKey'</span>,
</span></span><span style=display:flex><span> accessKeyId: <span style=color:#a31515>'accessKeyId'</span>,
</span></span><span style=display:flex><span> region: <span style=color:#a31515>'region'</span>
</span></span><span style=display:flex><span>});
</span></span><span style=display:flex><span>
</span></span><span style=display:flex><span><span style=color:#00f>const</span> originalImage = <span style=color:#00f>await</span> s3.getObject({
</span></span><span style=display:flex><span> Bucket: <span style=color:#a31515>'some-bucket-name'</span>,
</span></span><span style=display:flex><span> Key: <span style=color:#a31515>'image.jpg'</span>,
</span></span><span style=display:flex><span>}).promise();
</span></span><span style=display:flex><span>
</span></span><span style=display:flex><span><span style=color:#00f>const</span> resizedImage = <span style=color:#00f>await</span> sharp(originalImage.Body)
</span></span><span style=display:flex><span> .resize(x, y)
</span></span><span style=display:flex><span> .jpeg({ progressive: <span style=color:#00f>true</span> })
</span></span><span style=display:flex><span> .toBuffer();
</span></span><span style=display:flex><span>
</span></span><span style=display:flex><span>s3.putObject({
</span></span><span style=display:flex><span> Bucket: <span style=color:#a31515>'some-bucket-name'</span>,
</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>,
</span></span><span style=display:flex><span> Body: resizedImage,
</span></span><span style=display:flex><span> ContentType: <span style=color:#a31515>'image/jpeg'</span>,
</span></span><span style=display:flex><span> ACL: <span style=color:#a31515>'public-read'</span>
</span></span><span style=display:flex><span>}).promise();
</span></span></code></pre><p>All this code was wrapped inside a web service with some additional security
checks 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
key is missing or x,y are not allowed by the server etc. I could have created
PNG in Gimp and just serve them but I wanted to respect aspect ratio and I
didn't want to return some mangled images.<blockquote><p>Main problem with finding a clean solution I could copy and paste and change a
bit was a task. API is changing constantly and there weren't clear examples or
I 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
used composition to combine both layers. Response returned by this function is a
buffer 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) => {
</span></span><span style=display:flex><span> <span style=color:#00f>const</span> overlay = <span style=color:#a31515>`<svg width="</span><span style=color:#a31515>${</span>width - 20<span style=color:#a31515>}</span><span style=color:#a31515>" height="</span><span style=color:#a31515>${</span>height - 20<span style=color:#a31515>}</span><span style=color:#a31515>">
</span></span></span><span style=display:flex><span><span style=color:#a31515> <text x="50%" y="50%" font-family="sans-serif" font-size="16" text-anchor="middle"></span><span style=color:#a31515>${</span>message<span style=color:#a31515>}</span><span style=color:#a31515></text>
</span></span></span><span style=display:flex><span><span style=color:#a31515> </svg>`</span>;
</span></span><span style=display:flex><span>
</span></span><span style=display:flex><span> <span style=color:#00f>return</span> <span style=color:#00f>await</span> sharp({
</span></span><span style=display:flex><span> create: {
</span></span><span style=display:flex><span> width: width,
</span></span><span style=display:flex><span> height: height,
</span></span><span style=display:flex><span> channels: 4,
</span></span><span style=display:flex><span> background: { r: 230, g: 230, b: 230, alpha: 1 }
</span></span><span style=display:flex><span> }
</span></span><span style=display:flex><span> })
</span></span><span style=display:flex><span> .composite([{
</span></span><span style=display:flex><span> input: Buffer.from(overlay),
</span></span><span style=display:flex><span> gravity: <span style=color:#a31515>'center'</span>,
</span></span><span style=display:flex><span> }])
</span></span><span style=display:flex><span> .jpeg()
</span></span><span style=display:flex><span> .toBuffer();
</span></span><span style=display:flex><span>}
</span></span></code></pre><p>That is about it. Nothing more to it. You can change the color of the image by
changing <code>background</code> and if you want to change text styling you can adapt SVG
to your needs.<blockquote><p>Also be careful about the length of the text. This function positions text at
the center and adds <code>20px</code> padding on all sides. If text is longer than the
image 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
a lock on a Linux NFS server, which turned
out to be specific to NFS v3 (which I really should have seen coming,
since it involved NLM and lockd). Finding the NFS v4 client that
owns 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
and Bradley Kuhn, are interacting on the OSI's license-discuss
list where the're doing
bad computer history and insisting that a guy Larry Rosen
coincidentally interviewed for a book years ago is clearly the origin of
somethin…<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:
i2c, plan9
Another month, another file system.
Well, if you can’t fix it in software, fix it in hardware (looking at
you, bme680, we’re not
done yet). The show must go on, as they say, and I would like my
experiments to go on.
So a “new” addition to the environmental sensor family connected to
the 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
this mortal coil, we are endowed with self-awareness, agency, and free will.
Each of the 8 billion members of this human race represents a unique person, a
unique 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.
My 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
1.0 has been released:
wifi_da-1.0.sit
(StuffIt 3 archive)
SHA256: ccfc9d27dd5da7412d10cef73b81119a1fec3848e4d1d88ff652a07ffdc6a69aSHA1: ff124972f202ceda6d7fa4788110a67ccda6a13a
This is the initial public release of my BlueSCSI Wi-Fi Desk Accessory for
classic 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.
In this article, I describe my goals, which hardware I picked for my new build (and why) and how I set it up.
Design Goals
I 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
at <a href=mailto:mitja.felicijan@gmail.com>mitja.felicijan@gmail.com</a> or
catch 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
specified otherwise. Blog is also available as <a href=/index.xml target=_blank>RSS feed</a>.</footer><script>
window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
</script><script defer src=/_vercel/insights/script.js></script>
|
