{"id":280,"date":"2013-02-04T06:38:00","date_gmt":"2013-02-04T06:38:00","guid":{"rendered":"https:\/\/pim.famnit.upr.si\/wp\/?p=280"},"modified":"2021-11-17T11:18:54","modified_gmt":"2021-11-17T11:18:54","slug":"slice-up-an-image-in-equal-slices-with-imagemagick-or-a-progress-bar-in-100-images","status":"publish","type":"post","link":"https:\/\/pim.famnit.upr.si\/wp\/?p=280","title":{"rendered":"Slice up an image in equal slices with ImageMagick or a progress bar in 100 images"},"content":{"rendered":"<p>Let&#8217;s assume we need a progress bar in 101 images where each shows a particular percentage form 0 to 100. How to create such image will be explained in <a href=\"\/blog\/index.php?\/archives\/297-Bootstrap-progress-bar-in-100-images-for-older-browsers.html\">the next post<\/a> (not ready yet at the time of writing). <a href=\"uploads\/progressbar_small.png\">I already prepared the image here<\/a>. <\/p>\n<p>The easiest way to slice up an image is <strong>in a command lin<\/strong>e using <a href=\"http:\/\/www.imagemagick.org\/Usage\/crop\/#crop\"><strong>ImageMagick<\/strong>&#8216;s a crop flag<\/a>. The first command shows the image file we are going to slice. The second command (which should be in one line) is <strong>a simple a bash for loop<\/strong> and<strong> in each iteration we create a new slice<\/strong>. The third command just lists files that we created.<\/p>\n<pre style=\"background-color: #ffffd2;\"> <strong>mk@here\/$<\/strong> ls\r\n progressbar_small.png\r\n\r\n<strong> mk@here\/$<\/strong> for((i=0; i&lt;101; i++)) ; do n=$[i*22]; \\ \r\n           convert progressbar_small.png -crop 500x22+0+$n +repage progressbar${i}.png; \\\r\n           done\r\n\r\n <strong>mk@here\/$<\/strong> ls\r\n progressbar0.png&nbsp;&nbsp;&nbsp; progressbar32.png&nbsp; progressbar56.png&nbsp; progressbar7.png\r\n ...\r\n progressbar2.png&nbsp;&nbsp;&nbsp; progressbar53.png&nbsp; progressbar77.png&nbsp; progressbar_small.png\r\n<\/pre>\n<p>The -crop flag slices up images 500px wide and 22px high and starts<br \/>\nat 0px on the X axis and goes down 22*i where i runs from 0 to 100. The<br \/>\nend results are 100 images.<\/p>\n<p>All images are available <a href=\"https:\/\/osebje.famnit.upr.si\/~mkljun\/blog-slike\/\/progress_bar.zip\">in this zip file<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Let&#8217;s assume we need a progress bar in 101 images where each shows a particular percentage form 0 to 100. How to create such image will be explained in the next post (not ready yet at the time of writing). I already prepared the image here. The easiest way to slice up an image is&#46;&#46;&#46;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[],"class_list":["post-280","post","type-post","status-publish","format-standard","hentry","category-11-diy"],"_links":{"self":[{"href":"https:\/\/pim.famnit.upr.si\/wp\/index.php?rest_route=\/wp\/v2\/posts\/280","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pim.famnit.upr.si\/wp\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pim.famnit.upr.si\/wp\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pim.famnit.upr.si\/wp\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pim.famnit.upr.si\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=280"}],"version-history":[{"count":1,"href":"https:\/\/pim.famnit.upr.si\/wp\/index.php?rest_route=\/wp\/v2\/posts\/280\/revisions"}],"predecessor-version":[{"id":711,"href":"https:\/\/pim.famnit.upr.si\/wp\/index.php?rest_route=\/wp\/v2\/posts\/280\/revisions\/711"}],"wp:attachment":[{"href":"https:\/\/pim.famnit.upr.si\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=280"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pim.famnit.upr.si\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=280"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pim.famnit.upr.si\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=280"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}