<turbo-stream action="append" target="posts_list"><template>    <div class="postbit" id="293310" data-post-id="293310">
  <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’ve published <a href="https://hex.pm/packages/image/0.35.0" rel="nofollow">image version 0.35.0</a> which focuses primarily on contrast management of an image.  Here’s the changelog:</p>
<h3><a name="p-293310-breaking-change-1" class="anchor" href="#p-293310-breaking-change-1" aria-label="Heading link" rel="nofollow"></a>Breaking change</h3>
<ul>
<li>
<p>Removes <code>Image.autolevel/1</code> which is replaced by <code>Image.equalize(image, :each)</code>.</p>
</li>
<li>
<p>Removes <code>Image.normalize/1</code> which is replaced by <code>Image.equalize(image, :luminance)</code>.</p>
</li>
</ul>
<h3><a name="p-293310-enhancements-2" class="anchor" href="#p-293310-enhancements-2" aria-label="Heading link" rel="nofollow"></a>Enhancements</h3>
<ul>
<li>
<p>Adds <code>Image.equalize/2</code> which expands an image to fill the tone range. Equalization can be performed on all bands, on each band or only on the luminance band. This function replaces <code>Image.normalize/1</code> and <code>Image.autolevel/1</code>.</p>
</li>
<li>
<p>Adds <code>Image.contrast/2</code> to apply simple contrast adjustments to an image. The contrast parameter is provided as a float &gt;= 0.0 with contrast less than 1.0 meaning reduce contrast and greater than 1.0 meaning increase contrast.</p>
</li>
<li>
<p>Adds <code>Image.apply_tone_curve/2</code> which applies a <a href="https://en.wikipedia.org/wiki/Curve_(tonality)" rel="nofollow">tone curve</a> to an image. This is typically used to affect overall image contrast.</p>
</li>
<li>
<p>Adds <code>Image.local_contrast/2</code> which applies a <a href="https://en.wikipedia.org/wiki/Adaptive_histogram_equalization#Contrast_Limited_AHE" rel="nofollow">Constrast Limited Adaptive histogram equalization (CLAHE)</a> to improve local contrast in images.</p>
</li>
<li>
<p>Adds <code>Image.sharpen/2</code> to apply sharpening to an image.</p>
</li>
<li>
<p>Adds <code>Image.modulate/2</code> to adjust an image using brightness, saturation, hue rotation and lightness in a single call.</p>
</li>
<li>
<p>Adds <code>Image.band_format/1</code> to return the band format of an image in <code>Nx</code> notation.</p>
</li>
<li>
<p>Adds <code>Image.with_band_format/3</code> to cast an image to a new band format, execute a function on the cast image and then re-cast the image back to its original band format if the function returns successfully.</p>
</li>
<li>
<p>Adds <code>Image.range/1</code> that returns the possible range of values for a pixel as a tuple in the form <code>{min_value, max_value}</code>.</p>
</li>
<li>
<p>Adds <code>Image.reduce_noise/2</code> and <code>Image.reduce_noise!/2</code> that applies a median filter to reduce salt and pepper noise in an image.</p>
</li>
</ul> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="293310" data-batch-url="/posts/batch_likers">
                        10
                      </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/133">Post #132</a>
	                </div>
	            </div>
              <div id="likers-container-293310" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="293310"
                     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 #132"></div>
  </section>
</div>
    <div class="postbit" id="294928" data-post-id="294928">
  <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>Another Sunday, another release, <a href="https://hex.pm/packages/image/0.36.0" rel="nofollow">image version 0.36.0</a>. It’s a relatively small release but given all the contrast-related enhancements last week, one of the key features missing has been histograms.</p>
<h3><a name="p-294928-enhancements-1" class="anchor" href="#p-294928-enhancements-1" aria-label="Heading link" rel="nofollow"></a>Enhancements</h3>
<ul>
<li>Adds <code>Image.Histogram.as_svg/2</code> and <code>Image.Histogram.as_image/2</code> to return the histogram of an image as either an SVG format suitable to adding to an HTML page or as an <code>t:Vix.Vips.Image.t/0</code>. The histogram is separated into red, green, blue and luminance bands.</li>
</ul>
<h3><a name="p-294928-example-2" class="anchor" href="#p-294928-example-2" aria-label="Heading link" rel="nofollow"></a>Example</h3>
<pre data-code-wrap="elixir"><code class="lang-elixir">iex&gt; i = Image.open! "./test/support/images/Kamchatka-2019-8754.jpg"
</code></pre>
<p></p><div class="lightbox-wrapper"><a class="lightbox" href="https://forum.elixirforum.com/uploads/default/original/3X/5/2/52d50ccb38f93455d47536b163882d46f21dfed4.jpeg" data-download-href="https://forum.elixirforum.com/uploads/default/52d50ccb38f93455d47536b163882d46f21dfed4" title="Kamchatka-2019-8754" rel="nofollow"><img src="https://forum.elixirforum.com/uploads/default/optimized/3X/5/2/52d50ccb38f93455d47536b163882d46f21dfed4_2_345x186.jpeg" alt="Kamchatka-2019-8754" data-base62-sha1="bOLBP0PgUXYCeSBSv3lkL9WvtNW" width="345" height="186" srcset="https://forum.elixirforum.com/uploads/default/optimized/3X/5/2/52d50ccb38f93455d47536b163882d46f21dfed4_2_345x186.jpeg, https://forum.elixirforum.com/uploads/default/optimized/3X/5/2/52d50ccb38f93455d47536b163882d46f21dfed4_2_517x279.jpeg 1.5x, https://forum.elixirforum.com/uploads/default/optimized/3X/5/2/52d50ccb38f93455d47536b163882d46f21dfed4_2_690x372.jpeg 2x" data-dominant-color="7F725D"><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">Kamchatka-2019-8754</span><span class="informations">1000×542 81.9 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>
<pre data-code-wrap="elixir"><code class="lang-elixir">iex&gt; Image.Histogram.as_image!(i, height: 1024, width: 2048)
</code></pre>
<p></p><div class="lightbox-wrapper"><a class="lightbox" href="https://forum.elixirforum.com/uploads/default/original/3X/f/d/fd300c121a31fb2688457d2708ff6bf8e5849e8c.jpeg" data-download-href="https://forum.elixirforum.com/uploads/default/fd300c121a31fb2688457d2708ff6bf8e5849e8c" title="histogram" rel="nofollow"><img src="https://forum.elixirforum.com/uploads/default/optimized/3X/f/d/fd300c121a31fb2688457d2708ff6bf8e5849e8c_2_345x172.jpeg" alt="histogram" data-base62-sha1="A7NJUKEck4k9MYdxq38c79CfsHG" width="345" height="172" srcset="https://forum.elixirforum.com/uploads/default/optimized/3X/f/d/fd300c121a31fb2688457d2708ff6bf8e5849e8c_2_345x172.jpeg, https://forum.elixirforum.com/uploads/default/optimized/3X/f/d/fd300c121a31fb2688457d2708ff6bf8e5849e8c_2_517x258.jpeg 1.5x, https://forum.elixirforum.com/uploads/default/optimized/3X/f/d/fd300c121a31fb2688457d2708ff6bf8e5849e8c_2_690x344.jpeg 2x" data-dominant-color="F1EDF1"><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">histogram</span><span class="informations">2048×1024 63.4 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="294928" data-batch-url="/posts/batch_likers">
                        15
                      </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/134">Post #133</a>
	                </div>
	            </div>
              <div id="likers-container-294928" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="294928"
                     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 #133"></div>
  </section>
</div>
    <div class="postbit" id="295538" data-post-id="295538">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Hello,<br>
I have request from a client, to attach custom text from user input on a licence plate frame and preview it by user on app.<br>
I do not have anything working, since I do not want to accept the project if I do not if this is possible with elixir and liveview.</p>
<p>Use case: User enters custom text with selected font and that should be applied as a preview on a licence plate frame.<br>
Here is an example of a plate which text should be customized.</p>
<p>Please I need some guidance if this is even possible to do and what are trade offs I should be aware before making the offer to the client. Thanks!<br>
</p><div class="lightbox-wrapper"><a class="lightbox" href="https://forum.elixirforum.com/uploads/default/original/3X/c/4/c4c786d5a662b2c65557d29331b99e2316e840df.jpeg" data-download-href="https://forum.elixirforum.com/uploads/default/c4c786d5a662b2c65557d29331b99e2316e840df" title="tablica_ram" rel="nofollow"><img src="https://forum.elixirforum.com/uploads/default/optimized/3X/c/4/c4c786d5a662b2c65557d29331b99e2316e840df_2_600x600.jpeg" alt="tablica_ram" data-base62-sha1="s4N4e6CCsu0R1khlXIxkPCFm8EL" width="600" height="600" srcset="https://forum.elixirforum.com/uploads/default/optimized/3X/c/4/c4c786d5a662b2c65557d29331b99e2316e840df_2_600x600.jpeg, https://forum.elixirforum.com/uploads/default/optimized/3X/c/4/c4c786d5a662b2c65557d29331b99e2316e840df_2_900x900.jpeg 1.5x, https://forum.elixirforum.com/uploads/default/original/3X/c/4/c4c786d5a662b2c65557d29331b99e2316e840df.jpeg 2x" data-dominant-color="BEBEBE"><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">tablica_ram</span><span class="informations">1024×1024 35.2 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="295538" 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/135">Post #134</a>
	                </div>
	            </div>
              <div id="likers-container-295538" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="295538"
                     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 #134"></div>
  </section>
</div>
    <div class="postbit" id="295547" data-post-id="295547">
  <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>Based upon your description there shouldn’t be any issues. I will put a quick proof-of-concept together. A few questions:</p>
<ul>
<li>Is the location of the text configuration?</li>
<li>What are the valid locations for the text (do you have an example of a completed plate?)</li>
<li>Are you also aiming to configure the colour of the plate background, plate numbers, etc?</li>
<li>Do you have a hi-res version of the plate template?</li>
</ul>
<p>Happy to continue here, but suspect this is better as a <a href="https://github.com/elixir-image/image/discussions" rel="nofollow">discussion on the GitHub repo</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="295547" 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/136">Post #135</a>
	                </div>
	            </div>
              <div id="likers-container-295547" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="295547"
                     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 #135"></div>
  </section>
</div>
    <div class="postbit" id="295558" data-post-id="295558">
  <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 mocked up a simple demonstration that should get you a fair way along the the path to what you are after.</p>
<h3><a name="p-295558-example-1" class="anchor" href="#p-295558-example-1" aria-label="Heading link" rel="nofollow"></a>Example</h3>
<p>This example needs <a href="https://hex.pm/packages/image/0.36.1" rel="nofollow">image version 0.36.1</a> which I published today (the only change is to add support for negative offsets for <code>:x</code> and <code>:y</code>.</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">iex&gt; license_plate_frame = Image.open! "/Users/kip/Desktop/License_plate_frame.png"
%Vix.Vips.Image{ref: #Reference&lt;0.642921347.487981081.40502&gt;}
</code></pre>
<p></p><div class="lightbox-wrapper"><a class="lightbox" href="https://forum.elixirforum.com/uploads/default/original/3X/9/1/91c51b5db3edf5e02eeb2807a923d03253f32723.png" data-download-href="https://forum.elixirforum.com/uploads/default/91c51b5db3edf5e02eeb2807a923d03253f32723" title="License_plate_frame" rel="nofollow"><img src="https://forum.elixirforum.com/uploads/default/optimized/3X/9/1/91c51b5db3edf5e02eeb2807a923d03253f32723_2_517x162.png" alt="License_plate_frame" data-base62-sha1="kNxx24Az9gupNlw8RkwaIVDLsVd" width="517" height="162" srcset="https://forum.elixirforum.com/uploads/default/optimized/3X/9/1/91c51b5db3edf5e02eeb2807a923d03253f32723_2_517x162.png, https://forum.elixirforum.com/uploads/default/optimized/3X/9/1/91c51b5db3edf5e02eeb2807a923d03253f32723_2_775x243.png 1.5x, https://forum.elixirforum.com/uploads/default/optimized/3X/9/1/91c51b5db3edf5e02eeb2807a923d03253f32723_2_1034x324.png 2x" data-dominant-color="444444"><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">License_plate_frame</span><span class="informations">2197×693 23.7 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>
<pre data-code-wrap="elixir"><code class="lang-elixir">iex&gt; text = Image.Text.text!("Kennzeichenhalter.ch", font_size: 60, font: "Helvetica Neue")
%Vix.Vips.Image{ref: #Reference&lt;0.642921347.487981081.40530&gt;}
</code></pre>
<p><img src="https://forum.elixirforum.com/uploads/default/original/3X/b/9/b9c8ba49aa6c0b48887d68c1c3a7803346ec46c7.png" alt="text" data-base62-sha1="qvwo7LJRGY87bvH8MnG5EegrGlx" width="423" height="33"></p>
<pre data-code-wrap="elixir"><code class="lang-elixir">iex&gt; Image.compose!(license_plate_frame, text, x: :middle, y: -60)
</code></pre>
<p></p><div class="lightbox-wrapper"><a class="lightbox" href="https://forum.elixirforum.com/uploads/default/original/3X/7/1/71ba47760e897d76af75af4b0daf0b7e25582c85.png" data-download-href="https://forum.elixirforum.com/uploads/default/71ba47760e897d76af75af4b0daf0b7e25582c85" title="composed" rel="nofollow"><img src="https://forum.elixirforum.com/uploads/default/optimized/3X/7/1/71ba47760e897d76af75af4b0daf0b7e25582c85_2_517x162.png" alt="composed" data-base62-sha1="ge53qUEyrQQ6CieBpt2fWxIZPNz" width="517" height="162" srcset="https://forum.elixirforum.com/uploads/default/optimized/3X/7/1/71ba47760e897d76af75af4b0daf0b7e25582c85_2_517x162.png, https://forum.elixirforum.com/uploads/default/optimized/3X/7/1/71ba47760e897d76af75af4b0daf0b7e25582c85_2_775x243.png 1.5x, https://forum.elixirforum.com/uploads/default/optimized/3X/7/1/71ba47760e897d76af75af4b0daf0b7e25582c85_2_1034x324.png 2x" data-dominant-color="464646"><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">composed</span><span class="informations">2197×693 28.8 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>
<h3><a name="p-295558-other-thoughts-2" class="anchor" href="#p-295558-other-thoughts-2" aria-label="Heading link" rel="nofollow"></a>Other thoughts</h3>
<ul>
<li>Hopefully you can get an SVG of the frame template. This would allow you to do the whole thing in SVG and only render an image at the end.</li>
<li>The example doesn’t include the horizontal rules in your example. These can be added without too much trouble
<ul>
<li>Create the rule as an SVG-based image</li>
<li>The length of each rule would be something like “total length of text space - width of text image - (2 * space between text and rule) / 2”</li>
<li>The font has to be a font known to the system on which is operates.  Basically a font in the list returned by <code>fc-list</code> on your system.</li>
</ul>
</li>
</ul> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="295558" 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/137">Post #136</a>
	                </div>
	            </div>
              <div id="likers-container-295558" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="295558"
                     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 #136"></div>
  </section>
</div>
    <div class="postbit" id="295621" data-post-id="295621">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p><a class="mention" href="/u/kip" rel="nofollow">@kip</a> Thanks a lot for the example. I got some flu, so I will play around with this library in couple of days. The client will send me SVG hopefully in a few days<br>
For the start only the text which will be collected trough user input on text field, should be displayed on the bottom, like your example. It can be either trough liveview for live preview or it can be generated on server side like traditional app and render an image. When I start experimenting I will get more questions, so I will be free to post here or on github.<br>
Thanks a lot again!</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="295621" 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/138">Post #137</a>
	                </div>
	            </div>
              <div id="likers-container-295621" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="295621"
                     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 #137"></div>
  </section>
</div>
    <div class="postbit" id="295643" data-post-id="295643">
  <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>For your UI requirements, I would try to craft everything in SVG and have the browser render it. You distribute the compute requirements, you get auto scaling etc etc.  Then only use <code>image</code> if you need to render an image server-side.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="295643" 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/139">Post #138</a>
	                </div>
	            </div>
              <div id="likers-container-295643" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="295643"
                     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 #138"></div>
  </section>
</div>
    <div class="postbit" id="295654" data-post-id="295654">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>cool, thanks. When I have something meaningful, I will share code or some live demo. Thanks again!</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="295654" 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/140">Post #139</a>
	                </div>
	            </div>
              <div id="likers-container-295654" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="295654"
                     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 #139"></div>
  </section>
</div>
    <div class="postbit" id="315846" data-post-id="315846">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I’m trying to create an image thumbnail but I’m getting an error from some images, not all of them. I’m using LiveView, the uploaded image comes without an extension, so I add it to the filename.</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">defmodule MyApp.Helpers.FileManager do
  def upload_image(%{path: path}, entry) do
    path_with_ext = path &lt;&gt; Path.extname(entry.client_name)
    File.rename(path, path_with_ext)
    filename = Path.basename(path_with_ext)

    destination= Path.join("priv/static/images", filename)

    path_with_ext
    |&gt; Image.open!()
    |&gt; Image.thumbnail!("256x256")
    |&gt; Image.write(destination)

    {:ok, "/images/#{filename}"}
  end
</code></pre>
<p>Here’s the code from the component mentioned in the error</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">def params_with_image(socket, params) do
    path =
      socket
      |&gt; consume_uploaded_entries(:image, &amp;FileManager.upload_image/2)
      |&gt; List.first()

    Map.put(params, "image", %{path: path})
  end
</code></pre>
<p>Error, as I said, it happens only on some images, not all of them. It’s interesting that it’s happening always on the same ones, although they are all .jpg.</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">[error] GenServer #PID&lt;0.1361.0&gt; terminating
** (stop) exited in: GenServer.call(#PID&lt;0.1372.0&gt;, :consume_done, :infinity)
    ** (EXIT) no process: the process is not alive or there's no process currently associated with the given name, possibly because its application isn't started
    (elixir 1.16.0) lib/gen_server.ex:1114: GenServer.call/3
    (phoenix_live_view 0.20.3) lib/phoenix_live_view/upload_channel.ex:26: Phoenix.LiveView.UploadChannel.consume/3
    (elixir 1.16.0) lib/enum.ex:1700: Enum."-map/2-lists^map/1-1-"/2
    (myapp 0.1.0) lib/myapp_web/live/account_live/profile_form_component.ex:94: MyAppWeb.AccountLive.ProfileFormComponent.params_with_image/2
    (myapp 0.1.0) lib/myapp_web/live/account_live/profile_form_component.ex:75: MyAppWeb.AccountLive.ProfileFormComponent.handle_event/3
    (phoenix_live_view 0.20.3) lib/phoenix_live_view/channel.ex:719: anonymous fn/4 in Phoenix.LiveView.Channel.inner_component_handle_event/4
    (telemetry 1.2.1) /home/matija/Sites/myapp/deps/telemetry/src/telemetry.erl:321: :telemetry.span/3
    (phoenix_live_view 0.20.3) lib/phoenix_live_view/diff.ex:209: Phoenix.LiveView.Diff.write_component/4
    (phoenix_live_view 0.20.3) lib/phoenix_live_view/channel.ex:651: Phoenix.LiveView.Channel.component_handle/4
    (stdlib 5.2) gen_server.erl:1095: :gen_server.try_handle_info/3
    (stdlib 5.2) gen_server.erl:1183: :gen_server.handle_msg/6
    (stdlib 5.2) proc_lib.erl:251: :proc_lib.wake_up/3
</code></pre>
<p><a class="mention" href="/u/kip" rel="nofollow">@kip</a> can you point me in the right direction?</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="315846" 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/141">Post #140</a>
	                </div>
	            </div>
              <div id="likers-container-315846" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="315846"
                     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 #140"></div>
  </section>
</div>
    <div class="postbit" id="315847" data-post-id="315847">
  <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">
								<aside class="quote no-group" data-username="MatijaL" data-post="141" data-topic="47568">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/letter_avatar_proxy/v4/letter/m/258eb7/48.png" class="avatar"> MatijaL:</div>
<blockquote>
<pre data-code-wrap="elixir"><code class="lang-elixir">   path_with_ext
    |&gt; Image.open!()
    |&gt; Image.thumbnail!("256x256")
    |&gt; Image.write(destination)
</code></pre>
</blockquote>
</aside>
<p>I would refactor this a bit to be:</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">with {:ok, thumbnail} &lt;- Image.thumbnail(path_with_ext, 256),
     {:ok, _} &lt;- Image.write(thumbnail, destination) do
  {:ok, “image/#[filename}”}
end
</code></pre>
<p>At least then you can see if the imaging pipeline is the source of the error (the stacktrace isn’t much help in this case).</p>
<p>Secondly, assuming you have one of the failing images, simply try thumbnailng it in <code>iex</code> and see if you get an error return with a useful stacktrace. And of course, feel free to open an issue and attach a failing image - happy to take a look at it.</p>
<p>Next, <code>Image.thumbnail/3</code> will resize the image so the longest edge meets the supplied domension.  It won’t change the aspect ration of the image unless you use the <code>resize: :force</code> option. So in your case, just <code>256</code> as the size parameter should do the trick.</p>
<p>Lastly, <code>libvips</code> has some optimisations for thumbnailng if you thumbnail directly from the path. It can combine file opening and block reductions so it’s highly recommended doing that when you can.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="315847" 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/142">Post #141</a>
	                </div>
	            </div>
              <div id="likers-container-315847" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="315847"
                     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 #141"></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=15">Load more posts (54 remaining)</a>
</div></template></turbo-stream>