<turbo-stream action="append" target="posts_list"><template>    <div class="postbit" id="265971" data-post-id="265971">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="kip" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/kip/120/1440_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  kip
                    <span class="op-star" title="Thread Starter">
                      <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                    </span>
                  </h3>
		          </div>
						
			          <div class="user-title">
									<span>ex_cldr Core Team</span>
			          </div>
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I appreciate the suggestions, they are very welcome. Some may be possible.</p>
<blockquote>
<ol>
<li>Color palette detection, for theming purposes. (Like say a page displays an image, it can color itself based on the palette of the image, or it can be used for showing a dominant color, before the image loads.)</li>
</ol>
</blockquote>
<p>I’ve got another lib called <code>Color</code> in development that implements color science and John Cullpit, the author of libvips, has agreed to put k-means of an image in the next release which is very helpful for palette optimisation.</p>
<blockquote>
<ol start="2">
<li>Color grading images based on LUT provided. (For consistent look and feel of the site)</li>
</ol>
</blockquote>
<p>Color grading I also want to do since photography is a passion of mine and managing color is very helpful. May be possible, there are some LUT capabilities in libvips and vision. Also complementary, analogous, split complementary, triadic color calculation.</p>
<blockquote>
<ol start="3">
<li>Configurable QR code. (Like <a href="https://www.qrcode-monkey.com" rel="nofollow">QR code monkey</a>)</li>
</ol>
</blockquote>
<p>Nothing special in libvips for that but I’ll take a look. Lower priority in my mind.</p>
<blockquote>
<ol start="4">
<li>Rendering a HEEX template, a webpage or a section of a webpage, or svg into an image</li>
</ol>
</blockquote>
<p>Not available directly in libvips. It renders SVG into images really well using <code>librsvg</code> but not html.</p>
<blockquote>
<ol start="5">
<li>Video to gif or something better.</li>
</ol>
</blockquote>
<p>I’m more likely to do gif to video since that the more common trend I’m seeing?</p>
<blockquote>
<ol start="6">
<li>Some default / custom placeholder image in case of error.</li>
</ol>
</blockquote>
<p>Yes, that makes sense. Will think about what that might look like.</p>
<blockquote>
<ol start="7">
<li>Documentation</li>
</ol>
</blockquote>
<p>Absolutely - I will work on tutorial and user guide style docs using Livebook as the platform as a priority before version 1.0.  It all takes a lot of time …</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="265971" data-batch-url="/posts/batch_likers">
                        3
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/image-an-image-processing-library-based-upon-vix/47568/42">Post #41</a>
	                </div>
	            </div>
              <div id="likers-container-265971" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="265971"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #41"></div>
  </section>
</div>
    <div class="postbit" id="265980" data-post-id="265980">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="greven" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/greven/120/25004_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  greven
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Amazing work on this lib kip, can see this becoming the defacto lib for Elixir regarding common Image tasks.<br>
The idea is not to wrap OpenCV (eVision) completely right, just the most common image tasks with higher level abstractions on top, I guess?</p>
<p>Regarding the suggestion of <a href="https://forum.elixirforum.com/u/derpycoder" rel="nofollow">derpycoder</a>, I have been actually thinking in building and OG Image generator (that would plug into… plug / Phoenix) inspired by recent release of NextJS OG Image: <a href="https://vercel.com/blog/introducing-vercel-og-image-generation-fast-dynamic-social-card-images" class="inline-onebox" rel="noopener nofollow ugc">Introducing OG Image Generation: Fast, dynamic social card images at the Edge - Vercel</a>.</p>
<p>I guess this makes more sense as a separate library, I think? The idea is to leverage <code>librsvg</code> as well.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="265980" data-batch-url="/posts/batch_likers">
                        1
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/image-an-image-processing-library-based-upon-vix/47568/43">Post #42</a>
	                </div>
	            </div>
              <div id="likers-container-265980" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="265980"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #42"></div>
  </section>
</div>
    <div class="postbit" id="265983" data-post-id="265983">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="kip" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/kip/120/1440_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  kip
                    <span class="op-star" title="Thread Starter">
                      <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                    </span>
                  </h3>
		          </div>
						
			          <div class="user-title">
									<span>ex_cldr Core Team</span>
			          </div>
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Yes, you are right. Both <code>Vix</code> and <code>eVision</code> are great libraries and there’s little value in just wrapping them.  But there is value, I think, providing more idiomatic interfaces to common higher level image processing functions.</p>
<p>I also hope that this work demonstrates that image processing on Elixir is definitely possible - and not just possible, really can be a joy leveraging everything Elixir brings to the table as well as the power of the underlying libs.</p>
<p>One of the unifying reasons why <code>Image</code> builds on top of both Vix and eVision is the ability for both libraries to reuse binary image data without copying it. That makes interoperation really performant.  For example, for QR code generation the matrix is generated in eVision but resized using Vix. But no data is copied.  Similar for the Nx integration.</p>
<p>It probably doesn’t make sense to wrap any other libraries if they don’t also have a compatible in-memory model. However given the explosion of imaging capabilities I would like to find a way to keep the imaging eco-system as easy to adopt at the higher level as possible without losing the ability to go as low as you want.</p>
<p>As for OG Image generation, if the rendering can be accomplished by <code>librsvg</code> then <code>Vix</code> and/or <code>Image</code> might be a fast way to get started.  I didn’t look closely enough but it did look somewhat SVG-centric. I just haven’t explored if <code>librsvg</code> supported HTML embedded SVG. And I don’t think it will support tailwind classes out of the box (I see the Vercel lib uses the same class names but with a different attribute name?).</p>
<p>Overall, just happy to see an emerging vibrant community of people interested in image processing and some amazing tooling being build, especially by <a class="mention" href="/u/akash-akya" rel="nofollow">@akash-akya</a> and <a class="mention" href="/u/cocoa" rel="nofollow">@cocoa</a>.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="265983" data-batch-url="/posts/batch_likers">
                        2
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/image-an-image-processing-library-based-upon-vix/47568/44">Post #43</a>
	                </div>
	            </div>
              <div id="likers-container-265983" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="265983"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #43"></div>
  </section>
</div>
    <div class="postbit" id="266018" data-post-id="266018">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="derpycoder" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/derpycoder/120/31388_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  derpycoder
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I wanted to tell you about blurhash, for placeholder purposes, which I forgot to link in my previous comment!!</p>
<p>They have a funny description too:</p>
<hr>
<p>Does your designer cry every time you load their beautifully designed screen, and it is full of empty boxes because all the images have not loaded yet? Does your database engineer cry when you want to solve this by trying to cram little thumbnail images into your data to show as placeholders?</p>
<hr>
<p>BlurHash generates incredibly small previews using Base83 encoding. Base83 encoding allows it to squeeze more information into fewer bytes, which is part of how it keeps the previews so small.</p>
<pre data-code-wrap="json"><code class="lang-json">{
  "blurhash" : "UAA]{ox^0eRiO_bJjdn~9#M_=|oLIUnzxtNG",
  "w" : 276,
  "h" : 400
}
</code></pre>
<p>Which means in front end JavaScript is needed for preview!</p>
<aside class="onebox allowlistedgeneric" data-onebox-src="https://blurha.sh/">
  <header class="source">

      <a href="https://blurha.sh/" target="_blank" rel="noopener nofollow ugc">blurha.sh</a>
  </header>

  <article class="onebox-body">
    <div class="aspect-image" style="--aspect-ratio:690/717;"><img src="https://blurha.sh/0dbfa49e7af8ca42f464.png" class="thumbnail" alt="" width="690" height="717"></div>

<h3><a href="https://blurha.sh/" target="_blank" rel="noopener nofollow ugc">BlurHash</a></h3>

  <p>BlurHash is a compact representation of a placeholder for an image.</p>


  </article>

  <div class="onebox-metadata">
    
    
  </div>

  <div style="clear: both"></div>
</aside>

<p><a href="https://github.com/woltapp/blurhash" class="onebox" target="_blank" rel="noopener nofollow ugc">https://github.com/woltapp/blurhash</a></p>
<hr>
<p>An alternative to generate blurry placeholder, that doesn’t need JavaScript on front end is SQIP, which is based on SVG:</p>
<hr>
<p>A great side-effect of using SVG as the basis for image previews is that SVG is a plaintext asset and therefore benefits from compression by gzip, <a href="https://github.com/google/zopfli" rel="noopener nofollow ugc">zopfli</a> and <a href="https://github.com/google/brotli" rel="noopener nofollow ugc">brotli</a>. Using these compression techniques cuts SQIP size down by half, reaching the minimum viable raster LQIP size of ~400-600 bytes while providing a superior user experience.</p>
<hr>
<aside class="onebox allowlistedgeneric" data-onebox-src="https://calendar.perfplanet.com/2017/sqip-vague-vectors-for-performant-previews/">
  <header class="source">
      <img src="https://calendar.perfplanet.com/wp-content/themes/wpc2/wpclogo.png" class="site-icon" alt="" width="690" height="690">

      <a href="https://calendar.perfplanet.com/2017/sqip-vague-vectors-for-performant-previews/" target="_blank" rel="noopener nofollow ugc">Web Performance Calendar</a>
  </header>

  <article class="onebox-body">
    <img width="690" height="690" src="https://calendar.perfplanet.com/wp-content/uploads/2017/12/placeholder-overview.jpg" class="thumbnail onebox-avatar" alt="">

<h3><a href="https://calendar.perfplanet.com/2017/sqip-vague-vectors-for-performant-previews/" target="_blank" rel="noopener nofollow ugc">SQIP - Vague Vectors for Performant Previews</a></h3>

  <p>tl;dr:Image placeholders in SVG are ready for prime time thanks to browser support and good rendering performance. By automating SVG shape creation that mimics main features visible inside an image and compressing the result appropriately, we can...</p>


  </article>

  <div class="onebox-metadata">
    
    
  </div>

  <div style="clear: both"></div>
</aside>

<p><a href="https://github.com/axe312ger/sqip" class="onebox" target="_blank" rel="noopener nofollow ugc">https://github.com/axe312ger/sqip</a></p>
<p></p><div class="lightbox-wrapper"><a class="lightbox" href="https://forum.elixirforum.com/uploads/default/original/3X/b/1/b19bc8a941ff191a6b9e6594894cdf044067f371.jpeg" data-download-href="https://forum.elixirforum.com/uploads/default/b19bc8a941ff191a6b9e6594894cdf044067f371" title="image" rel="nofollow"><img src="https://forum.elixirforum.com/uploads/default/optimized/3X/b/1/b19bc8a941ff191a6b9e6594894cdf044067f371_2_615x1200.jpeg" alt="image" data-base62-sha1="plchd3RJHCaGxhjGp6aYS7UN07D" width="615" height="1200" srcset="https://forum.elixirforum.com/uploads/default/optimized/3X/b/1/b19bc8a941ff191a6b9e6594894cdf044067f371_2_615x1200.jpeg, https://forum.elixirforum.com/uploads/default/optimized/3X/b/1/b19bc8a941ff191a6b9e6594894cdf044067f371_2_922x1800.jpeg 1.5x, https://forum.elixirforum.com/uploads/default/original/3X/b/1/b19bc8a941ff191a6b9e6594894cdf044067f371.jpeg 2x" data-dominant-color="938A86"><div class="meta"><svg class="fa d-icon d-icon-far-image svg-icon" aria-hidden="true"><use href="#far-image"></use></svg><span class="filename">image</span><span class="informations">1200×2340 216 KB</span><svg class="fa d-icon d-icon-discourse-expand svg-icon" aria-hidden="true"><use href="#discourse-expand"></use></svg></div></a></div><p></p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="266018" data-batch-url="/posts/batch_likers">
                        1
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/image-an-image-processing-library-based-upon-vix/47568/45">Post #44</a>
	                </div>
	            </div>
              <div id="likers-container-266018" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="266018"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #44"></div>
  </section>
</div>
    <div class="postbit" id="266026" data-post-id="266026">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="hauleth" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/hauleth/120/18942_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  hauleth
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I already done such thing in the past, but I was using ImageMagick via shell. With <code>Image</code> that would be much easier nowadays.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="266026" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/image-an-image-processing-library-based-upon-vix/47568/46">Post #45</a>
	                </div>
	            </div>
              <div id="likers-container-266026" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="266026"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #45"></div>
  </section>
</div>
    <div class="postbit" id="266032" data-post-id="266032">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="kip" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/kip/120/1440_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  kip
                    <span class="op-star" title="Thread Starter">
                      <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                    </span>
                  </h3>
		          </div>
						
			          <div class="user-title">
									<span>ex_cldr Core Team</span>
			          </div>
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Thats very interesting, thanks for posting. I especially like that the original <a href="https://github.com/fogleman/primitive" rel="nofollow">primitive</a> is based upon <code>libvips</code> so I think there’s a probably a reasonable path forward. And I like the idea of SVG-based placeholders since they inline well and compress well.</p>
<p>Also, it’s just a really interesting algorithm and artistic outputs.</p>
<p>Hmmm, looks like there’s another rabbit hole I’m diving down … <img src="https://forum.elixirforum.com/images/emoji/apple/slight_smile.png?v=15" title=":slight_smile:" class="emoji" alt=":slight_smile:" loading="lazy" width="20" height="20"></p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="266032" data-batch-url="/posts/batch_likers">
                        4
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/image-an-image-processing-library-based-upon-vix/47568/47">Post #46</a>
	                </div>
	            </div>
              <div id="likers-container-266032" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="266032"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #46"></div>
  </section>
</div>
    <div class="postbit" id="266148" data-post-id="266148">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="kip" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/kip/120/1440_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  kip
                    <span class="op-star" title="Thread Starter">
                      <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                    </span>
                  </h3>
		          </div>
						
			          <div class="user-title">
									<span>ex_cldr Core Team</span>
			          </div>
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I’m definitely interested in what <a href="https://github.com/fogleman/primitive" rel="nofollow">primitive</a> does and will investigate doing that with <a href="https://hex.pm/packages/evision" rel="nofollow">eVision/OpenCV</a>.</p>
<p>Of the other processes indicated on the <a href="https://github.com/axe312ger/sqip" rel="nofollow">SQIP</a> page:</p>
<ol>
<li>Blurring is already implemented as <code>Image.blur/2</code></li>
<li>Pixelation is now on the main branch as <code>Image.pixelate/2</code></li>
<li>Posterisation will come when <code>libvips</code> 8.14 lands with a public api to <a href="https://github.com/ImageOptim/libimagequant" rel="nofollow">libimagequant</a></li>
</ol>
<p>Combined with the other image optimisations available on save I think there are some good options today - with some better options to come.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="266148" data-batch-url="/posts/batch_likers">
                        2
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/image-an-image-processing-library-based-upon-vix/47568/48">Post #47</a>
	                </div>
	            </div>
              <div id="likers-container-266148" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="266148"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #47"></div>
  </section>
</div>
    <div class="postbit" id="266218" data-post-id="266218">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="derpycoder" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/derpycoder/120/31388_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  derpycoder
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Is it possible to compress the Animated PNGs with Image library?</p>
<p>I tried several programs, and even libvips, but couldn’t make it work!</p>
<p><code>vipsthumbnail beaming_face.png[n=-1] -o beaming.png -s 64</code><br>
<code>vips resize beaming_face.gif[n=-1] -o beaming.gif -s 0.25</code></p>
<p>I get: <code>no matches found: beaming_face.gif[n=-1]</code></p>
<p></p><div class="lightbox-wrapper"><a class="lightbox" href="https://forum.elixirforum.com/uploads/default/original/3X/e/7/e774aa4dfa233d8fd9334f191a82cf6b3ad7993f.jpeg" data-download-href="https://forum.elixirforum.com/uploads/default/e774aa4dfa233d8fd9334f191a82cf6b3ad7993f" title="beaming_face" rel="nofollow"><img src="https://forum.elixirforum.com/uploads/default/original/3X/e/7/e774aa4dfa233d8fd9334f191a82cf6b3ad7993f.jpeg" alt="beaming_face" data-base62-sha1="x1yfuk4CF8XNwXffQW2vw5xzoRN" width="128" height="128"><div class="meta"><svg class="fa d-icon d-icon-far-image svg-icon" aria-hidden="true"><use href="#far-image"></use></svg><span class="filename">beaming_face</span><span class="informations">256×256 5.11 KB</span><svg class="fa d-icon d-icon-discourse-expand svg-icon" aria-hidden="true"><use href="#discourse-expand"></use></svg></div></a></div><p></p>
<p>I want to use Microsoft Fluent Emojis, I couldn’t find their animated SVG counterpart.</p>
<p><a href="https://github.com/microsoft/fluentui-emoji" class="onebox" target="_blank" rel="noopener nofollow ugc">https://github.com/microsoft/fluentui-emoji</a></p>
<p><a href="https://github.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis" class="onebox" target="_blank" rel="noopener nofollow ugc">https://github.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis</a></p>
<hr>
<p><strong>P.S.</strong> After a lot of searching, I found out how to resize using ffmpeg:</p>
<p><em><strong>For APNG:</strong></em><br>
<code>ffmpeg -i input.png -vf scale=64x64 -f apng output-64x64.png</code><br>
<code>ffmpeg -I input.png -vf scale=32x32 -f aping output-32x32.png</code></p>
<p><em><strong>For GIF:</strong></em> (Pasted here for demo, since Discourse didn’t support APNG upload!)<br>
<code>ffmpeg -i beaming_face.png -filter_complex "[0:v] scale=100:100, split [a][b]; [a] palettegen=reserve_transparent=on:transparency_color=ffffff [p]; [b][p] paletteuse" output-100x100.gif</code><br>
<img src="https://forum.elixirforum.com/uploads/default/original/3X/6/2/62461d9c5d57c3879189265111dab7f8ca0a71b9.gif" alt="output-100x100" data-base62-sha1="e1n0SGXGgfjfH1pz5JGhj3ZZS8F" width="100" height="100" class="animated"></p>
<p><em><strong>Hello, Reddit style animated emojis!!</strong></em></p>
<p>P.P.S. I still hope that Image library has a easy method, so I can resize a whole folder worth of emojis.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="266218" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/image-an-image-processing-library-based-upon-vix/47568/49">Post #48</a>
	                </div>
	            </div>
              <div id="likers-container-266218" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="266218"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #48"></div>
  </section>
</div>
    <div class="postbit" id="266588" data-post-id="266588">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="tmjoen" src="/assets/icons/user-9f439610.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  tmjoen
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>It would be great if <code>Image.Options.Crop.crop_focus()</code> could have a focal point <code>{x_percent, y_percent}</code> too. It’s really nice to have an Image in your backend with a little dot you can drag to choose the focal point of the image. Then we can crop around this point:</p>
<p></p><div class="lightbox-wrapper"><a class="lightbox" href="https://forum.elixirforum.com/uploads/default/original/3X/9/d/9dc3a743f3b72da99ce65ac6c73785cbefc150db.png" data-download-href="https://forum.elixirforum.com/uploads/default/9dc3a743f3b72da99ce65ac6c73785cbefc150db" title="image" rel="nofollow"><img src="https://forum.elixirforum.com/uploads/default/optimized/3X/9/d/9dc3a743f3b72da99ce65ac6c73785cbefc150db_2_690x494.png" alt="image" data-base62-sha1="mvE9c2TOl3gOa5qMVdqy9agoplx" width="690" height="494" srcset="https://forum.elixirforum.com/uploads/default/optimized/3X/9/d/9dc3a743f3b72da99ce65ac6c73785cbefc150db_2_690x494.png, https://forum.elixirforum.com/uploads/default/optimized/3X/9/d/9dc3a743f3b72da99ce65ac6c73785cbefc150db_2_1035x741.png 1.5x, https://forum.elixirforum.com/uploads/default/original/3X/9/d/9dc3a743f3b72da99ce65ac6c73785cbefc150db.png 2x" data-dominant-color="476575"><div class="meta"><svg class="fa d-icon d-icon-far-image svg-icon" aria-hidden="true"><use href="#far-image"></use></svg><span class="filename">image</span><span class="informations">1068×766 38.1 KB</span><svg class="fa d-icon d-icon-discourse-expand svg-icon" aria-hidden="true"><use href="#discourse-expand"></use></svg></div></a></div><p></p>
<p>Here it’s x=17 and y=48 (in percent) which means if I had a portrait crop here it would crop around this point (as far as is possible of course). It’s pretty neat!</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="266588" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/image-an-image-processing-library-based-upon-vix/47568/50">Post #49</a>
	                </div>
	            </div>
              <div id="likers-container-266588" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="266588"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #49"></div>
  </section>
</div>
    <div class="postbit" id="266603" data-post-id="266603">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="simonprev" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/simonprev/120/11757_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  simonprev
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Hey I just open-sourced a library that we use in production that do just that (with the imaginary format, a popular go image proxy server). We could abstract the parsing of the URL to be compatible with other popular tools. Right now it supports streaming images from arbitray URL, url signature of useful transform operation from Vix.</p>
<p><a href="https://github.com/mirego/plug_image_processing" class="onebox" target="_blank" rel="noopener nofollow ugc">https://github.com/mirego/plug_image_processing</a></p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="266603" data-batch-url="/posts/batch_likers">
                        2
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/image-an-image-processing-library-based-upon-vix/47568/51">Post #50</a>
	                </div>
	            </div>
              <div id="likers-container-266603" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="266603"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #50"></div>
  </section>
</div>
</template></turbo-stream><turbo-stream action="replace" target="load-more-container"><template><div id="load-more-container" class="load-more-container">
    <a class="load-more-button" data-turbo-stream="true" href="/topics/47568/load_more?page=6">Load more posts (144 remaining)</a>
</div></template></turbo-stream>