aboutsummaryrefslogtreecommitdiff
path: root/public/create-placeholder-images-with-sharp.html
diff options
context:
space:
mode:
authorMitja Felicijan <m@mitjafelicijan.com>2023-07-08 23:26:39 +0200
committerMitja Felicijan <m@mitjafelicijan.com>2023-07-08 23:26:39 +0200
commit58904b7d9b781c9a7eb18183392b3a565fdbcd51 (patch)
tree33e0033a77e4279044a61b00f3675e4822cc26a4 /public/create-placeholder-images-with-sharp.html
parentcd6644ea4ddc78597934ab0ef5ba50e3c3daa927 (diff)
downloadmitjafelicijan.com-58904b7d9b781c9a7eb18183392b3a565fdbcd51.tar.gz
Removed public folder
Diffstat (limited to 'public/create-placeholder-images-with-sharp.html')
-rwxr-xr-xpublic/create-placeholder-images-with-sharp.html78
1 files changed, 0 insertions, 78 deletions
diff --git a/public/create-placeholder-images-with-sharp.html b/public/create-placeholder-images-with-sharp.html
deleted file mode 100755
index 9a3db25..0000000
--- a/public/create-placeholder-images-with-sharp.html
+++ /dev/null
@@ -1,78 +0,0 @@
1<!doctype html><html lang=en-us><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><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."><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>body{padding:1rem;max-width:760px;background:#fff;font-family:times new roman,Times,serif;line-height:1.35rem}hr{margin-block-start:1.5rem}h1,h2,h3{line-height:initial}footer{margin-block-start:3rem}table{max-width:100%;border-collapse:separate;border-spacing:2px;border:1px solid #000;border-left:1px solid #999;border-top:1px solid #999}blockquote{font-style:italic}table thead{background:#eee}td,th{border:1px solid #000;padding:4px;border-right:1px solid #999;border-bottom:1px solid #999;text-align:left}pre{text-wrap:nowrap;overflow-x:auto;margin-block-start:1.5rem;margin-block-end:1.5rem;padding:.5rem 0;border-top:1px solid #000;border-bottom:1px solid #000}pre code{line-height:1.3em}pre,code,pre *,code *{font-family:monospace;font-size:initial!important}img,video,audio{max-width:100%}header{display:flex;flex-direction:row;gap:3rem}nav{display:flex;gap:.75rem}.pstatus-orange{background:gold}.pstatus-green{background:#9acd32}.pstatus-red{background:#cd5c5c}@media only screen and (max-width:600px){header{flex-direction:column;gap:1rem}a{word-wrap:break-word}}</style><header><nav class=main><a href=/>Home</a>
2<a href=https://git.mitjafelicijan.com/ target=_blank>Git</a>
3<a href=https://files.mitjafelicijan.com/ target=_blank>Files</a>
4<a href=/mitjafelicijan.pgp.pub.txt target=_blank>PGP</a>
5<a href=/curriculum-vitae.html>CV</a>
6<a href=/index.xml target=_blank>RSS</a></nav></header><main><div><h1>Create placeholder images with sharp Node.js image processing library</h1><p>Mar 27, 2020<div><p>I have been searching for a solution to pre-generate some placeholder images for
7image server I needed to develop that resizes images on S3. I though this would
8be 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
9something written in C or Rust or even Golang would be the correct way to do
10this but we didn't need the speed in our case) I found an excellent library
11<a href=https://github.com/lovell/sharp>sharp - High performance Node.js image
12processing</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>);
13</span></span><span style=display:flex><span><span style=color:#00f>const</span> aws = require(<span style=color:#a31515>&#39;aws-sdk&#39;</span>);
14</span></span><span style=display:flex><span>
15</span></span><span style=display:flex><span><span style=color:#00f>const</span> x,y = 100;
16</span></span><span style=display:flex><span><span style=color:#00f>const</span> s3 = <span style=color:#00f>new</span> aws.S3({});
17</span></span><span style=display:flex><span>
18</span></span><span style=display:flex><span>aws.config.update({
19</span></span><span style=display:flex><span> secretAccessKey: <span style=color:#a31515>&#39;secretAccessKey&#39;</span>,
20</span></span><span style=display:flex><span> accessKeyId: <span style=color:#a31515>&#39;accessKeyId&#39;</span>,
21</span></span><span style=display:flex><span> region: <span style=color:#a31515>&#39;region&#39;</span>
22</span></span><span style=display:flex><span>});
23</span></span><span style=display:flex><span>
24</span></span><span style=display:flex><span><span style=color:#00f>const</span> originalImage = <span style=color:#00f>await</span> s3.getObject({
25</span></span><span style=display:flex><span> Bucket: <span style=color:#a31515>&#39;some-bucket-name&#39;</span>,
26</span></span><span style=display:flex><span> Key: <span style=color:#a31515>&#39;image.jpg&#39;</span>,
27</span></span><span style=display:flex><span>}).promise();
28</span></span><span style=display:flex><span>
29</span></span><span style=display:flex><span><span style=color:#00f>const</span> resizedImage = <span style=color:#00f>await</span> sharp(originalImage.Body)
30</span></span><span style=display:flex><span> .resize(x, y)
31</span></span><span style=display:flex><span> .jpeg({ progressive: <span style=color:#00f>true</span> })
32</span></span><span style=display:flex><span> .toBuffer();
33</span></span><span style=display:flex><span>
34</span></span><span style=display:flex><span>s3.putObject({
35</span></span><span style=display:flex><span> Bucket: <span style=color:#a31515>&#39;some-bucket-name&#39;</span>,
36</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>,
37</span></span><span style=display:flex><span> Body: resizedImage,
38</span></span><span style=display:flex><span> ContentType: <span style=color:#a31515>&#39;image/jpeg&#39;</span>,
39</span></span><span style=display:flex><span> ACL: <span style=color:#a31515>&#39;public-read&#39;</span>
40</span></span><span style=display:flex><span>}).promise();
41</span></span></code></pre><p>All this code was wrapped inside a web service with some additional security
42checks 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
43key is missing or x,y are not allowed by the server etc. I could have created
44PNG in Gimp and just serve them but I wanted to respect aspect ratio and I
45didn't want to return some mangled images.<blockquote><p>Main problem with finding a clean solution I could copy and paste and change a
46bit was a task. API is changing constantly and there weren't clear examples or
47I 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
48used composition to combine both layers. Response returned by this function is a
49buffer 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; {
50</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;
51</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;
52</span></span></span><span style=display:flex><span><span style=color:#a31515> &lt;/svg&gt;`</span>;
53</span></span><span style=display:flex><span>
54</span></span><span style=display:flex><span> <span style=color:#00f>return</span> <span style=color:#00f>await</span> sharp({
55</span></span><span style=display:flex><span> create: {
56</span></span><span style=display:flex><span> width: width,
57</span></span><span style=display:flex><span> height: height,
58</span></span><span style=display:flex><span> channels: 4,
59</span></span><span style=display:flex><span> background: { r: 230, g: 230, b: 230, alpha: 1 }
60</span></span><span style=display:flex><span> }
61</span></span><span style=display:flex><span> })
62</span></span><span style=display:flex><span> .composite([{
63</span></span><span style=display:flex><span> input: Buffer.from(overlay),
64</span></span><span style=display:flex><span> gravity: <span style=color:#a31515>&#39;center&#39;</span>,
65</span></span><span style=display:flex><span> }])
66</span></span><span style=display:flex><span> .jpeg()
67</span></span><span style=display:flex><span> .toBuffer();
68</span></span><span style=display:flex><span>}
69</span></span></code></pre><p>That is about it. Nothing more to it. You can change the color of the image by
70changing <code>background</code> and if you want to change text styling you can adapt SVG
71to your needs.<blockquote><p>Also be careful about the length of the text. This function positions text at
72the center and adds <code>20px</code> padding on all sides. If text is longer than the
73image it will get cut.</blockquote></div></div></main><footer><hr><div><h3>Want to comment or have something to add?</h3>You can write me an email at
74<a href=mailto:m@mitjafelicijan.com>m@mitjafelicijan.com</a> or catch up
75with me
76<a href=https://telegram.me/mitjafelicijan target=_blank>on Telegram</a>.</div><hr><p>This website does not track you. Content is made available under
77the <a href=https://creativecommons.org/licenses/by/4.0/ target=_blank rel=noreferrer>CC BY 4.0 license</a> unless specified
78otherwise. Blog feed is available as <a href=/index.xml target=_blank>RSS feed</a>.</footer><script src=https://cdn.usefathom.com/script.js data-site=XHQARKXP defer></script> \ No newline at end of file
generated by cgit v1.2.3 (git 2.46.0) at 2026-04-30 23:19:52 +0000