{"id":32352,"date":"2017-08-24T03:01:56","date_gmt":"2017-08-23T17:01:56","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=32352"},"modified":"2017-08-26T17:58:17","modified_gmt":"2017-08-26T07:58:17","slug":"merging-photos-via-gimp-and-iphone-camera-animation-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/merging-photos-via-gimp-and-iphone-camera-animation-tutorial\/","title":{"rendered":"Merging Photos via Gimp and iPhone Camera Animation Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/merge_photos.htm?toggle=1&#038;image12=heart.jpg\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Merging Photos via Gimp and iPhone Camera Animation Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/heart_animation.gif\" title=\"Merging Photos via Gimp and iPhone Camera Animation Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Merging Photos via Gimp and iPhone Camera Animation Tutorial<\/p><\/div>\n<p>We&#8217;ve got a bit of animation going on with the latest installment of our &#8220;Merging Photos&#8221; blog posting thread, building on our previous <a title='Merging Photos via Gimp and iPhone Camera Sharing Tutorial' href='#mpgpcst'>Merging Photos via Gimp and iPhone Camera Sharing Tutorial<\/a> &#8230;<\/p>\n<ul>\n<li>the updated <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/merge_photos.htm?toggle=1&#038;image12=heart.jpg\" title=\"Click picture\">live run<\/a> shows the usage of a new <i>toggle<\/i> GET argument that reflects the rate of change of a throbbing image opacity exchange after the overlaying phase &#8230; as well as &#8230;<\/li>\n<li>today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/heart_animation.gif\" title=\"Tutorial picture\">tutorial picture<\/a> simulates what could happen with the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/merge_photos.htm\">live run<\/a> via an Animated GIF we created courtesy of <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/animated-gif-via-php-writing-php-primer-tutorial\/' title='Animated GIF via PHP Writing PHP Primer Tutorial'>Animated GIF via PHP Writing PHP Primer Tutorial<\/a><\/li>\n<\/ul>\n<p>Of course, animation can be achieved in a variety of ways, and our first thought trying to present the &#8220;Workings of the Human Heart&#8221; (and thanks to <a target=_blank title='McGraw-Hill' href='http:\/\/www.mheducation.com.au\/'>McGraw-Hill<\/a> Education for the image we reworked for the purposes of using our web application and its previous overlay functionalities, extending that to animation functionality today) was to use a technique like we use in the <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-staged-animation-meter-presentation-tutorial\/' title='HTML\/Javascript Staged Animation Meter Presentation Tutorial '>HTML\/Javascript Staged Animation Meter Presentation Tutorial <\/a>.  That method would have involved several cut ups of the original image, but today&#8217;s method of animation could use just the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/heart.jpg\" title=\"heart.jpg tweaked the original McGraw-Hill Education image, thanks\">one image<\/a>, modified a little to suit the purposes of the &#8220;doppelg\u00e4nger&#8221; overlay functionalities.<\/p>\n<p>Here is today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/merge_photos.html----GETME\" title='merge_photos.html----GETME'>merge_photos.htm<\/a> source code and how it changed in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/merge_photos.html----GETME\" title='merge_photos.htm'>this way<\/a>, today, to cater for these animation ideas.<\/p>\n<hr>\n<p id='mpgpcst'>Previous relevant <a target=_blank title='Merging Photos via Gimp and iPhone Camera Sharing Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/merging-photos-via-gimp-and-iphone-camera-sharing-tutorial\/'>Merging Photos via Gimp and iPhone Camera Sharing Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/merge_photos.htm?image12=http:\/\/1.bp.blogspot.com\/_1XbCsR5voz8\/SyVjz6MiFsI\/AAAAAAAAGWg\/Zw_ZoyTsEaw\/s400\/lincoln+doppelganger.jpg\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Merging Photos via Gimp and iPhone Camera Sharing Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/merge_photos.jpeg\" title=\"Merging Photos via Gimp and iPhone Camera Sharing Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Merging Photos via Gimp and iPhone Camera Sharing Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Merging Photos via Gimp and iPhone Camera Superimpose Tutorial' href='#mpgpcst'>Merging Photos via Gimp and iPhone Camera Superimpose Tutorial<\/a> gave us scenarios whereby to share the experience, via email for example, you do not share enough by just attaching an image as an email attachment, but you need to effectively screenshot the &#8220;superimposed&#8221; scene.  We initially researched the &#8220;slide a <a target=_blank title='HTML Canvas element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ref_canvas.asp'>canvas<\/a> element under&#8221; theory, whereby you&#8217;d use its <a target=_blank title='HTML5 canvas element toDataURL method information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/HTMLCanvasElement\/toDataURL'>toDataURL<\/a>() method to attach your superimposition as a composited (canvas) image (dataURL) email attachment.<\/p>\n<p>Researching this further, got onto this <a target=_blank title='Very useful webpage, thanks' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Canvas_API\/Drawing_DOM_objects_into_a_canvas'>very useful webpage<\/a>, thanks, whose HTML5 canvas and <a target=_blank href='https:\/\/www.w3schools.com\/graphics\/svg_intro.asp' title='SVG information from w3schools'>SVG<\/a> <a target=_blank title='SVG foreignObject tag information' href='https:\/\/developer.mozilla.org\/en\/docs\/Web\/SVG\/Element\/foreignObject'>foreignObject<\/a> tag&#8217;s talents might help, and it panned out not to help <i>us<\/i> enough, but left the code in in case it is a good method for you to look further into.<\/p>\n<p>Take 3, and we involve <a target=_blank href='http:\/\/www.w3schools.com\/jsref\/met_win_open.asp' title='window.open information from w3schools'>window.open<\/a> &#8220;popup&#8221; window scenarios, where there, or back at its parent, we allow a <i>&#8220;Select All\/Copy here or via New Window and Select All\/Copy into Email Body &#8230;&#8221;<\/i> button press to remind the user they can use whatever web browser &#8220;Select All&#8221; and &#8220;Copy&#8221; arrangements it has, to have ready in the buffer (of your non-mobile platforms) the wherewithal to &#8220;Paste&#8221; into the body section of an email you can construct with a desktop Email Client application like Mac OS X&#8217;s Mail, for instance, to create an email attachment of your &#8220;superimposing&#8221; or other, experience using our updated <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/merge_photos.htm?image12=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/merge_photos.htm?image12=http:\/\/1.bp.blogspot.com\/_1XbCsR5voz8\/SyVjz6MiFsI\/AAAAAAAAGWg\/Zw_ZoyTsEaw\/s400\/lincoln+doppelganger.jpg\" title='Click picture'>live run<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/merge_photos.html---GETME\" title='merge_photos.html---GETME'>merge_photos.htm<\/a> and how it changed in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/merge_photos.html---GETME\" title='merge_photos.htm'>this way<\/a>, today, to cater for these (email) &#8220;sharing&#8221; methodologies.<\/p>\n<p>Thanks to the <a target=_blank title='' href='http:\/\/willowmanor.blogspot.com.au\/2009\/12\/doppelganger.html'>Willow Manor<\/a> website for today&#8217;s Lincoln &#8220;doppelg\u00e4nger&#8221; inspiration (&#8230; or is that <a target=_blank title='Lincoln and JFK coincidences' href='https:\/\/www.buzzfeed.com\/briangalindo\/10-weird-coincidences-between-abraham-lincoln-and-john-f-ken?utm_term=.jsK81bLeb7#.ijon6wM0wW'>JFK<\/a>?).<\/p>\n<hr>\n<p id='mpgpcst'>Previous relevant <a target=_blank title='Merging Photos via Gimp and iPhone Camera Superimpose Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/merging-photos-via-gimp-and-iphone-camera-superimpose-tutorial\/'>Merging Photos via Gimp and iPhone Camera Superimpose Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/merge_photos.htm?image12=https:\/\/authorjulieglover.files.wordpress.com\/2011\/05\/obama2527sdoppelganger.jpg\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Merging Photos via Gimp and iPhone Camera Superimpose Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/merge_photos.png\" title=\"Merging Photos via Gimp and iPhone Camera Superimpose Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Merging Photos via Gimp and iPhone Camera Superimpose Tutorial<\/p><\/div>\n<p>Is there a word &#8220;doppelg\u00e4nging&#8221; that conjures up the idea to &#8220;superimpose&#8221;?  Well, even if there isn&#8217;t, today, that is what we are turning our attention to regarding moving on with our &#8220;Merging Photos&#8221; thread of blog postings last talked about with yesterday&#8217;s <a title='Merging Photos via Gimp and iPhone Camera Genericization Tutorial' href='#mpgpcgt'>Merging Photos via Gimp and iPhone Camera Genericization Tutorial<\/a>.<\/p>\n<p>Anyway, today, we are making the web application more functional, perhaps, regarding the &#8220;superimposing&#8221; of one face on top of another.  You don&#8217;t have to look too hard on the &#8220;net&#8221; for &#8220;doppelg\u00e4nger&#8221; websites, where people see likenesses between people&#8217;s faces, and illustrate this with &#8230;<\/p>\n<ul>\n<li>photos either (usually horizontally) side by side &#8230; or by a &#8230;<\/li>\n<li>single photo &#8220;halved&#8221; (usually horizontally) with the two faces side by side<\/li>\n<\/ul>\n<p> &#8230; the second scenario of which we added functionality for, today, with our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/merge_photos.htm?image12=https:\/\/authorjulieglover.files.wordpress.com\/2011\/05\/obama2527sdoppelganger.jpg\" title=\"Click picture\">Barack Obama live run<\/a> example showing what can happen now (thanks to <a target=_blank title='Julie Glover blog' href='https:\/\/authorjulieglover.files.wordpress.com\/'>Julie Glover<\/a>) exemplifying the functionality of <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/merge_photos.html--GETME\" title='merge_photos.html--GETME'>merge_photos.htm<\/a> and how it changed in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/merge_photos.html--GETME\" title='merge_photos.htm'>this way<\/a>.<\/p>\n<p>In &#8220;onions of the 4th dimension&#8221; style we allow you to add to an existant horizontal superimposition with another (horizontally placed to the right) should you &#8220;play your cards right&#8221; with the interactivity added for you to supply the Image URL information yourself after the &#8220;superimposition&#8221; &#8220;creep&#8221; finishes, now.  We hope you give this new work a new go.<\/p>\n<hr>\n<p id='mpgpcgt'>Previous relevant <a target=_blank title='Merging Photos via Gimp and iPhone Camera Genericization Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/merging-photos-via-gimp-and-iphone-camera-genericization-tutorial\/'>Merging Photos via Gimp and iPhone Camera Genericization Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/merge_photos.htm?image3=IMG_0085.JPG&#038;image4=IMG_0086.JPG\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Merging Photos via Gimp and iPhone Camera Genericization Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/merge_photos.gif\" title=\"Merging Photos via Gimp and iPhone Camera Genericization Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Merging Photos via Gimp and iPhone Camera Genericization Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Merging Photos via Gimp and iPhone Camera Primer Tutorial' href='#mpgpcpt'>Merging Photos via Gimp and iPhone Camera Primer Tutorial<\/a> underlying code looked very hardcoded.  That is because our image <i>onload<\/i> event logics were not written in a parameter driven approach, and so the second image had to get code separate to the first, but the fact is, there is so much the same about it, as long as you can sequence the <i>onload<\/i> events, that we would be much better off for even the two image case, to parameterize it, and in so doing, make it just as easy to have as many images as you like, as exemplified by the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/merge_photos.htm?image3=IMG_0085.JPG&#038;image4=IMG_0086.JPG\" title='Click picture'>live run<\/a> &#8220;click picture&#8221; example above, and here<font size=1> &#8230; yoo hoo!<\/font><\/p>\n<p>The way we carried this out was to add more global arrays to start with, now initializing <b>all of<\/b> &#8230;<\/p>\n<p><code><br \/>\nvar which=0;<br \/>\n<b>var widths=[0,0];<br \/>\nvar heights=[0,0];<br \/>\nvar lefts=[0,0];<\/b><br \/>\nvar prevlefttwo=0, lefttwo=0, opacity=1.0, next=3;<br \/>\n<b>var imageo=[]<\/b>, iois;<br \/>\n<b>var images=[(location.search.split('image1=')[1] ? decodeURIComponent(location.search.split('image1=')[1].split('&')[0]) : 'IMG_0085.JPG'),(location.search.split('image2=')[1] ? decodeURIComponent(location.search.split('image2=')[1].split('&')[0]) : 'IMG_0086.JPG')];<\/b><br \/>\n<\/code><\/p>\n<p> &#8230; the <i>imageo<\/i> image (HTML element) object being the most crucial, it being <b>populated via<\/b> &#8230;<\/p>\n<p><code><br \/>\nwhile ('' != (location.search.split('image' + next + '=')[1] ? decodeURIComponent(location.search.split('image' + next + '=')[1].split('&')[0]) : '')) {<br \/>\n   images.push((location.search.split('image' + next + '=')[1] ? decodeURIComponent(location.search.split('image' + next + '=')[1].split('&')[0]) : ''));<br \/>\n   widths.push(0);<br \/>\n   heights.push(0);<br \/>\n   lefts.push(0);<br \/>\n   next++;<br \/>\n}<br \/>\n<b><\/b><br \/>\nfor (iois=1; iois&lt;next; iois++) {<br \/>\n  <b>imageo.push(new Image());<\/b><br \/>\n  <i>imageo[eval(-1 + iois)].index=eval(-1 + iois);<\/i><br \/>\n  imageo[eval(-1 + iois)].src=images[eval(-1 + iois)];<br \/>\n}<br \/>\n<b><\/b><br \/>\ndowhich();<br \/>\n<\/code><\/p>\n<p> &#8230; and hope you can see that in that arrangement, we can now sequence those image <i>onload<\/i> logics, as well as parameterize this, via that <b>dowhich()<\/b> Javascript function below, after we explain one more really important concept regarding parameterization.  How about that <i>imageo[eval(-1 + iois)].index=eval(-1 + iois);<\/i> statement?  This is the way to pass information to the image <i>onload<\/i> functionality to tell that logic where it sits in the &#8220;sequence&#8221; of logics we are going to control via Javascript&#8217;s (oft used around here, and elsewhere) <a target=_blank title='Javascript setTimeout() method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_settimeout.asp'>setTimeout<\/a> timer methodology, relying on that homeground <i>imageo<\/i> array member property &#8220;index&#8221; (inspired by <a target=_blank title='Useful link' href='https:\/\/stackoverflow.com\/questions\/17578280\/how-to-pass-parameters-into-image-load-event'>this useful link<\/a>, thanks) &#8230;<\/p>\n<p><code><br \/>\n<b>function dowhich() {<br \/>\n  if (eval(0 + which) < imageo.length) {\n  imageo[which].onload = function () {\n        widths[this.index] = ('' + this.width).replace('px',''); \/\/ or 'width' if you want a special\/scaled size\n        heights[this.index] = ('' + this.height).replace('px',''); \/\/ or 'height' if you want a special\/scaled size\n        prevlefttwo=lefttwo;\n        lefts[this.index] = prevlefttwo;\n        lefttwo+=eval('' + widths[this.index]);\n        document.body.innerHTML+='<img decoding=\"async\" id=\"i' + eval(1 + this.index) + '\" src=\"' + images[this.index] + '\" style=\"position:absolute;top:0px;left:' + lefts[this.index] + 'px;width:' + widths[this.index] + 'px;height:' + heights[this.index] + 'px;opacity:' + opacity + '\"><\/img>';<br \/>\n        setTimeout(dowhich, 8);<br \/>\n    };<br \/>\n    imageo[which].src = images[which];<br \/>\n    which++;<br \/>\n  } else {<br \/>\n    lefttwo=prevlefttwo;<br \/>\n    setTimeout(creep,1500);<br \/>\n  }<br \/>\n} <\/b><br \/>\n<b><\/b><br \/>\nfunction creep() {<br \/>\n  var inext, ourlt=0, offset=0;<br \/>\n  if (lefttwo &lt;= eval(widths[0] \/ 100.0)) {<br \/>\n    lefttwo=0;<br \/>\n    opacity=0.3;<br \/>\n    document.getElementById('i1').style.opacity=opacity;<br \/>\n    for (inext=eval(-1 + next); inext&gt;=2; inext--) {<br \/>\n      document.getElementById('i' + inext).style.left=lefttwo + 'px';<br \/>\n      document.getElementById('i' + inext).style.opacity=opacity;<br \/>\n    }<br \/>\n  } else {<br \/>\n    for (inext=eval(-1 + next); inext&gt;=2; inext--) {<br \/>\n      if (inext == eval(-1 + next)) {<br \/>\n        lefttwo-=eval(prevlefttwo \/ 100.0);<br \/>\n        opacity-=eval(0.7 \/ 100.0);<br \/>\n        document.getElementById('i1').style.opacity=opacity;<br \/>\n        document.getElementById('i' + inext).style.left=lefttwo + 'px';<br \/>\n        document.getElementById('i' + inext).style.opacity=opacity;<br \/>\n        offset+=widths[eval(-1 + inext)];<br \/>\n      } else {<br \/>\n        ourlt=(0 - eval(lefts[eval(-1 + inext)] \/ 100.0));<br \/>\n        document.getElementById('i' + inext).style.left=eval(ourlt + eval(document.getElementById('i' + inext).style.left.replace('px',''))) + 'px';<br \/>\n        document.getElementById('i' + inext).style.opacity=opacity;<br \/>\n      }<br \/>\n    }<br \/>\n    setTimeout(creep, 200);<br \/>\n  }<br \/>\n}<br \/>\n<\/code><\/p>\n<p>Here is the amended HTML Javascript you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/merge_photos.html-GETME\" title='merge_photos.html-GETME'>merge_photos.htm<\/a> and how it changed in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/merge_photos.html-GETME\" title='merge_photos.htm'>this way<\/a>.<\/p>\n<hr>\n<p id='mpgpcpt'>Previous relevant <a target=_blank title='Merging Photos via Gimp and iPhone Camera Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/merging-photos-via-gimp-and-iphone-camera-primer-tutorial\/'>Merging Photos via Gimp and iPhone Camera 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\/HTMLCSS\/merge_photos.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Merging Photos via Gimp and iPhone Camera Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/merge_photos.jpg\" title=\"Merging Photos via Gimp and iPhone Camera Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Merging Photos via Gimp and iPhone Camera Primer Tutorial<\/p><\/div>\n<p>Mobile devices are great for the taking of photographs out and about.  These mobile devices, such as the iPhone, have loads of Sharing options, and our most used method here is Mail (ie. email).  Download the email attachments to your &#8220;work&#8221; laptop, ours a MacBook Pro, and there is where &#8220;the fun&#8221; regarding orientation, can often surprise.  At first we followed these procedures after downloading two iPhone photos of some trees.<\/p>\n<ul>\n<li>opened images (ie. photos) with Mac OS X Preview desktop application, and they appeared correctly orientated, so used it to Save As to \/Applications\/MAMP\/htdocs\/ which is Document Root for our <a target=_blank title='MAMP' href='http:\/\/mamp.info'>MAMP<\/a> HTTP:\/\/localhost:8888\/ for both images<\/li>\n<li>wrote today&#8217;s new web application <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/merge_photos.html_GETME\" title='merge_photos.html'>merge_photos.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/merge_photos.html\" title='Click picture'>live run<\/a> accessing the two images above and found that the images were rotated 90 degrees clockwise, wrongly<\/li>\n<\/ul>\n<p> &#8230; so &#8230; take two &#8230; involve <a target=_blank href='http:\/\/www.gimp.org' title='Gimp, or GIMP'>Gimp<\/a> &#8230; remember <a title='Photo Album Email with Gimp and Paintbrush Primer Tutorial' href='#paegppt'>Photo Album Email with Gimp and Paintbrush Primer Tutorial<\/a> &#8230;<\/p>\n<blockquote cite='https:\/\/www.rjmprogramming.com.au\/ITblog\/photo-album-email-with-gimp-and-paintbrush-primer-tutorial\/'><p>\nthe best image editor to open this big file with is Gimp (by a long stretch) &#8230; it detects <a target=_blank title='Exchangeable Image File Format' href='http:\/\/en.wikipedia.org\/wiki\/Exchangeable_image_file_format'>EXIF<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/PhotoAlbumEmail\/PhotoAlbum_Scan-51of.jpg\" title='Gimp detects EXIF ... Paintbrush does not'>settings<\/a> and offers to rotate the image to its proper orientation, and will always show it fitting into the screen you have (ready to be sliced up?) &#8230; while Paintbrush leaves a huge image running off the screen\n<\/p><\/blockquote>\n<ul>\n<li>opened images (ie. photos) with Mac OS X Gimp desktop application, and as they opened we were offered the chance to Rotate the images to their EXIF information orientation, so did this Rotation, then used it to Save As to \/Applications\/MAMP\/htdocs\/ which is Document Root for our <a target=_blank title='MAMP' href='http:\/\/mamp.info'>MAMP<\/a> HTTP:\/\/localhost:8888\/ for both images<\/li>\n<li>retried today&#8217;s web application <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/merge_photos.html_GETME\" title='merge_photos.html'>merge_photos.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/merge_photos.html\" title='Click picture'>live run<\/a> accessing the two images above and found that the image orientation was better<\/li>\n<\/ul>\n<p>So what is this very simple web application doing.  At this early stage, all we are starting off doing is to &#8230;<\/p>\n<ul>\n<li>take two images<\/li>\n<li>horizontally align the two at the start<\/li>\n<li>make the right hand image gradually move over the top of the left hand image &#8230; and while moving this way &#8230;<\/li>\n<li>as the movement occurs, reduce the <i>opacity<\/i> (that starts as 1.0) of both left and right images to eventually become 0.3 at the end of the &#8220;overlaying&#8221; movements<\/li>\n<\/ul>\n<p>Simple, huh?!  You get results such as shown in today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/merge_photos.jpg\" title='Tutorial picture'>tutorial picture<\/a> of &#8220;merged photos&#8221; and these effects can be quite interesting.  Given the same camera used for the images concerned, you can probably not have to worry about different sized images here, which would &#8220;cruel&#8221; this web application&#8217;s simplicity, though down the track we may have to cater for this scenario, regarding plans for the future, here.  But we will be returning to explore more <a target=_blank title='Overlay' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tagoverlay'><i>&#8220;overlay&#8221;<\/i><\/a> thoughts here, as time goes on.<\/p>\n<hr>\n<p id='paegppt'>Previous relevant <a target=_blank title='Photo Album Email with Gimp and Paintbrush Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/photo-album-email-with-gimp-and-paintbrush-primer-tutorial\/'>Photo Album Email with Gimp and Paintbrush Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/PhotoAlbumEmail\/\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Image Fits in Gimp and Paintbrush Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Mac\/PhotoAlbumEmail\/PhotoAlbum_Scan-65of.jpg\" title=\"Photo Album Email with Gimp and Paintbrush Primer Tutorial\"    \/><\/a><p class=\"wp-caption-text\">Photo Album Email with Gimp and Paintbrush Primer Tutorial<\/p><\/div>\n<p>Were you surprised with our tutorial <a target=_blank title='Image Fits in Gimp and Paintbrush Primer Tutorial' href='#ifigappt'>Image Fits in Gimp and Paintbrush Primer Tutorial<\/a> as shown below, where Paintbrush ended up being a better option for an image editing job than Gimp, which we also use a lot here at this blog?<\/p>\n<p>Find myself, though am no graphic &#8220;artist&#8221;, really, that an open mind about image editing decisions is good.<\/p>\n<p>Take today&#8217;s job, on a MacBook Pro laptop (desktop) using Mac OS X (Yosemite), of taking a Photo Album set of four photos and being able to end up sending one of them as an attachment in an email.  By the way the Photo Album is a real book &#8230; gasp!<\/p>\n<p>There were several issues &#8230; aren&#8217;t there always? &#8230;<\/p>\n<ul>\n<li>the MacBook Pro laptop is <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/PhotoAlbumEmail\/PhotoAlbum_Scan-19of.jpg\" title='Set up'>hooked up<\/a> to our HP Printer (Hewlett Packard Deskjet 2050 J510 series) via a USB lead and we start up via System Preferences&#8230;-&gt;Printers &amp; Scanners button-&gt;Scan tab-&gt;Open scanner button<\/li>\n<li>after a few &#8220;garden path&#8221; moments, should have known, but &#8230; doh! &#8230; if there are rotations involved in a process, and you have the choice of two places to apply that rotation, find 90% of the time it is best to make use of the first opportunity to do it &#8230; but with the HP Scanner used, this involved non-default format decisions &#8230; you&#8217;ll see that with the final <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/PhotoAlbumEmail\/PhotoAlbum_Scan-48of.jpg\" title='Set up'>scan settings<\/a> settled upon<\/li>\n<li>it is pretty fanciful to think you will get resolution back once you ever do a step to relinquish it (ie. only relinquish it, as needed, right at the end such as when saving as a Jpeg file and you can pick a resolution of save), so it is probably good to decide to scan a Photo Album (old) photo with maximum <a target=_blank title='Dots per inch information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/Dots_per_inch'>dpi<\/a> setting &#8230; which was 1200 for us &#8230; but results in a file more than 15mB big &#8230; unless you are really short of diskspace, don&#8217;t panic &#8230; we fix things later regarding file size<\/li>\n<li>the best image editor to open this big file with is Gimp (by a long stretch) &#8230; it detects <a target=_blank title='Exchangeable Image File Format' href='http:\/\/en.wikipedia.org\/wiki\/Exchangeable_image_file_format'>EXIF<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/PhotoAlbumEmail\/PhotoAlbum_Scan-51of.jpg\" title='Gimp detects EXIF ... Paintbrush does not'>settings<\/a> and offers to rotate the image to its proper orientation, and will always show it fitting into the screen you have (ready to be sliced up?) &#8230; while Paintbrush leaves a huge image running off the screen<\/li>\n<li>personal preference from here, for me, was to copy the quarter of the image with my photo of interest and copy this to the clipboard via Gimp&#8217;s (or lots of application&#8217;s) Edit-&gt;Copy (after selecting area of interest, with the Rectangular Select option)<\/li>\n<li>open Paintbrush with File-&gt;New from Clipboard<\/li>\n<li>use Paintbrush Image-&gt;Image Size&#8230; with 10% 10% resizing<\/li>\n<li>use Paintbrush File-&gt;Save As&#8230; to save to a Jpeg file of about 50% density &#8230; voila &#8230; manageably small file 33kB<\/li>\n<li>open Finder and right-click-ize <a target=_blank title='The resultant photo' href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/PhotoAlbumEmail\/One_We_Want.jpg\">it<\/a> (double finger down gesture) to pick the Share-&gt;Mail option &#8230; opens Mail, with your photo attached in a fresh new email, ready for you to construct your email<\/li>\n<\/ul>\n<p>Please enjoy today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/PhotoAlbumEmail\/\" title='Click picture'>tutorial<\/a>.<\/p>\n<hr \/>\n<p id='ifigappt'>Previous relevant <a target=_blank title='Image Fits in Gimp and Paintbrush Primer Tutorial' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=12600'>Image Fits in Gimp and Paintbrush Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a id='myva' onclick=\"window.open('http:\/\/www.rjmprogramming.com.au\/PHP\/video_generic.php?filen=ImageFit_Paintbrush&#038;pat=Mac\/&#038;dom=http:\/\/www.rjmprogramming.com.au:80\/','_blank','top=500,left=20,width=900,height=400');\" target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/video_generic.php?filen=ImageFit_Gimp&#038;pat=Mac\/&#038;dom=http:\/\/www.rjmprogramming.com.au:80\/\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Image Fits in Gimp and Paintbrush Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Mac\/ImageFit.jpg\" title=\"Image Fits in Gimp and Paintbrush Primer Tutorial\"    \/><\/a><p class=\"wp-caption-text\">Image Fits in Gimp and Paintbrush Primer Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s tutorial <a target=_blank title='Xcode Swift Image Assets Primer Tutorial' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=12571'>Xcode Swift Image Assets Primer Tutorial<\/a> needed lots of image &#8220;fitting&#8221; to go on <strike>man<\/strike> person.  On a Mac desktop with a MacBook Pro laptop, we find (Mac) Paintbrush to be that little bit friendlier than Gimp to use for this particular job if you have those two images as per &#8230;<\/p>\n<blockquote>\n<ul>\n<li>make one image about 1024&#215;768 that you find apt<\/li>\n<li>make one image about 200&#215;200 that you find apt<\/li>\n<\/ul>\n<\/blockquote>\n<p> &#8230; already existant.  You&#8217;d have to play our videos <a id='myva2' onclick=\"window.open('http:\/\/www.rjmprogramming.com.au\/PHP\/video_generic.php?filen=ImageFit_Paintbrush&#038;pat=Mac\/&#038;dom=http:\/\/www.rjmprogramming.com.au:80\/','_blank','top=500,left=20,width=900,height=400');\" target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/video_generic.php?filen=ImageFit_Gimp&#038;pat=Mac\/&#038;dom=http:\/\/www.rjmprogramming.com.au:80\/\">today<\/a> to see that extra default panning ability of Paintbrush to see what we mean, but when you can crop and fit all at the same time this is quite advantageous, but am not saying in Gimp you can&#8217;t do this, it is just that it is not the default in Gimp, and when you are doing a lot of something, that small difference can have quite an <a target=_blank title='effect versus affect' href='http:\/\/web.ku.edu\/~edit\/affect.html'>effect<\/a>.<\/p>\n<p>So the three images involved were &#8230;<\/p>\n<ul>\n<li><img decoding=\"async\" alt=\"Image Fits in Gimp and Paintbrush Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Mac\/1024_768.png\" title=\"1024x768 original\"    \/><\/li>\n<li><img decoding=\"async\" alt=\"Image Fits in Gimp and Paintbrush Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Mac\/300_300_gimp.png\" title=\"300x300 derived via Gimp\"    \/><\/li>\n<li><img decoding=\"async\" alt=\"Image Fits in Gimp and Paintbrush Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Mac\/300_300_paintbrush.png\" title=\"300x300 derived via Paintbrush\"    \/><\/li>\n<\/ul>\n<p>If you want to read about the video player program today, please consult <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=10511' title='PHP\/Javascript Media Synchronize Cross Browser Tutorial'>PHP\/Javascript Media Synchronize Cross Browser Tutorial<\/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='#d12600' onclick='var dv=document.getElementById(\"d12600\"); 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='d12600' 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='#d12600' onclick='var dv=document.getElementById(\"d12600\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=paintbrush\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d12600' 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='#d31755' onclick='var dv=document.getElementById(\"d31755\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/gimp\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d31755' 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='#d32233' onclick='var dv=document.getElementById(\"d32233\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/genericization\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d32233' 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='#d32278' onclick='var dv=document.getElementById(\"d32278\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/face\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d32278' 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='#d32292' onclick='var dv=document.getElementById(\"d32292\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/email\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d32292' 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='#d32352' onclick='var dv=document.getElementById(\"d32352\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/animation\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d32352' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We&#8217;ve got a bit of animation going on with the latest installment of our &#8220;Merging Photos&#8221; blog posting thread, building on our previous Merging Photos via Gimp and iPhone Camera Sharing Tutorial &#8230; the updated live run shows the usage &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/merging-photos-via-gimp-and-iphone-camera-animation-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":[4,12,14,37],"tags":[75,84,103,183,184,214,281,319,2313,360,380,381,406,2214,1839,491,576,587,590,634,652,738,764,2281,849,1968,870,889,894,1886,1738,929,997,1072,1137,2312,1226,1319,1404,1433],"class_list":["post-32352","post","type-post","status-publish","format-standard","hentry","category-animation","category-elearning","category-event-driven-programming","category-tutorials","tag-anatomy","tag-animation-2","tag-array","tag-camera","tag-canvas","tag-clipboard","tag-css","tag-desktop","tag-doppelganger","tag-download","tag-email","tag-email-client","tag-exif","tag-face","tag-genericization","tag-gimp","tag-html","tag-iframe","tag-image","tag-iphoto","tag-javascript","tag-mail","tag-member","tag-merge","tag-object","tag-onions","tag-onload","tag-orientation","tag-overlay","tag-parameter","tag-photo","tag-photograph","tag-programming","tag-rotation","tag-sharing","tag-superimpose","tag-svg","tag-tutorial","tag-web-browser","tag-window-open"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/32352"}],"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=32352"}],"version-history":[{"count":8,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/32352\/revisions"}],"predecessor-version":[{"id":32408,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/32352\/revisions\/32408"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=32352"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=32352"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=32352"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}