{"id":44461,"date":"2019-04-08T03:01:41","date_gmt":"2019-04-07T17:01:41","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=44461"},"modified":"2019-04-05T16:12:43","modified_gmt":"2019-04-05T06:12:43","slug":"batch-ffmpeg-image-scaling-and-cropping-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/batch-ffmpeg-image-scaling-and-cropping-tutorial\/","title":{"rendered":"Batch ffmpeg Image Scaling and Cropping Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/crop_via_ffmpeg.jpg\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Batch ffmpeg Image Scaling and Cropping Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Mac\/help_ffmpeg_scale.jpg\" title=\"Batch ffmpeg Image Scaling and Cropping Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Batch ffmpeg Image Scaling and Cropping Tutorial<\/p><\/div>\n<p>We&#8217;re adding &#8220;Scaling&#8221; functionality onto the &#8220;Cropping&#8221; functionality of yesterday&#8217;s <a title='Batch ffmpeg Image Cropping Primer Tutorial' href='#bicpt'>Batch ffmpeg Image Cropping Primer Tutorial<\/a> today.<\/p>\n<p>For now, we are also harnessing the power of running <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/Mac\/help_ffmpeg.php-GETME\">this changed<\/a> PHP <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/help_ffmpeg.php-GETME\">help_ffmpeg.php<\/a> within a web browser by showing you both input and output images in <a target=_blank title='Data URI information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Data_URI_scheme'>data URI<\/a> form.  Why data URI?  Data URI makes your work transportable, as any data URI formed image does not reference a domain of any sort.  Sounds good in emails, doesn&#8217;t it?  This data URI usage might be a &#8220;bridge&#8221; from the local web server usage we&#8217;ve started out on (and may remain on) to other realms in that within the web browser you can Windows right click or Mac OS X two finger gesture on this data URI image of interest and get a copy of it or display it somewhere else or &#8230; who knows &#8230;<\/p>\n<p><img decoding=\"async\" src=\"\/\/www.rjmprogramming.com.au\/PHP\/animegif\/bondi_innerHTML.gif\" title=\"You and innerHTML and Bondi Beach\" style=\"display:inline-block;\" alt=\"You and innerHTML and Bondi Beach\"><\/p>\n<p> &#8230; the water temperature&#8217;s pretty good at the moment!<\/p>\n<p>In amongst the new scaling functionality, and again we&#8217;d like to  thank <a target=_blank title='https:\/\/www.oodlestechnologies.com\/blogs\/Crop-and-scale-image-using-ffmpeg' href='https:\/\/www.oodlestechnologies.com\/blogs\/Crop-and-scale-image-using-ffmpeg'>https:\/\/www.oodlestechnologies.com\/blogs\/Crop-and-scale-image-using-ffmpeg<\/a> for their excellent heads up, we allow for scaling to a user defined width and height, but maintaining the original image&#8217;s <a target=_blank title='Aspect Ratio information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Aspect_ratio_(image)'>&#8220;Aspect Ratio&#8221;<\/a>.<\/p>\n<hr>\n<p id='bicpt'>Previous relevant <a target=_blank title='Batch ffmpeg Image Cropping Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/batch-ffmpeg-image-cropping-primer-tutorial\/'>Batch ffmpeg Image Cropping Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/crop_via_ffmpeg.jpg\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Batch ffmpeg Image Cropping Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Mac\/crop_via_ffmpeg.jpg\" title=\"Batch ffmpeg Image Cropping Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Batch ffmpeg Image Cropping Primer Tutorial<\/p><\/div>\n<p>Putting together presentations based on slides which are images you may come across the desire to apply batch image manipulations to a whole set of images, in the same way.  When we presented <a title='Gimp Batch Image Manipulation Primer Tutorial' href='#gbimpt'>Gimp Batch Image Manipulation Primer Tutorial<\/a> you would have seen this in play with the <a target=_blank title='Gimp' href='http:\/\/gimp.org'>Gimp<\/a> image editor&#8217;s Bimp batch processing functionality part.<\/p>\n<p>Today we write some PHP to do this with an <a target=_blank title='PHP exec() method information' href='http:\/\/php.net\/manual\/en\/function.exec.php'>exec<\/a> invocation of the great <a target=_blank title='ffmpeg' href='https:\/\/www.ffmpeg.org\/'>ffmpeg<\/a>, which we will show you code for on rjmprogramming.com.au but no &#8220;live run&#8221; links on this occasion.  &#8220;Live run&#8221; for us happens on (the Apache\/PHP\/MySql local web server) <a target=_blank title='MAMP' href='https:\/\/mamp.info'>MAMP<\/a>, a setup we enthusiastically recommend for any Mac OS X (or macOS) users out there developing web applications, where &#8230;<\/p>\n<p><code>HTTP:\/\/localhost:8888\/<\/code><\/p>\n<p> &#8230; URL (at a web browser address bar) corresponds to a (local) web server folder (MAMP&#8217;s &#8220;Document Root&#8221;) called (for us) &#8230;<\/p>\n<p><code><br \/>\n\/Applications\/MAMP\/htdocs\/<br \/>\n<\/code><\/p>\n<p> &#8230; and the user performing today&#8217;s PHP <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/help_ffmpeg.php_GETME\">help_ffmpeg.php<\/a> can define an image file(specification) relative to that &#8220;Document Root&#8221; basis above, and processing via PHP&#8217;s file specification specialist, <a target=_blank title='PHP glob() method information' href='http:\/\/php.net\/manual\/en\/function.glob.php'>glob<\/a>.   It&#8217;s all relative, really.<\/p>\n<p>We&#8217;ll be adding to this, but today we start out on this exploration with some cropping functionality, the heads up for we&#8217;d like to thank <a target=_blank title='https:\/\/www.oodlestechnologies.com\/blogs\/Crop-and-scale-image-using-ffmpeg' href='https:\/\/www.oodlestechnologies.com\/blogs\/Crop-and-scale-image-using-ffmpeg'>https:\/\/www.oodlestechnologies.com\/blogs\/Crop-and-scale-image-using-ffmpeg<\/a> &#8230; ta, muchly!  One last thing is that ffmpeg is Open Source and you can read about compiling this desktop application yourself by referring to the links explaining how to do this at <a target=_blank title='Video via Slide Images and Back Again via ffmpeg Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/video-via-slide-images-and-back-again-via-ffmpeg-primer-tutorial\/'>Video via Slide Images and Back Again via ffmpeg Primer Tutorial<\/a>.<\/p>\n<hr>\n<p id='gbimpt'>Previous relevant <a target=_blank title='Gimp Batch Image Manipulation Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/gimp-batch-image-manipulation-primer-tutorial\/'>Gimp Batch Image Manipulation Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/GIMP\/Bimp\/\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Gimp Batch Image Manipulation Primer Tutorial\" id=\"qpcimage\" src=\"http:\/\/www.rjmprogramming.com.au\/GIMP\/Bimp\/Gimp_Bimp_Primer-42of.jpg\" title=\"Gimp Batch Image Manipulation Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Gimp Batch Image Manipulation Primer Tutorial<\/p><\/div>\n<p>Gimp is a great graphics editor with a huge number of methods to subtlely or not so subtlely adjust your images, no matter where they have come from (some of today&#8217;s came from Mac OS X screen captures via the Grab application and some came from a digital camera).<\/p>\n<p><script type='text\/javascript'> var qpcimageo = null; setInterval(eatAtQJoes, 5000); function eatAtQJoes() { if (qpcimageo == null) { qpcimageo = document.getElementById('qpcimage'); } var aminus=qpcimageo.src.split(\"-\");  var qn=aminus[aminus.length - 1];  var qnext = eval(qn.replace('of.jpg', '')); qnext=eval(1 + qnext);   if (qnext >= 57) { qnext = 20; } else if (qnext == 24 || qnext == 25) { qnext = 26; }  else if (qnext == 38) { qnext = 39; }   qn = aminus[0] + \"-\" + qnext + \"of.jpg\"; qpcimageo.src=qn; } <\/script><\/p>\n<p>Gimp has a great and practical way to manipulate a batch of files to perform the task to this series of photographs.  This could be especially useful for website imagery work.<\/p>\n<p>In today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/GIMP\/Bimp\/\">tutorial<\/a> you see one batch run changing the images to black and white and another to change the size of a series of photographs (to a smaller size than the huge size they come out of the digital camera (ie. more suited to website usage)) and add a text watermark in the top left hand corner.<\/p>\n<p>Here is some downloadable PHP that helps out (after) the second batch approach to show up to six of the resized images at a time and change these images over time, and you could call it <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/GIMP\/Bimp\/CuteButtons.php_GETME\" title='CuteButtons.php'>CuteButtons.php<\/a> &#8230; this PHP arrangement (it is possible to do this same functionality just with Javascript, but is maybe easier to achieve in PHP, as well as there being methods like <i><a target=_blank href='http:\/\/www.w3schools.com\/php\/func_filesystem_file_exists.asp' title='PHP file_exists'>file_exists<\/a><\/i> and <i><a target=_blank href='http:\/\/www.w3schools.com\/php\/func_filesystem_file_get_contents.asp' title='PHP file_get_contents'>file_get_contents<\/a><\/i> and <i><a target=_blank href='http:\/\/www.w3schools.com\/php\/func_filesystem_copy.asp' title='PHP copy'>copy<\/a><\/i> which are things (client-side) Javascript will never be able to do (well, maybe first of three in a clunky way)) is generic in the sense that there are hardcoded image names, but they can be overridden by using get parameters image1, image2, image3 etcetera etcetera etcetera &#8230; <br \/>eg. <a target=_blank title='http:\/\/www.rjmprogramming.com.au\/GIMP\/Bimp\/CuteButtons.php?image1=http:\/\/www.rjmprogramming.com.au\/GIMP\/iPhoto\/NLook.jpg&#038;image2=http:\/\/www.rjmprogramming.com.au\/GIMP\/iPhoto\/NLok.jpg' href='http:\/\/www.rjmprogramming.com.au\/GIMP\/Bimp\/CuteButtons.php?image1=http:\/\/www.rjmprogramming.com.au\/GIMP\/iPhoto\/NLook.jpg&#038;image2=http:\/\/www.rjmprogramming.com.au\/GIMP\/iPhoto\/NLok.jpg'>http:\/\/www.rjmprogramming.com.au\/GIMP\/Bimp\/CuteButtons.php?image1 =http:\/\/www.rjmprogramming.com.au\/GIMP\/iPhoto\/NLook.jpg&#038;image2 =http:\/\/www.rjmprogramming.com.au\/GIMP\/iPhoto\/NLok.jpg<\/a><\/p>\n<p>The Gimp of this tutorial is on a Mac laptop using Mac OS X 10.9.2 Mavericks.   A curious thing happened with trying to get Batch Image Manipulation to work.   It worked to a point but, initially, wouldn&#8217;t accept images when clicking the &#8220;Add image files&#8221; button.   Read somewhere that this is less likely to happen when installing via <a target=_blank href='http:\/\/www.macports.org\/' title='MacPorts home page'>MacPorts<\/a> (presumably via <i>port install gimp<\/i>) but I installed via the <a target=_blank title='Gimp' href='http:\/\/gimp.org'>Gimp website<\/a>.  Am not sure that it was all a coincidence, or was a dream, but seem to remember what made Gimp&#8217;s Batch Image Manipulation functionality to fully start working, was an &#8220;out there&#8221; idea I tried that was to download the <a target=_blank title='Thanks to http:\/\/www.alessandrofrancesconi.it for this' href='http:\/\/www.alessandrofrancesconi.it\/projects\/bimp\/gimp-plugin-bimp.zip'>gimp-plugin-bimp.zip<\/a> in which there was a Windows bimp.exe (Gimp <a target=_blank href='http:\/\/en.wikipedia.org\/wiki\/Plug-in_(computing)' title='Wikipedia information regarding plug-in ... thanks'>plugin<\/a>), which I ran on Mac using the Terminal application&#8217;s Bash environment&#8217;s command <a target=_blank title='Wine on Mac OS X' href='http:\/\/sourceforge.net\/projects\/darwine\/'>wine<\/a> via <i>wine bimp.exe<\/i> (we installed wine here via MacPorts <i>port install wine<\/i> and talked about wine with <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=7498' title='Wine for Windows on Mac Primer Tutorial'>Wine for Windows on Mac Primer Tutorial<\/a>).   Just thought I&#8217;d mention this in case it helps somebody.  My theory for the turn around is that this may have written something good to a configuration file (even before it failed to run (as you&#8217;d expect) with various Windows graphics libraries not loading).<\/p>\n<p>Gimp&#8217;s Batch Image Manipulation (bimp) runs as a new application (as you can see in the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/GIMP\/Bimp\/\">tutorial<\/a>), as you might expect would happen for (my favourite) <a target=_blank href='http:\/\/xquartz.macosforge.org\/' title='XQuartz ... formerly Xwindows'>XQuartz<\/a> (formerly XWindows (see  a future <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=7579' title='XWindows Primer Tutorial'>XWindows Primer Tutorial<\/a> for more information here)) type of program (as Gimp is).<\/a><\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d7981' onclick='var dv=document.getElementById(\"d7981\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=Gimp\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d7981' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d44438' onclick='var dv=document.getElementById(\"d44438\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/ffmpeg\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d44438' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d44461' onclick='var dv=document.getElementById(\"d44461\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/scale\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d44461' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We&#8217;re adding &#8220;Scaling&#8221; functionality onto the &#8220;Cropping&#8221; functionality of yesterday&#8217;s Batch ffmpeg Image Cropping Primer Tutorial today. For now, we are also harnessing the power of running this changed PHP help_ffmpeg.php within a web browser by showing you both input &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/batch-ffmpeg-image-scaling-and-cropping-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,29,37],"tags":[135,1857,2901,1654,297,405,415,2671,2429,1615,590,714,744,932,2900,1094,1095,1319,1404],"class_list":["post-44461","post","type-post","status-publish","format-standard","hentry","category-elearning","category-operating-system","category-tutorials","tag-batch","tag-crop","tag-cropping","tag-data-uri","tag-data-url","tag-exec","tag-ffmpeg","tag-file-specification","tag-filespec","tag-glob","tag-image","tag-local-web-server","tag-mamp","tag-php","tag-programing","tag-scale","tag-scaling","tag-tutorial","tag-web-browser"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/44461"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=44461"}],"version-history":[{"count":6,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/44461\/revisions"}],"predecessor-version":[{"id":44467,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/44461\/revisions\/44467"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=44461"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=44461"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=44461"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}