{"id":56936,"date":"2022-10-01T03:01:38","date_gmt":"2022-09-30T17:01:38","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=56936"},"modified":"2022-09-30T19:13:15","modified_gmt":"2022-09-30T09:13:15","slug":"pdf-image-and-text-nodes-canvas-scaling-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/pdf-image-and-text-nodes-canvas-scaling-tutorial\/","title":{"rendered":"PDF Image and Text Nodes Canvas Scaling Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/pdfimageplustext.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"PDF Image and Text Nodes Canvas Scaling Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/canvas_scaling.gif\" title=\"PDF Image and Text Nodes Canvas Scaling Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">PDF Image and Text Nodes Canvas Scaling Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='PDF Image and Text Nodes Absolute Image URL Tutorial' href='#pdfitnaiurlt'>PDF Image and Text Nodes Absolute Image URL Tutorial<\/a> got us to thinking about the idea that the image you select as a backdrop to your PDF A4 Portrait or Landscape page may not suit with the dimensions it has to start with.  So what if we add the equivalent of &#8230;<\/p>\n<ul>\n<li>Zoom In<\/li>\n<li>Zoom Out<\/li>\n<li>Actual Size<\/li>\n<\/ul>\n<p> &#8230; means by which we can call into play <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/pdfimageplustext.php-----------------------------GETME\">our changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/pdfimageplustext.php-----------------------------GETME\">pdfimageplustext.php<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/pdfimageplustext.php\" title=\"Click picture\">Image and Text PDF creator<\/a> PHP web application&#8217;s &#8220;behind the scenes&#8221; <a target=_blank title='HTML Canvas element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ref_canvas.asp'>canvas<\/a> element to help out.  After all, the canvas element has great functionality for transformations, and to scale an image is a transformation.<\/p>\n<p>Below is relevant new (stage 2 relevant) HTML &#8230;<\/p>\n<p><code><br \/>\n&lt;button title='Zoom In' onclick=zoomin();&gt;+&lt;\/button&gt;&amp;nbsp;&lt;button title='Zoom Out' onclick=zoomout();&gt;-&lt;\/button&gt;&amp;nbsp;&lt;button title='Actual Size' onclick=zoomone();&gt;=&lt;\/button&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; and Javascript &#8230;<\/p>\n<p><code><br \/>\nfunction zoomin() {<br \/>\n     scaleim(eval(curfactor * 1.1));<br \/>\n}<br \/>\n<br \/>\nfunction zoomout() {<br \/>\n     scaleim(eval(curfactor \/ 1.1));<br \/>\n}<br \/>\n<br \/>\nfunction zoomone() {<br \/>\n  if (Math.abs(eval(1.0 - eval('' + curfactor))) > 0.0001) {<br \/>\n     scaleim(1.0);<br \/>\n  }<br \/>\n}<br \/>\n<br \/>\nfunction scaleim(towhat) {<br \/>\n<br \/>\nmycanvas = document.getElementById('canvas');<br \/>\nctx = mycanvas.getContext('2d');<br \/>\nmyimg = new Image;<br \/>\nmyimg.onload = function() {<br \/>\n  var ow=myimg.width;<br \/>\n  var oh=myimg.height;<br \/>\n  mycanvas.width=eval(myimg.width * towhat \/ curfactor);<br \/>\n  mycanvas.height=eval(myimg.height * towhat \/ curfactor);<br \/>\n  mycanvas.style.width='' + eval(myimg.width * towhat \/ curfactor) + 'px';<br \/>\n  mycanvas.style.height='' + eval(myimg.height * towhat \/ curfactor) + 'px';<br \/>\n  if (document.getElementById('tsiz')) {<br \/>\n  ctx.font = '' + document.getElementById('tsiz').value.trim() + 'px ' + document.getElementById('tfam').value.trim();<br \/>\n  }<br \/>\n  if (document.getElementById('tcol')) {<br \/>\n  ctx.fillStyle='' + document.getElementById('tcol').value.trim();<br \/>\n  }<br \/>\n  ctx.drawImage(myimg,0,0,ow,oh,0,0,mycanvas.width,mycanvas.height); \/\/ Or at whatever offset you like<br \/>\n  \/\/alert(564);<br \/>\n         awonow=mycanvas.toDataURL('image\/jpeg');<br \/>\n         sofarso=sofarso.replace(awowatchsofar, awonow);<br \/>\n         awowatchsofar=awonow;<br \/>\n         datauri=awonow;<br \/>\n         if (actualuri == '') { actualuri=datauri; }<br \/>\n         datauris[0]=datauri;<br \/>\n         document.getElementById('slideshow').value=awonow;<br \/>\n         document.body.style.backgroundImage='url(' + awonow + ')';<br \/>\n         if (document.getElementById('inimg')) {<br \/>\n           document.getElementById('inimg').style.width='' + eval(mycanvas.width * towhat \/ curfactor) + 'px';<br \/>\n           document.getElementById('inimg').style.height='' + eval(mycanvas.height * towhat \/ curfactor) + 'px';<br \/>\n           document.getElementById('inimg').width=eval(mycanvas.width * towhat \/ curfactor);<br \/>\n           document.getElementById('inimg').height=eval(mycanvas.height * towhat \/ curfactor);<br \/>\n           document.getElementById('inimg').src=awonow;<br \/>\n         }<br \/>\n         curfactor=eval('' + towhat);<br \/>\n  document.getElementById('dimap').innerHTML=\\\"&lt;img id=imimg style='z-index:99;visibility:visible;position:absolute;top:0px;left:0px;' src='\\\" + datauri + \\\"' width='\\\" + mycanvas.width + \\\"' height='\\\" + mycanvas.height + \\\"' alt='Map' usemap='#immap'>&lt;map name='immap' id='immap'>&lt;area data-onclick='areaclick=true;' shape='default' nohref alt='' \/>&lt;\/map>\\\";<br \/>\n};<br \/>\nif (Math.abs(eval(1.0 - eval('' + towhat))) &lt; 0.0001) {<br \/>\nmyimg.src = actualuri;<br \/>\n} else {<br \/>\nmyimg.src = document.getElementById('slideshow').value;<br \/>\n}<br \/>\n<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; code regarding this useful functionality improvement, today.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/pdf-image-and-text-nodes-canvas-scaling-tutorial\/'>PDF Image and Text Nodes Canvas Scaling Tutorial<\/a>.<\/p-->\n<hr>\n<p id='pdfitnaiurlt'>Previous relevant <a target=_blank title='PDF Image and Text Nodes Absolute Image URL Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/pdf-image-and-text-nodes-absolute-image-url-tutorial\/'>PDF Image and Text Nodes Absolute Image URL Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/pdfimageplustext.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"PDF Image and Text Nodes Absolute Image URL Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/absolute_url_integration.gif\" title=\"PDF Image and Text Nodes Absolute Image URL Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">PDF Image and Text Nodes Absolute Image URL Tutorial<\/p><\/div>\n<p>Regarding yesterday&#8217;s <a title='PDF Image and Text Nodes Relative URL Integration Tutorial' href='#pdfitnrurlit'>PDF Image and Text Nodes Relative URL Integration Tutorial<\/a> &#8230;<\/p>\n<blockquote><p>\nYeh, yeh, yeh!<br \/>\nRelative smellative!<br \/>\nWhat about Absolute?\n<\/p><\/blockquote>\n<p>Well, true enough, but the user here, must consider plagiarism and content appropriation wrongdoings here, and that is why we leave this idea to late in the piece, and not exactly advertise its use as you use <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/pdfimageplustext.php\" title=\"Click picture\">this inhouse PHP web application<\/a>.  As well as the fact that most absolute image URLs will fail if you enter them into the &#8220;middle management&#8221; textbox you can see in action with today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/absolute_url_integration.gif\" title=\"Tutorial picture\">animated GIF presentation<\/a>.  Nevertheless, some absolute image URLs can be entered into that textbox and form the backdrop of your PDF creation now with <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/pdfimageplustext.php----------------------------GETME\">a changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/pdfimageplustext.php----------------------------GETME\">pdfimageplustext.php<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/pdfimageplustext.php\" title=\"Click picture\">Image and Text PDF creator<\/a> PHP web application.<\/p>\n<p>The new PHP to do this uses a call to itself, in an iframe, to &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\nif (isset($_GET['aburl'])) {<br \/>\n  $imdata=str_replace('+',' ',urldecode($_GET['aburl']));<br \/>\n  $jmdata='';<br \/>\n  $kmdata='';<br \/>\n  if ($imdata != '') {<br \/>\n    if (strpos(('~' . $imdata), '~\/\/') !== false) {<br \/>\n      $jmdata=file_get_contents('http:' . $imdata);<br \/>\n    } else if (strpos(strtolower(('~' . $imdata)), '~https:') !== false) {<br \/>\n      $jmdata=file_get_contents('http:' . substr($imdata, 6));<br \/>\n    } else {<br \/>\n      $jmdata=file_get_contents($imdata);<br \/>\n    }<br \/>\n    if ($jmdata != '') {<br \/>\n      $kmdata='data:image\/' . str_replace('jpg','jpeg',strtolower(explode('.',$imdata)[-1 + sizeof(explode('.',$imdata))])) . ';base64,' . base64_encode($jmdata);<br \/>\n      echo '&lt;html&gt;&lt;body onload=\" parent.document.getElementById(' . \"'iurl'\" . ').value=' . \"'\" . $kmdata . \"'\" . '; \"&gt;&lt;\/body&gt;&lt;\/html&gt;';<br \/>\n    }<br \/>\n  }<br \/>\n  exit;<br \/>\n}<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/pdf-image-and-text-nodes-absolute-image-url-tutorial\/'>PDF Image and Text Nodes Absolute Image URL Tutorial<\/a>.<\/p-->\n<hr>\n<p id='pdfitnrurlit'>Previous relevant <a target=_blank title='PDF Image and Text Nodes Relative URL Integration Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/pdf-image-and-text-nodes-relative-url-integration-tutorial\/'>PDF Image and Text Nodes Relative URL Integration Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/pdfimageplustext.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"PDF Image and Text Nodes Relative URL Integration Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/relative_url_integration.jpg\" title=\"PDF Image and Text Nodes Relative URL Integration Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">PDF Image and Text Nodes Relative URL Integration Tutorial<\/p><\/div>\n<p>Progressing with improved integrations, on top of the work of yesterday&#8217;s <a title='PDF Image and Text Nodes Annotations Tutorial' href='#pdfitnat'>PDF Image and Text Nodes Annotations Tutorial<\/a>, today, we&#8217;re revisiting our Relative URL software integration you can read previous progress regarding, with <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/image-and-text-multiple-pdf-relative-url-tutorial\/'>Image and Text Multiple PDF Relative URL Tutorial<\/a>.<\/p>\n<p>Then, its integration &#8230;<\/p>\n<ul>\n<li>just supplied relative URL strings &#8230; but today, we integrate by &#8230;<\/li>\n<li>allowing user to click a found thumbnail image of a found Relative URL (ie. on RJM Programming domain) image as the backdrop to a PDF creation<\/li>\n<\/ul>\n<p>In order to do this we set up the stage 1 hierarchy &#8230;<\/p>\n<ul>\n<li>window.top grandparent (regarding <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/pdfimageplustext.php---------------------------GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/pdfimageplustext.php---------------------------GETME\">pdfimageplustext.php<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/pdfimageplustext.php\" title=\"Click picture\">Image and Text PDF<\/a> PHP web application), which receives relative URL information (from child below), and proceeds onto stage 2 processing &#8230; supervises &#8230;<\/li>\n<li>window.parent parent PHP (regarding <a target=_blank title='find_images_via_size.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/find_images_via_size.php---------GETME'>the changed<\/a> <a target=_blank title='find_images_via_size.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/find_images_via_size.php---------GETME'>find_images_via_size.php<\/a> (we&#8217;d now like you to download to <a target=_blank title='MAMP' href='http:\/\/www.mamp.info'>MAMP<\/a> Document Root PHP folder) <a target=_blank title='Helper' href='http:\/\/www.rjmprogramming.com.au\/PHP\/find_images_via_size.php'>web application<\/a>) where the user specifies image find criteria, and specific to this arrangement &#8230; it now happens that &#8230;<\/li>\n<li>window.self child PHP  (regarding <a target=_blank title='find_images_via_size.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/find_images_via_size.php---------GETME'>the same changed<\/a> <a target=_blank title='find_images_via_size.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/find_images_via_size.php---------GETME'>find_images_via_size.php<\/a> <a target=_blank title='Helper' href='http:\/\/www.rjmprogramming.com.au\/PHP\/find_images_via_size.php'>web application<\/a>) is now hosted in a window.parent parent based iframe, and is where a user can click and select an interesting found image of interest, and allowing for direct communication with window.top grandparent<\/li>\n<\/ul>\n<p> &#8230; involving changed <font color=blue>condition specific PHP<\/font> as per &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n$fps=\"\";<br \/>\n$tb=\"\";<br \/>\n$thash=\"\";<br \/>\n$onebad=\"youllneverfind\" . \"this\";<br \/>\n$twobad=\"youllneverfind\" . \"this\";<br \/>\n$threebad=\"youllneverfind\" . \"this\";<br \/>\n$fourbad=\"youllneverfind\" . \"this\";<br \/>\n$onebadx=\"youllneverfind\" . \"this\";<br \/>\n$twobadx=\"youllneverfind\" . \"this\";<br \/>\n$threebadx=\"youllneverfind\" . \"this\";<br \/>\n$fourbadx=\"youllneverfind\" . \"this\";<br \/>\n$fivebad=\"youllneverfind\" . \"this\";<br \/>\n$sixbad=\"youllneverfind\" . \"this\";<br \/>\n$onl=\"\";<br \/>\n$oncl=\"\";<br \/>\n$onclg=\"\";<br \/>\n$deforder=\"&lt;option value='-5'&gt;Preview every change for 5 seconds&lt;\/option&gt;&lt;option value='0'&gt;Do no previewing of changes&lt;\/option&gt;\";<br \/>\n$onclf=\"\";<br \/>\n$previewif=\"&lt;br&gt;&lt;iframe name=preview id=preview style=display:none;&gt;&lt;\/iframe&gt;\";<br \/>\n<br \/>\n<font color=blue>if (isset($_GET['fillps'])) {<br \/>\n  $fps='&lt;input type=hidden name=fillps value=y&gt;&lt;\/input&gt;';<br \/>\n  $oncl=' onclick=\" if (window.parent && parent.document.getElementById(' . \"'\" . 'spreview' . \"'\" . ')) {   top.document.getElementById(' . \"'\" . 'iurl' . \"'\" . ').value=this.getAttribute(' . \"'\" . 'data-href' . \"'\" . ');  top.document.getElementById(' . \"'\" . 'slideshow' . \"'\" . ').value=this.getAttribute(' . \"'\" . 'data-href' . \"'\" . '); this.target=' . \"'\" . 'sspreview' . \"'\" . ';  } else if (window.opener) {  window.opener.top.document.getElementById(' . \"'\" . 'slideshow' . \"'\" . ').value=this.href;    } else { top.document.getElementById(' . \"'\" . 'slideshow' . \"'\" . ').value=this.href; } \"';<br \/>\n  $onclg='fillps=y&';<br \/>\n  $tb=\"target=sspreview\\t\";<br \/>\n  $onebad=\"href=.\/\";<br \/>\n  $twobad=\"href=.\/PHP\/\";<br \/>\n  $threebad=\"&gt;.\/\";<br \/>\n  $fourbad=\"&gt;.\/PHP\/\";<br \/>\n  $onebadx=\"href=..\/\";<br \/>\n  $twobadx=\"href=\/\";<br \/>\n  $threebadx=\"&gt;..\/\";<br \/>\n  $fourbadx=\"&gt;\/\";<br \/>\n  $thash=\"data-\";<br \/>\n  $fivebad=$_SERVER['DOCUMENT_ROOT'];<br \/>\n  $sixbad=\"\";<br \/>\n  $deforder=\"&lt;option value='0'&gt;Do no previewing of changes&lt;\/option&gt;&lt;option value='-5'&gt;Preview every change for 5 seconds&lt;\/option&gt;\";<br \/>\n  $onclf=\"&lt;input id=fillps name=fillps type=hidden value=y&gt;&lt;\/input&gt;\";<br \/>\n  if ($onl == '') { $onl=' onload=\"postxit();\"';  }<br \/>\n}<\/font><br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/pdf-image-and-text-nodes-relative-url-integration-tutorial\/'>PDF Image and Text Nodes Relative URL Integration Tutorial<\/a>.<\/p-->\n<hr>\n<p id='pdfitnat'>Previous relevant <a target=_blank title='PDF Image and Text Nodes Annotations Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/pdf-image-and-text-nodes-annotations-tutorial\/'>PDF Image and Text Nodes Annotations Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/pdfimageplustext.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"PDF Image and Text Nodes Annotations Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/annotations_signatues.gif\" title=\"PDF Image and Text Nodes Annotations Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">PDF Image and Text Nodes Annotations Tutorial<\/p><\/div>\n<p>Modular software is good, in the sense that &#8230;<\/p>\n<ul>\n<li>jobs developing the software can be compartmentalized<\/li>\n<li>jobs developing the software can involve specalized skills<\/li>\n<li>software components do not get too big and unwieldy<\/li>\n<\/ul>\n<p> &#8230; and so when we felt, with yesterday&#8217;s <a title='PDF Image and Text Nodes and Lines and Rectangles Tutorial' href='#pdfitnlrt'>PDF Image and Text Nodes and Lines and Rectangles Tutorial<\/a> &#8230;<\/p>\n<blockquote><p>\nLines and Rectangles are good &#8230; but &#8230;\n<\/p><\/blockquote>\n<p> &#8230; <b>&#8220;other forms of annotation would be better&#8221;<\/b>!  And yes, that&#8217;s true, but not if it compromises the efficacy of the existing <i>&#8220;PDF Image and Text Nodes (and Lines and Rectangles) Creator&#8221;<\/i> PHP web application.  Rather than reinventing an &#8220;annotation wheel&#8221; we&#8217;re turning towards &#8230;<\/p>\n<ul>\n<li>integrating &#8230; with &#8230;<\/li>\n<li>existing <i>inhouse<\/i> canvas based Annotation Menu web application &#8230; <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/user_of_signature_signature.html---------------GETME\" title=\"user_of_signature_signature.htm\">user_of_signature_signature.htm<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/user_of_signature_signature.htm\" title=\"user_of_signature_signature.htm\">canvas annotator<\/a> (we&#8217;d now like you to download to MAMP Document Root HTMLCSS folder, as well as <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/signature_signature.html-------------GETME\">signature_signature.html<\/a> and <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/signature_signature.js----------------------------------------GETME\">signature_signature.js<\/a>)<\/li>\n<\/ul>\n<p> &#8230; we&#8217;ve developed in the past, about which you can read at <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/emoji-borders-and-backgrounds-canvas-annotation-tutorial\/' title='Emoji Borders and Backgrounds Canvas Annotation Tutorial'>Emoji Borders and Backgrounds Canvas Annotation Tutorial<\/a>, regarding functionality to enable &#8220;scribble&#8221; based canvas signature creation, as well as several discrete click based shape and text and image annotation functionalities, all allowing for opacity control, to aid with overlay ideas.  Now that could be useful, we figure.  And luckily, we&#8217;ve integrated this functionality before, and used a &#8230;<\/p>\n<ul>\n<li>window.opener look, at the existing <i>inhouse<\/i> canvas based Annotation Menu web application, for a parent integrator &#8230; for which &#8230;<\/li>\n<li>a canvas element data interchange happens<\/li>\n<\/ul>\n<p> &#8230; and we add to that unchanged &#8220;existing <i>inhouse<\/i> canvas based Annotation Menu web application&#8221; arrangement, (<a target=_blank title='Javascript setTimeout() method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_settimeout.asp'>setTimeout<\/a> timer) parent checking &#8230;<\/p>\n<p><code><br \/>\nfunction awowatch() {<br \/>\n  if (awo) {<br \/>\n    if (!awo.closed) {<br \/>\n      var awonow=awo.document.getElementById('topcanvas').toDataURL('image\/jpeg');<br \/>\n      if (awowatchsofar != awonow) {<br \/>\n         sofarso=sofarso.replace(awowatchsofar, awonow);<br \/>\n         awowatchsofar=awonow;<br \/>\n         datauri=awonow;<br \/>\n         datauris[0]=datauri;<br \/>\n         document.getElementById('slideshow').value=awonow;<br \/>\n         document.body.style.backgroundImage='url(' + awonow + ')';<br \/>\n         if (document.getElementById('inimg')) {<br \/>\n           document.getElementById('inimg').src=awonow;<br \/>\n         }<br \/>\nmycanvas = document.getElementById('canvas');<br \/>\nctx = mycanvas.getContext('2d');<br \/>\nmyimg = new Image;<br \/>\nmyimg.onload = function() {<br \/>\n  mycanvas.width=myimg.width;<br \/>\n  mycanvas.height=myimg.height;<br \/>\n  mycanvas.style.width='' + myimg.width + 'px';<br \/>\n  mycanvas.style.height='' + myimg.height + 'px';<br \/>\n  ctx.font = '' + document.getElementById('tsiz').value.trim() + 'px ' + document.getElementById('tfam').value.trim();<br \/>\n  ctx.fillStyle='' + document.getElementById('tcol').value.trim();<br \/>\n  ctx.drawImage(myimg,0,0); \/\/ Or at whatever offset you like<br \/>\n  \/\/alert(564);<br \/>\n  document.getElementById('dimap').innerHTML=\\\"&lt;img id=imimg style='z-index:99;visibility:visible;position:absolute;top:0px;left:0px;' src='\\\" + datauri + \\\"' width='\\\" + myimg.width + \\\"' height='\\\" + myimg.height + \\\"' alt='Map' usemap='#immap'&gt;&lt;map name='immap' id='immap'&gt;&lt;area data-onclick='areaclick=true;' shape='default' nohref alt='' \/&gt;&lt;\/map&gt;\\\";<br \/>\n};<br \/>\nmyimg.src = document.getElementById('slideshow').value;<br \/>\n    console.log('changed ');<br \/>\n      }<br \/>\n      setTimeout(awowatch, 5000);<br \/>\n    console.log('ongoing ' + (awonow + '...............................').substring(0,19));<br \/>\n    } else {<br \/>\n      awo=null;<br \/>\n    console.log('closed');<br \/>\n    }<br \/>\n  } else {<br \/>\n    setTimeout(awowatch, 5000);<br \/>\n    console.log('null');<br \/>\n  }<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; of child canvas content, and if changed, reflect the changes in the parent canvas and document.body background image, sort of like we did with the emoji text earlier on (with <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/image-and-text-pdf-timesheet-emojis-tutorial' title='Image and Text PDF Timesheet Emojis Tutorial'>Image and Text PDF Timesheet Emojis Tutorial<\/a>), with <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/pdfimageplustext.php--------------------------GETME\">its changed, sometimes supervisory<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/pdfimageplustext.php--------------------------GETME\">pdfimageplustext.php<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/pdfimageplustext.php\" title=\"Click picture\">Image and Text PDF<\/a> PHP web application, whose &#8220;blurb&#8221; in stage 2 <font color=blue>now reads<\/font> &#8230;<\/p>\n<p>&lt;?php echo &#8221;<br \/>\n<code><br \/>\n  document.getElementById('mybody').title='<font color=blue>Click once where text to be placed in resultant PDF or more for Annotations. Can use suffix such as x 5 to repeat value on 4 clicks to follow. With dates go consult https:\/\/www.w3schools.com\/php\/func_date_date_format.asp DATE_ATOM type entries where DATE_ followed by ymd lowercase character correspondence in 2nd part means change just date via ymd means where date_ followed by hms lowercase character correspondence in 2nd part means change time via hms means where uppercase 2nd part preceeded by ymd lowercase character in 1st part means change datetime via ymd means where datE_ followed by hms lowercase character correspondence in 2nd part means change datetime via hms means. Incrementing scale can be done via ++ or -- or +=2 or -=4 types of strings before x 5 repeat definitions. An offset to DATE_ATOM type entry meaning of today & now can be achieved via no spaces between it & offset ++ or -4 type of string & optional more until string such as Tuesday. Basis date is \" . $newdts . \"<\/font>';<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<\/p>\n<p><b><i>Did you know?<\/i><\/b><\/p>\n<p>There are many favoured techniques individual programmers and organizations will have towards software integration.<\/p>\n<p>For us, being so fond of interpretive <font size=1>(you might say, substitutional)<\/font> approaches, to add to &#8230;<\/p>\n<ul>\n<li>change hardcodings to parameterized variables &#8230; we&#8217;d like to add, as exemplified in today&#8217;s work &#8230;<\/li>\n<li>the Javascript <a target=_blank title='Javascript popup boxes information from W3schools' href='https:\/\/www.w3schools.com\/js\/js_popup.asp'>popup box<\/a> escalation from <font size=1>(the kind of dumb, but informative)<\/font> alert popup box to <font size=1>(the just as informative, but also interactive, and so potentially dynamically useful to the user)<\/font> prompt popup box usage<\/li>\n<\/ul>\n<p> &#8230; <font color=blue>exemplified by<\/font> the Javascript code snippet &#8230;<\/p>\n<p><code><br \/>\n    if (eval('' + xs.length) < 3) {\n      <font color=blue>\/\/ <\/font>alert('line');<br \/>\n      <font color=blue>fans=prompt('Draw a line? ' + String.fromCharCode(10) + String.fromCharCode(10) + 'OK for line ' + String.fromCharCode(10) + 'Cancel for text ' + String.fromCharCode(10) + '+ for Annotations and Signatures Canvas Menu', '');<\/font><br \/>\n    } else {<br \/>\n      if (Math.abs(xs[0] - x) <= 0.000004) {\n      xfilledr='';\n      <font color=blue>\/\/ <\/font>alert('rectangle');<br \/>\n      <font color=blue>fans=prompt('Draw a rectangle? ' + String.fromCharCode(10) + String.fromCharCode(10) + 'OK for rectangle ' + String.fromCharCode(10) + 'Cancel for text ' + String.fromCharCode(10) + '- for lines ' + String.fromCharCode(10) + '+ for Annotations and Signatures Canvas Menu', '');<\/font><br \/>\n      } else {<br \/>\n      xfilledr='x';<br \/>\n      <font color=blue>\/\/ <\/font>alert('filled rectangle');<br \/>\n      <font color=blue>fans=prompt('Infill a rectangle? ' + String.fromCharCode(10) + String.fromCharCode(10) + 'OK for infilled rectangle ' + String.fromCharCode(10) + 'Cancel for text ' + String.fromCharCode(10) + '- for lines ' + String.fromCharCode(10) + '+ for Annotations and Signatures Canvas Menu', '');<\/font><br \/>\n      }<br \/>\n    }<br \/>\n<\/code><\/p>\n<p> &#8230; means by which we can let the user have access to the integrated Canvas Annotation functionality.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/pdf-image-and-text-nodes-annotations-tutorial\/'>PDF Image and Text Nodes Annotations Tutorial<\/a>.<\/p-->\n<hr>\n<p id='pdfitnlrt'>Previous relevant <a target=_blank title='PDF Image and Text Nodes and Lines and Rectangles Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/pdf-image-and-text-nodes-and-lines-and-rectangles-tutorial\/'>PDF Image and Text Nodes and Lines and Rectangles Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/pdfimageplustext.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"PDF Image and Text Nodes and Lines and Rectangles Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/line_rect_fpdf.jpg\" title=\"PDF Image and Text Nodes and Lines and Rectangles Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">PDF Image and Text Nodes and Lines and Rectangles Tutorial<\/p><\/div>\n<p>Onto yesterday&#8217;s <a title='PDF Image and Text Nodes Mobile Scrolling Tutorial' href='#pdfitnmst'>PDF Image and Text Nodes Mobile Scrolling Tutorial<\/a>&#8216;s progress we turn our attention back to some <a target=_blank title='Fpdf PHP class' href='HTTP:\/\/www.fpdf.org\/'>Fpdf<\/a> talents &#8230;<\/p>\n<ul>\n<li>draw lines into a PDF document &#8230; and &#8230;<\/li>\n<li>draw and\/or infill rectangles into a PDF document<\/li>\n<\/ul>\n<p> &#8230; as two ideas heading towards &#8220;some annotating talents&#8221; for our Image and Text Nodes (and now Lines and Rectangles) PDF creator PHP web application.  It was again in that onclick logic <font color>a lot of the change<\/font> was needed &#8230;<\/p>\n<p><code><br \/>\n <font color=blue>var xs=[], ys=[];<\/font><br \/>\n<br \/>\n  document.getElementById('mybody').onclick=function(e){<br \/>\n    var yes=false;<br \/>\n    if (areaclick) {<br \/>\n    areaclick=false;<br \/>\n    } else {<br \/>\n    e = e || window.event;<br \/>\n    e.preventDefault();<br \/>\n       if (!showingc) {<br \/>\n       startrecording=true;<br \/>\n       if (e.originalEvent) {<br \/>\n         if (e.originalEvent.touches) {<br \/>\n           yes=true;<br \/>\n         }<br \/>\n       }<br \/>\n       var rectis=document.body.getBoundingClientRect();<br \/>\n       if (e.touches) {<br \/>\n       if (e.touches[0].pageX) {<br \/>\n       x = e.touches[0].pageX;<br \/>\n       y = e.touches[0].pageY;<br \/>\n       <font color=blue>if (eval('' + xs.length) == 0) {<\/font><br \/>\n       \/\/alert('0:' + document.body.offsetLeft + ',' + document.body.offsetTop);<br \/>\n       document.getElementById('blob').innerHTML+='&lt;div class=dblob onmouseover=\\\" blobover(this); \\\" onmouseout=\\\" blobout(this);\\\" onclick=\\\" blobdel(this.id); \\\" title=\\\"\\\" id=\\\"bpdftext' + coordn + '\\\" style=\\\"position:absolute;left:' + eval(0 + x) + 'px;top:' + eval(0 + y) + 'px;background-color:red;z-index:100;\\\"&gt;x&lt;\/div&gt;';<br \/>\n       document.getElementById('immap').innerHTML+=\\\"&lt;area id=area\\\" + areacnt + \\\" alt='\\\" + cidurls + \\\"' shape=rect onclick=ack(this.alt,\\\" + coordn + \\\",true); coords='\\\" + eval(-8 + x) + \\\",\\\" + eval(-8 + y) + \\\",\\\" + eval(8 + x) + \\\",\\\" + eval(8 + y) + \\\"' nohref \/&gt;\\\";<br \/>\n       areacnt++;<br \/>\n        <font color=blue>xs.push(x);<br \/>\n       ys.push(y);<\/font><br \/>\n       setTimeout(askaway,<font color=blue>4<\/font>500);<br \/>\n       <font color=blue>} else if (eval('' + xs.length) &gt;= 2) {<br \/>\n       if (eval('' + xs.length) == 2) {<br \/>\n         document.title+=' | ';<br \/>\n         xs.push(Math.abs(xs[0] - xs[1]));<br \/>\n         ys.push(Math.abs(ys[0] - ys[1]));<br \/>\n         xs.push(Math.abs(xs[0] - xs[1]));<br \/>\n         ys.push(Math.abs(ys[0] - ys[1]));<br \/>\n         xs[0]=Math.min(xs[0], xs[1]);<br \/>\n         ys[0]=Math.min(ys[0], ys[1]);<br \/>\n         xs[1]=xs[2];<br \/>\n         ys[1]=ys[2];<br \/>\n         x=xs[0];<br \/>\n         y=ys[0];<br \/>\n        \/\/ alert(xs.length + ' ? RE rect');<br \/>\n       } else {<br \/>\n         x=xs[0];<br \/>\n         y=ys[0];<br \/>\n         if (eval('' + xs.length) == 4) { xs[0]+=0.00001; }<br \/>\n       }<br \/>\n       } else {<br \/>\n       xs.push(x);<br \/>\n       ys.push(y);<br \/>\n         x=xs[0];<br \/>\n         y=ys[0];<br \/>\n       }<\/font><br \/>\n       } else {<br \/>\n       x = eval(-rectis.left + e.touches[0].clientX);<br \/>\n       y = eval(-rectis.top + e.touches[0].clientY);<br \/>\n       <font color=blue>if (eval('' + xs.length) == 0) {<\/font><br \/>\n       \/\/alert('1:' + document.body.offsetLeft + ',' + document.body.offsetTop);<br \/>\n       document.getElementById('blob').innerHTML+='&lt;div class=dblob onmouseover=\\\" blobover(this); \\\" onmouseout=\\\" blobout(this);\\\" onclick=\\\" blobdel(this.id); \\\" title=\\\"\\\" id=\\\"bpdftext' + coordn + '\\\" style=\\\"position:absolute;left:' + eval(0 + x) + 'px;top:' + eval(0 + y) + 'px;background-color:red;z-index:100;\\\"&gt;x&lt;\/div&gt;';<br \/>\n       document.getElementById('immap').innerHTML+=\\\"&lt;area id=area\\\" + areacnt + \\\" alt='\\\" + cidurls + \\\"' shape=rect onclick=ack(this.alt,\\\" + coordn + \\\",true); coords='\\\" + eval(-8 + x) + \\\",\\\" + eval(-8 + y) + \\\",\\\" + eval(8 + x) + \\\",\\\" + eval(8 + y) + \\\"' nohref \/&gt;\\\";<br \/>\n       areacnt++;<br \/>\n       <font color=blue>xs.push(x);<br \/>\n       ys.push(y);<\/font><br \/>\n       setTimeout(askaway,<font color=blue>4<\/font>500);<br \/>\n       <font color=blue>} else if (eval('' + xs.length) &gt;= 2) {<br \/>\n       if (eval('' + xs.length) == 2) {<br \/>\n         document.title+=' | ';<br \/>\n         xs.push(Math.abs(xs[0] - xs[1]));<br \/>\n         ys.push(Math.abs(ys[0] - ys[1]));<br \/>\n         xs.push(Math.abs(xs[0] - xs[1]));<br \/>\n         ys.push(Math.abs(ys[0] - ys[1]));<br \/>\n         xs[0]=Math.min(xs[0], xs[1]);<br \/>\n         ys[0]=Math.min(ys[0], ys[1]);<br \/>\n         xs[1]=xs[2];<br \/>\n         ys[1]=ys[2];<br \/>\n         x=xs[0];<br \/>\n         y=ys[0];<br \/>\n        \/\/ alert(xs.length + ' ? RE rect');<br \/>\n       } else {<br \/>\n         x=xs[0];<br \/>\n         y=ys[0];<br \/>\n         if (eval('' + xs.length) == 4) { xs[0]+=0.00001; }<br \/>\n       }<br \/>\n       } else {<br \/>\n       xs.push(x);<br \/>\n       ys.push(y);<br \/>\n          x=xs[0];<br \/>\n         y=ys[0];<br \/>\n      }<br \/>\n       }<\/font><br \/>\n       \/\/console.log('pos3=' + pos3 + ',pos4=' + pos4);<br \/>\n       } else if (yes) {<br \/>\n       if (e.originalEvent.touches[0].pageX) {<br \/>\n       x = e.originalEvent.touches[0].pageX;<br \/>\n       y = e.originalEvent.touches[0].pageY;<br \/>\n       <font color=blue>if (eval('' + xs.length) == 0) {<\/font><br \/>\n       \/\/alert('0:' + document.body.offsetLeft + ',' + document.body.offsetTop);<br \/>\n       document.getElementById('blob').innerHTML+='&lt;div class=dblob onmouseover=\\\" blobover(this); \\\" onmouseout=\\\" blobout(this);\\\" onclick=\\\" blobdel(this.id); \\\" title=\\\"\\\" id=\\\"bpdftext' + coordn + '\\\" style=\\\"position:absolute;left:' + eval(0 + x) + 'px;top:' + eval(0 + y) + 'px;background-color:red;z-index:100;\\\"&gt;x&lt;\/div&gt;';<br \/>\n       document.getElementById('immap').innerHTML+=\\\"&lt;area id=area\\\" + areacnt + \\\" alt='\\\" + cidurls + \\\"' shape=rect onclick=ack(this.alt,\\\" + coordn + \\\",true); coords='\\\" + eval(-8 + x) + \\\",\\\" + eval(-8 + y) + \\\",\\\" + eval(8 + x) + \\\",\\\" + eval(8 + y) + \\\"' nohref \/&gt;\\\";<br \/>\n       areacnt++;<br \/>\n       <font color=blue>xs.push(x);<br \/>\n       ys.push(y);<\/font><br \/>\n       setTimeout(askaway,<font color=blue>4<\/font>500);<br \/>\n       <font color=blue>} else if (eval('' + xs.length) &gt;= 2) {<br \/>\n       if (eval('' + xs.length) == 2) {<br \/>\n         document.title+=' | ';<br \/>\n         xs.push(Math.abs(xs[0] - xs[1]));<br \/>\n         ys.push(Math.abs(ys[0] - ys[1]));<br \/>\n         xs.push(Math.abs(xs[0] - xs[1]));<br \/>\n         ys.push(Math.abs(ys[0] - ys[1]));<br \/>\n         xs[0]=Math.min(xs[0], xs[1]);<br \/>\n         ys[0]=Math.min(ys[0], ys[1]);<br \/>\n         xs[1]=xs[2];<br \/>\n         ys[1]=ys[2];<br \/>\n         x=xs[0];<br \/>\n         y=ys[0];<br \/>\n        \/\/ alert(xs.length + ' ? RE rect');<br \/>\n       } else {<br \/>\n         x=xs[0];<br \/>\n         y=ys[0];<br \/>\n         if (eval('' + xs.length) == 4) { xs[0]+=0.00001; }<br \/>\n       }<br \/>\n       } else {<br \/>\n       xs.push(x);<br \/>\n       ys.push(y);<br \/>\n         x=xs[0];<br \/>\n         y=ys[0];<br \/>\n       }<\/font><br \/>\n       } else {<br \/>\n       x = eval(-rectis.left + e.originalEvent.touches[0].clientX);<br \/>\n       y = eval(-rectis.top + e.originalEvent.touches[0].clientY);<br \/>\n       <font color=blue>if (eval('' + xs.length) == 0) {<\/font><br \/>\n       \/\/alert('1:' + document.body.offsetLeft + ',' + document.body.offsetTop);<br \/>\n       document.getElementById('blob').innerHTML+='&lt;div class=dblob onmouseover=\\\" blobover(this); \\\" onmouseout=\\\" blobout(this);\\\" onclick=\\\" blobdel(this.id); \\\" title=\\\"\\\" id=\\\"bpdftext' + coordn + '\\\" style=\\\"position:absolute;left:' + eval(0 + x) + 'px;top:' + eval(0 + y) + 'px;background-color:red;z-index:100;\\\"&gt;x&lt;\/div&gt;';<br \/>\n       document.getElementById('immap').innerHTML+=\\\"&lt;area id=area\\\" + areacnt + \\\" alt='\\\" + cidurls + \\\"' shape=rect onclick=ack(this.alt,\\\" + coordn + \\\",true); coords='\\\" + eval(-8 + x) + \\\",\\\" + eval(-8 + y) + \\\",\\\" + eval(8 + x) + \\\",\\\" + eval(8 + y) + \\\"' nohref \/&gt;\\\";<br \/>\n       areacnt++;<br \/>\n       <font color=blue>xs.push(x);<br \/>\n       ys.push(y);<\/font><br \/>\n       setTimeout(askaway,<font color=blue>4<\/font>500);<br \/>\n       <font color=blue>} else if (eval('' + xs.length) &gt;= 2) {<br \/>\n       if (eval('' + xs.length) == 2) {<br \/>\n         document.title+=' | ';<br \/>\n         xs.push(Math.abs(xs[0] - xs[1]));<br \/>\n         ys.push(Math.abs(ys[0] - ys[1]));<br \/>\n         xs.push(Math.abs(xs[0] - xs[1]));<br \/>\n         ys.push(Math.abs(ys[0] - ys[1]));<br \/>\n         xs[0]=Math.min(xs[0], xs[1]);<br \/>\n         ys[0]=Math.min(ys[0], ys[1]);<br \/>\n         xs[1]=xs[2];<br \/>\n         ys[1]=ys[2];<br \/>\n         x=xs[0];<br \/>\n         y=ys[0];<br \/>\n       \/\/  alert(xs.length + ' ? RE rect');<br \/>\n       } else {<br \/>\n         x=xs[0];<br \/>\n         y=ys[0];<br \/>\n         if (eval('' + xs.length) == 4) { xs[0]+=0.00001; }<br \/>\n      }<br \/>\n       } else {<br \/>\n       xs.push(x);<br \/>\n       ys.push(y);<br \/>\n         x=xs[0];<br \/>\n         y=ys[0];<br \/>\n       }<\/font><br \/>\n       }<br \/>\n       \/\/console.log('pos3=' + pos3 + ',pos4=' + pos4);<br \/>\n       } else if (e.clientX || e.clientY) {<br \/>\n        x = eval(-rectis.left + e.clientX);<br \/>\n        y = eval(-rectis.top + e.clientY);<br \/>\n       <font color=blue>if (eval('' + xs.length) == 0) {<\/font><br \/>\n       \/\/alert('2:' + rectis.left + ',' + rectis.top);<br \/>\n       document.getElementById('blob').innerHTML+='&lt;div class=dblob onmouseover=\\\" blobover(this); \\\" onmouseout=\\\" blobout(this);\\\" onclick=\\\" blobdel(this.id); \\\" title=\\\"\\\" id=\\\"bpdftext' + coordn + '\\\" style=\\\"position:absolute;left:' + eval(0 + x) + 'px;top:' + eval(0 + y) + 'px;background-color:red;z-index:100;\\\"&gt;x&lt;\/div&gt;';<br \/>\n       document.getElementById('immap').innerHTML+=\\\"&lt;area id=area\\\" + areacnt + \\\" alt='\\\" + cidurls + \\\"' shape=rect onclick=ack(this.alt,\\\" + coordn + \\\",true); coords='\\\" + eval(-8 + x) + \\\",\\\" + eval(-8 + y) + \\\",\\\" + eval(8 + x) + \\\",\\\" + eval(8 + y) + \\\"' nohref \/&gt;\\\";<br \/>\n       areacnt++;<br \/>\n       <font color=blue>xs.push(x);<br \/>\n       ys.push(y);<\/font><br \/>\n       setTimeout(askaway,<font color=blue>4<\/font>500);<br \/>\n       <font color=blue>} else if (eval('' + xs.length) &gt;= 2) {<br \/>\n       if (eval('' + xs.length) == 2) {<br \/>\n         document.title+=' | ';<br \/>\n         xs.push(Math.abs(xs[0] - xs[1]));<br \/>\n         ys.push(Math.abs(ys[0] - ys[1]));<br \/>\n         xs.push(Math.abs(xs[0] - xs[1]));<br \/>\n         ys.push(Math.abs(ys[0] - ys[1]));<br \/>\n         xs[0]=Math.min(xs[0], xs[1]);<br \/>\n         ys[0]=Math.min(ys[0], ys[1]);<br \/>\n         xs[1]=xs[2];<br \/>\n         ys[1]=ys[2];<br \/>\n         x=xs[0];<br \/>\n         y=ys[0];<br \/>\n       \/\/  alert(xs.length + ' ? RE rect');<br \/>\n       } else {<br \/>\n         x=xs[0];<br \/>\n         y=ys[0];<br \/>\n         if (eval('' + xs.length) == 4) { xs[0]+=0.00001; }<br \/>\n       }<br \/>\n       } else {<br \/>\n       xs.push(x);<br \/>\n       ys.push(y);<br \/>\n         x=xs[0];<br \/>\n         y=ys[0];<br \/>\n       }<\/font><br \/>\n       } else {<br \/>\n        x = e.pageX;<br \/>\n        y = e.pageY;<br \/>\n       <font color=blue>if (eval('' + xs.length) == 0) {<\/font><br \/>\n       \/\/alert('3:' + document.body.offsetLeft + ',' + document.body.offsetTop);<br \/>\n       document.getElementById('blob').innerHTML+='&lt;div class=dblob onmouseover=\\\" blobover(this); \\\" onmouseout=\\\" blobout(this);\\\" onclick=\\\" blobdel(this.id); \\\" title=\\\"\\\" id=\\\"bpdftext' + coordn + '\\\" style=\\\"position:absolute;left:' + eval(0 + x) + 'px;top:' + eval(0 + y) + 'px;background-color:red;z-index:100;\\\"&gt;x&lt;\/div&gt;';<br \/>\n       document.getElementById('immap').innerHTML+=\\\"&lt;area id=area\\\" + areacnt + \\\" alt='\\\" + cidurls + \\\"' shape=rect onclick=ack(this.alt,\\\" + coordn + \\\",true); coords='\\\" + eval(-8 + x) + \\\",\\\" + eval(-8 + y) + \\\",\\\" + eval(8 + x) + \\\",\\\" + eval(8 + y) + \\\"' nohref \/&gt;\\\";<br \/>\n       areacnt++;<br \/>\n       <font color=blue>xs.push(x);<br \/>\n       ys.push(y);<\/font><br \/>\n       setTimeout(askaway,<font color=blue>4<\/font>500);<br \/>\n       <font color=blue>} else if (eval('' + xs.length) &gt;= 2) {<br \/>\n       if (eval('' + xs.length) == 2) {<br \/>\n         document.title+=' | ';<br \/>\n         xs.push(Math.abs(xs[0] - xs[1]));<br \/>\n         ys.push(Math.abs(ys[0] - ys[1]));<br \/>\n         xs.push(Math.abs(xs[0] - xs[1]));<br \/>\n         ys.push(Math.abs(ys[0] - ys[1]));<br \/>\n         xs[0]=Math.min(xs[0], xs[1]);<br \/>\n         ys[0]=Math.min(ys[0], ys[1]);<br \/>\n         xs[1]=xs[2];<br \/>\n         ys[1]=ys[2];<br \/>\n         x=xs[0];<br \/>\n         y=ys[0];<br \/>\n        \/\/ alert(xs.length + ' ? RE rect');<br \/>\n       } else {<br \/>\n         x=xs[0];<br \/>\n         y=ys[0];<br \/>\n          if (eval('' + xs.length) == 4) { xs[0]+=0.00001; }<br \/>\n       }<br \/>\n       } else {<br \/>\n       xs.push(x);<br \/>\n       ys.push(y);<br \/>\n         x=xs[0];<br \/>\n         y=ys[0];<br \/>\n       }<\/font><br \/>\n       }<br \/>\n       }<br \/>\n    }<br \/>\n  };<br \/>\n<\/code><\/p>\n<p> &#8230; allowing the user four extra seconds after that first click, now, to &#8230;<\/p>\n<ul>\n<li>add in one more line end click<\/li>\n<li>add in two more clicks for a drawn rectangle extending to the first two click positions<\/li>\n<li>add in three or more clicks for a filled in rectangle extending to the first two click positions<\/li>\n<\/ul>\n<p> &#8230; in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/pdfimageplustext.php-------------------------GETME\">its changed, sometimes supervisory<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/pdfimageplustext.php-------------------------GETME\">pdfimageplustext.php<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/pdfimageplustext.php\" title=\"Click picture\">Image and Text PDF<\/a> PHP web application.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/pdf-image-and-text-nodes-and-lines-and-rectangles-tutorial\/'>PDF Image and Text Nodes and Lines and Rectangles Tutorial<\/a>.<\/p-->\n<hr>\n<p id='pdfitnmst'>Previous relevant <a target=_blank title='PDF Image and Text Nodes Mobile Scrolling Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/pdf-image-and-text-nodes-mobile-scrolling-tutorial\/'>PDF Image and Text Nodes Mobile Scrolling Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/pdfimageplustext.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"PDF Image and Text Nodes Mobile Scrolling Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/scrolling_improvements.gif\" title=\"PDF Image and Text Nodes Mobile Scrolling Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">PDF Image and Text Nodes Mobile Scrolling Tutorial<\/p><\/div>\n<p>With yesterday&#8217;s <a title='PDF Image and Text Nodes Windows Tutorial' href='#pdfitnwt'>PDF Image and Text Nodes Windows Tutorial<\/a> it is time, today, to fix a &#8230;<\/p>\n<ul>\n<li>mobile device issue in usage &#8230;<\/li>\n<li>when browsing for files &#8230;<\/li>\n<li>and using the &#8220;Take Photo&#8221; option, perhaps &#8230;<\/li>\n<li>obtaining an image far bigger than the screen &#8230;<\/li>\n<li>the user scrolls to text node positions<\/li>\n<\/ul>\n<p> &#8230; we start accounting for that scrolling, as per the <font color=blue>Javascript changes<\/font> to document.body onclick event logic &#8230;<\/p>\n<p><code><br \/>\n  document.getElementById('mybody').onclick=function(e){<br \/>\n    var yes=false;<br \/>\n    if (areaclick) {<br \/>\n    areaclick=false;<br \/>\n    } else {<br \/>\n    e = e || window.event;<br \/>\n    e.preventDefault();<br \/>\n       if (!showingc) {<br \/>\n       startrecording=true;<br \/>\n       if (e.originalEvent) {<br \/>\n         if (e.originalEvent.touches) {<br \/>\n           yes=true;<br \/>\n         }<br \/>\n       }<br \/>\n       <font color=blue>var rectis=document.body.getBoundingClientRect();<\/font><br \/>\n       if (e.touches) {<br \/>\n       if (e.touches[0].pageX) {<br \/>\n       x = e.touches[0].pageX;<br \/>\n       y = e.touches[0].pageY;<br \/>\n       \/\/alert('0:' + document.body.offsetLeft + ',' + document.body.offsetTop);<br \/>\n       document.getElementById('blob').innerHTML+='&lt;div class=dblob onmouseover=\\\" blobover(this); \\\" onmouseout=\\\" blobout(this);\\\" onclick=\\\" blobdel(this.id); \\\" title=\\\"\\\" id=\\\"bpdftext' + coordn + '\\\" style=\\\"position:absolute;left:' + eval(0 + x) + 'px;top:' + eval(0 + y) + 'px;background-color:red;z-index:100;\\\"&gt;x&lt;\/div&gt;';<br \/>\n       document.getElementById('immap').innerHTML+=\\\"&lt;area id=area\\\" + areacnt + \\\" alt='\\\" + cidurls + \\\"' shape=rect onclick=ack(this.alt,\\\" + coordn + \\\",true); coords='\\\" + eval(-8 + x) + \\\",\\\" + eval(-8 + y) + \\\",\\\" + eval(8 + x) + \\\",\\\" + eval(8 + y) + \\\"' nohref \/&gt;\\\";<br \/>\n       areacnt++;<br \/>\n       setTimeout(askaway,500);<br \/>\n       } else {<br \/>\n       x = eval(<font color=blue>-rectis.left + <\/font>e.touches[0].clientX);<br \/>\n       y = eval(<font color=blue>-rectis.top + <\/font>e.touches[0].clientY);<br \/>\n       \/\/alert('1:' + document.body.offsetLeft + ',' + document.body.offsetTop);<br \/>\n       document.getElementById('blob').innerHTML+='&lt;div class=dblob onmouseover=\\\" blobover(this); \\\" onmouseout=\\\" blobout(this);\\\" onclick=\\\" blobdel(this.id); \\\" title=\\\"\\\" id=\\\"bpdftext' + coordn + '\\\" style=\\\"position:absolute;left:' + eval(0 + x) + 'px;top:' + eval(0 + y) + 'px;background-color:red;z-index:100;\\\"&gt;x&lt;\/div&gt;';<br \/>\n       document.getElementById('immap').innerHTML+=\\\"&lt;area id=area\\\" + areacnt + \\\" alt='\\\" + cidurls + \\\"' shape=rect onclick=ack(this.alt,\\\" + coordn + \\\",true); coords='\\\" + eval(-8 + x) + \\\",\\\" + eval(-8 + y) + \\\",\\\" + eval(8 + x) + \\\",\\\" + eval(8 + y) + \\\"' nohref \/&gt;\\\";<br \/>\n       areacnt++;<br \/>\n       setTimeout(askaway,500);<br \/>\n       }<br \/>\n       \/\/console.log('pos3=' + pos3 + ',pos4=' + pos4);<br \/>\n       } else if (yes) {<br \/>\n       if (e.originalEvent.touches[0].pageX) {<br \/>\n       x = e.originalEvent.touches[0].pageX;<br \/>\n       y = e.originalEvent.touches[0].pageY;<br \/>\n       \/\/alert('0:' + document.body.offsetLeft + ',' + document.body.offsetTop);<br \/>\n       document.getElementById('blob').innerHTML+='&lt;div class=dblob onmouseover=\\\" blobover(this); \\\" onmouseout=\\\" blobout(this);\\\" onclick=\\\" blobdel(this.id); \\\" title=\\\"\\\" id=\\\"bpdftext' + coordn + '\\\" style=\\\"position:absolute;left:' + eval(0 + x) + 'px;top:' + eval(0 + y) + 'px;background-color:red;z-index:100;\\\"&gt;x&lt;\/div&gt;';<br \/>\n       document.getElementById('immap').innerHTML+=\\\"&lt;area id=area\\\" + areacnt + \\\" alt='\\\" + cidurls + \\\"' shape=rect onclick=ack(this.alt,\\\" + coordn + \\\",true); coords='\\\" + eval(-8 + x) + \\\",\\\" + eval(-8 + y) + \\\",\\\" + eval(8 + x) + \\\",\\\" + eval(8 + y) + \\\"' nohref \/&gt;\\\";<br \/>\n       areacnt++;<br \/>\n       setTimeout(askaway,500);<br \/>\n       } else {<br \/>\n       x = eval(<font color=blue>-rectis.left + <\/font>e.originalEvent.touches[0].clientX);<br \/>\n       y = eval(<font color=blue>-rectis.top + <\/font>e.originalEvent.touches[0].clientY);<br \/>\n       \/\/alert('1:' + document.body.offsetLeft + ',' + document.body.offsetTop);<br \/>\n       document.getElementById('blob').innerHTML+='&lt;div class=dblob onmouseover=\\\" blobover(this); \\\" onmouseout=\\\" blobout(this);\\\" onclick=\\\" blobdel(this.id); \\\" title=\\\"\\\" id=\\\"bpdftext' + coordn + '\\\" style=\\\"position:absolute;left:' + eval(0 + x) + 'px;top:' + eval(0 + y) + 'px;background-color:red;z-index:100;\\\"&gt;x&lt;\/div&gt;';<br \/>\n       document.getElementById('immap').innerHTML+=\\\"&lt;area id=area\\\" + areacnt + \\\" alt='\\\" + cidurls + \\\"' shape=rect onclick=ack(this.alt,\\\" + coordn + \\\",true); coords='\\\" + eval(-8 + x) + \\\",\\\" + eval(-8 + y) + \\\",\\\" + eval(8 + x) + \\\",\\\" + eval(8 + y) + \\\"' nohref \/&gt;\\\";<br \/>\n       areacnt++;<br \/>\n       setTimeout(askaway,500);<br \/>\n       }<br \/>\n       \/\/console.log('pos3=' + pos3 + ',pos4=' + pos4);<br \/>\n       } else if (e.clientX || e.clientY) {<br \/>\n        x = eval(<font color=blue>-rectis.left + <\/font>e.clientX);<br \/>\n        y = eval(<font color=blue>-rectis.top + <\/font>e.clientY);<br \/>\n       \/\/alert('2:' + rectis.left + ',' + rectis.top);<br \/>\n       document.getElementById('blob').innerHTML+='&lt;div class=dblob onmouseover=\\\" blobover(this); \\\" onmouseout=\\\" blobout(this);\\\" onclick=\\\" blobdel(this.id); \\\" title=\\\"\\\" id=\\\"bpdftext' + coordn + '\\\" style=\\\"position:absolute;left:' + eval(0 + x) + 'px;top:' + eval(0 + y) + 'px;background-color:red;z-index:100;\\\"&gt;x&lt;\/div&gt;';<br \/>\n       document.getElementById('immap').innerHTML+=\\\"&lt;area id=area\\\" + areacnt + \\\" alt='\\\" + cidurls + \\\"' shape=rect onclick=ack(this.alt,\\\" + coordn + \\\",true); coords='\\\" + eval(-8 + x) + \\\",\\\" + eval(-8 + y) + \\\",\\\" + eval(8 + x) + \\\",\\\" + eval(8 + y) + \\\"' nohref \/&gt;\\\";<br \/>\n       areacnt++;<br \/>\n       setTimeout(askaway,500);<br \/>\n       } else {<br \/>\n        x = e.pageX;<br \/>\n        y = e.pageY;<br \/>\n       \/\/alert('3:' + document.body.offsetLeft + ',' + document.body.offsetTop);<br \/>\n       document.getElementById('blob').innerHTML+='&lt;div class=dblob onmouseover=\\\" blobover(this); \\\" onmouseout=\\\" blobout(this);\\\" onclick=\\\" blobdel(this.id); \\\" title=\\\"\\\" id=\\\"bpdftext' + coordn + '\\\" style=\\\"position:absolute;left:' + eval(0 + x) + 'px;top:' + eval(0 + y) + 'px;background-color:red;z-index:100;\\\"&gt;x&lt;\/div&gt;';<br \/>\n       document.getElementById('immap').innerHTML+=\\\"&lt;area id=area\\\" + areacnt + \\\" alt='\\\" + cidurls + \\\"' shape=rect onclick=ack(this.alt,\\\" + coordn + \\\",true); coords='\\\" + eval(-8 + x) + \\\",\\\" + eval(-8 + y) + \\\",\\\" + eval(8 + x) + \\\",\\\" + eval(8 + y) + \\\"' nohref \/&gt;\\\";<br \/>\n       areacnt++;<br \/>\n       setTimeout(askaway,500);<br \/>\n       }<br \/>\n       }<br \/>\n    }<br \/>\n  };<br \/>\n<\/code><\/p>\n<p> &#8230; in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/pdfimageplustext.php------------------------GETME\">its changed, sometimes supervisory<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/pdfimageplustext.php------------------------GETME\">pdfimageplustext.php<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/pdfimageplustext.php\" title=\"Click picture\">Image and Text PDF<\/a> PHP web application.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/pdf-image-and-text-nodes-mobile-scrolling-tutorial\/'>PDF Image and Text Nodes Mobile Scrolling Tutorial<\/a>.<\/p-->\n<hr>\n<p id='pdfitnwt'>Previous relevant <a target=_blank title='PDF Image and Text Nodes Windows Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/pdf-image-and-text-nodes-windows-tutorial\/'>PDF Image and Text Nodes Windows Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/pdfimageplustext.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"PDF Image and Text Nodes Windows Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/pdfimageplustext_windows.jpg\" title=\"PDF Image and Text Nodes Windows Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">PDF Image and Text Nodes Windows Tutorial<\/p><\/div>\n<p>It&#8217;s instructive adding &#8220;platforms&#8221; to the list of &#8220;underlying operating system&#8221; functionalities, and though it can be a slow slog, the work you put in now, can help future endeavours.   And so, onto the recent <a title='Web Share API PDF Book Creation Notifications Tutorial' href='#wsapipdfbcnt'>Web Share API PDF Book Creation Notifications Tutorial<\/a> we learnt in adding &#8220;Windows&#8221; as an &#8220;underlying operating system&#8221; &#8230;<\/p>\n<ul>\n<li>you cannot chain PHP exec commands with semicolon &#8230;<\/li>\n<li>we needed to install <a target=_blank title='Ghostscript' href='https:\/\/www.ghostscript.com\/'>Ghostscript<\/a> for PDF conversion purposes &#8230;<\/li>\n<li>we needed to remind ourselves that, of course, as far as downloads go, you&#8217;ll need to download <a target=_blank title='Fpdf PHP class' href='HTTP:\/\/www.fpdf.org\/'>Fpdf<\/a> &#8230; ours being version version 1.7 and install it to <a target=_blank title='MAMP' href='http:\/\/www.mamp.info'>MAMP<\/a> Document Root folder &#8220;MarkItUp\/fpdf17&#8221; (or MarkItUp\\fpdf17 for Windows) &#8230;<\/li>\n<li>we needed to incorporate DIRECTORY_SEPARATOR operating system file references where we&#8217;d hardcoded &#8220;\/&#8221; previously &#8230;<\/li>\n<\/ul>\n<p> &#8230; and more reliably, converting to videos, you succeed more often on these local web server environments first converting to &#8230;<\/p>\n<ul>\n<li>ffmpeg inhouse *.ts format &#8230; and then onto &#8230;<\/li>\n<li>more publicly accessible *.webm format<\/li>\n<\/ul>\n<p> &#8230; and we coded some other &#8220;hardcodings become parameterized&#8221; matters via &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n$convertcommand=\"C:\\\\PROGRA~1\\\\IMAGEM~1.0-Q\\\\\";<br \/>\n$ffmpegcommand=\"C:\\\\PROGRA~1\\\\IMAGEM~1.0-Q\\\\\";<br \/>\n<br \/>\n$mvstr=\"mv \";<br \/>\n$cpstr=\"cp \";<br \/>\n$portstr=\":8888\";<br \/>\n<br \/>\nif (PHP_OS =='WINNT' || PHP_OS =='WIN32' || PHP_OS =='Windows') {<br \/>\n  $cpstr=\"copy \";<br \/>\n  $mvstr=\"rename \";<br \/>\n  $portstr=\"\";<br \/>\n  $convertcommand.=\"magick.exe \";<br \/>\n  if (file_exists($ffmpegcommand . \"ffmpeg.exe\")) {<br \/>\n  $ffmpegcommand.=\"ffmpeg.exe \";<br \/>\n  } else {<br \/>\n  $ffmpegcommand=\"\";<br \/>\n  }<br \/>\n} else {<br \/>\nif (file_exists(\"\/usr\/local\/bin\/ffmpeg\")) {<br \/>\n  $ffmpegcommand=\"\/usr\/local\/bin\/ffmpeg \";<br \/>\n} else if (file_exists(\"\/usr\/bin\/ffmpeg\")) {<br \/>\n  $ffmpegcommand=\"\/usr\/bin\/ffmpeg \";<br \/>\n} else {<br \/>\n  $ffmpegcommand=\"\";<br \/>\n}<br \/>\nif (file_exists(\"\/usr\/local\/cpanel\/3rdparty\/bin\/convert\")) {<br \/>\n  $convertcommand=\"\/usr\/local\/cpanel\/3rdparty\/bin\/convert \";<br \/>\n} else if (file_exists(\"\/usr\/local\/bin\/convert\")) {<br \/>\n  $convertcommand=\"\/usr\/local\/bin\/convert \";<br \/>\n} else if (file_exists(\"\/usr\/bin\/convert\")) {<br \/>\n  $convertcommand=\"\/usr\/bin\/convert \";<br \/>\n}<br \/>\n}<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p> &#8230; based on personal experience installing MAMP and <a target=_blank title='ImageMagick' href='http:\/\/www.imagemagick.org'>ImageMagick<\/a> and <a target=_blank title='ffmpeg' href='https:\/\/www.ffmpeg.org\/'>ffmpeg<\/a> and Fpdf and GhostScript here on this Windows laptop, with <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/pdfimageplustext.php-----------------------GETME\">its changed, sometimes supervisory<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/pdfimageplustext.php-----------------------GETME\">pdfimageplustext.php<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/pdfimageplustext.php\" title=\"Click picture\">Image and Text PDF<\/a> PHP web application (we&#8217;d now like you to download to MAMP Document Root folder).<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/pdf-image-and-text-nodes-windows-tutorial\/'>PDF Image and Text Nodes Windows Tutorial<\/a>.<\/p-->\n<hr>\n<p id='wsapipdfbcnt'>Previous relevant <a target=_blank title='Web Share API PDF Book Creation Notifications Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/web-share-api-pdf-book-creation-notifications-tutorial\/'>Web Share API PDF Book Creation Notifications Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/pdfimageplustext.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Web Share API PDF Book Creation Notifications Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/localhost_video.jpg\" title=\"Web Share API PDF Book Creation Notifications Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Web Share API PDF Book Creation Notifications Tutorial<\/p><\/div>\n<p>Today we&#8217;re shoring up the recent <a title='Web Share API Intranet Video Tutorial' href='#wsapiivt'>Web Share API Intranet Video Tutorial<\/a>&#8216;s &#8230;<\/p>\n<ul>\n<li><a target=_blank title='Web Share API' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Navigator\/share'>Web Share API<\/a> helping out of &#8230;<\/li>\n<li>PDF Image and Text Nodes Creator of <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/image-and-text-pdf-large-animated-gif-text-nodes-tutorial\/' title='Image and Text PDF Large Animated GIF Text Nodes Tutorial'>Image and Text PDF Large Animated GIF Text Nodes Tutorial<\/a> &#8230; adding in &#8230;<\/li>\n<li><a target=_blank title='Notifications API' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Notifications_API\/Using_the_Notifications_API'>Notifications API<\/a> interfacing to tell when any PDF Books are ready for viewing<\/li>\n<\/ul>\n<p> &#8230; as well as loosening our reliance on <a target=_blank title='ImageMagick command line' href='http:\/\/www.imagemagick.org\/script\/command-line-tools.php'>ImageMagick<\/a> &#8220;convert&#8221; command when converting a set of Jpegs to a PDF Book (and animated GIF), where we are finding it unable to allocate enough memory, on occasions.  Instead we pivot back to <a target=_blank title='Fpdf PHP class' href='HTTP:\/\/www.fpdf.org\/'>Fpdf<\/a> to backup ImageMagick, should it run into trouble with the PDF Book conversion.<\/p>\n<p>And regarding the animated GIF conversion, regarding this ImageMagick subject, it would be great for &#8220;Intranet&#8221; functionality purposes, to install it on your local device.<\/p>\n<p>Given this, and all the other installing and downloading advice, on your &#8220;Intranet&#8221; environment, you can now end up with a window showing links to content, or content itself, for &#8230;<\/p>\n<p><code><br \/>\nPDF (Book) -&gt; Animated GIF -&gt; Video<br \/>\n<\/code><\/p>\n<p> &#8230; as you can see with <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/localhost_video.jpg\" title=\"Tutorial picture\">today&#8217;s tutorial picture<\/a> for <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/web_share_api_test.html---------GETME \">the changed HTML and Javascript<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/web_share_api_test.html---------GETME\">web_share_api_test.html<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/web_share_api_test.html\">Web Share API supervisor<\/a> web application (we&#8217;d now like you to download to MAMP Document Root and HTMLCSS subfolder, as well as  <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing.html----------------------GETME\">client_browsing.htm<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing.htm\">Client Browsing supervisor<\/a>) to start making this a possibility, with <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/pdfimageplustext.php----------------------GETME\">its changed, sometimes supervisory<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/pdfimageplustext.php----------------------GETME\">pdfimageplustext.php<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/pdfimageplustext.php\" title=\"Click picture\">Image and Text PDF<\/a> PHP web application (we&#8217;d now like you to download to MAMP Document Root folder).<\/p>\n<p>Also changed (and good to download into <a target=_blank title='MAMP' href='http:\/\/www.mamp.info'>MAMP<\/a> local Apache\/PHP\/MySql web server Document Root &#8220;PHP\/animegif&#8221; folder), today, is <a target=_blank title='tutorial_to_animated_gif.php' href='\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php-----------------------------------------------------------GETME'>the changed<\/a> <a target=_blank title='tutorial_to_animated_gif.php' href='\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php-----------------------------------------------------------GETME'>tutorial_to_animated_gif.php<\/a> <a target=_blank title='tutorial_to_animated_gif.php' href='\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php'>our inhouse Animated GIF Creator helper PHP web application<\/a>.<\/p>\n<p>If you have created any PDF Books, we have relied on user common sense as to when they try to view that (now Fpdf compiled) PDF made up of a set of individual PDF slide Jpegs (themselves compiled via ImageMagick).  To improve that we link to Notifications API <font color=blue>interfacing<\/font> &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n $notifif='';<br \/>\n<br \/>\nfunction wildout($wild, $out) {<br \/>\n    global $outputpdf, $notifif, $sizeofdatauris;<br \/>\n    $fgo=0;<br \/>\n<br \/>\n    $inorder=true;<br \/>\n    foreach (glob($wild) as $filename) {<br \/>\n          pdfaddpage($filename);<br \/>\n          if (sizeof(explode('-', $filename)) == 2) {<br \/>\n            if (explode('.',('' . explode('-', $filename)[1]))[0] != ('' . $fgo)) {  file_put_contents('bad8.bad8', $fgo . ' ... ' . $filename); $inorder=false;  }<br \/>\n          } else {<br \/>\n            file_put_contents('bad7.bad7', $filename);<br \/>\n          }<br \/>\n          $fgo++;<br \/>\n    }<br \/>\n<br \/>\n    if (($inorder || ('' . $fgo) &gt;= ('' . $sizeofdatauris)) && $fgo != 0) {<br \/>\n    file_put_contents('bad9.bad9', 'here ' . $fgo);<br \/>\n    if (('' . $fgo) &gt; ('' . $sizeofdatauris)) {<br \/>\n    <font color=blue>$notifif=' onload=\" if (1 == 1) {  window.open(' . \"'\" . 'https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/notifications_ideas.php?scheduledblurb=' . urlencode('PDF Book nearing readiness for sharing now ' . ' ... ' . $fgo . ' of ' . $sizeofdatauris . ' complete') . \"'\" . ',' . \"'notifif','top=50,left=50,width=50,height=50'\" . '); } else { window.opener.document.getElementById(' . \"'notifif'\" . ').src=' . \"'\" . 'https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/notifications_ideas.php?scheduledblurb=' . urlencode('PDF Book ready for sharing now ...') . \"'\" . '; } \"';<\/font><br \/>\n    } else {<br \/>\n    <font color=blue>$notifif=' onload=\" if (1 == 1) {  window.open(' . \"'\" . 'https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/notifications_ideas.php?scheduledblurb=' . urlencode('PDF Book ready for sharing now ...') . \"'\" . ',' . \"'notifif','top=50,left=50,width=50,height=50'\" . '); } else { window.opener.document.getElementById(' . \"'notifif'\" . ').src=' . \"'\" . 'https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/notifications_ideas.php?scheduledblurb=' . urlencode('PDF Book ready for sharing now ...') . \"'\" . '; } \"';<\/font><br \/>\n    }<br \/>\n    }<br \/>\n<br \/> <br \/>\n    if ($out != \"\") {<br \/>\n          if (file_exists($out)) { unlink($out); }<br \/>\n          $outputpdf->Output($out, \"F\");<br \/>\n          if (file_exists('bad2.bad2') && strpos($_SERVER['SERVER_NAME'], 'rjmprogramming.com.au') !== false) {<br \/>\n            if (('' . ourfilesize('bad2.bad2')) != '1' && ('' . ourfilesize('bad2.bad2')) != '2') {<br \/>\n              file_put_contents('bad3.bad3', $wild . ' ... ' . $out . ' .;. ' . file_get_contents('bad2.bad2'));<br \/>\n              file_put_contents('bad2.bad2', ' ');<br \/>\n            }<br \/>\n          }<br \/>\n    }<br \/>\n}<br \/>\n<\/code><br \/>\n?&gt; <\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/web-share-api-pdf-book-creation-notifications-tutorial\/'>Web Share API PDF Book Creation Notifications Tutorial<\/a>.<\/p-->\n<hr>\n<p id='wsapiivt'>Previous relevant <a target=_blank title='Web Share API Intranet Video Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/web-share-api-intranet-video-tutorial\/'>Web Share API Intranet Video 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\/web_share_api_test.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Web Share API Intranet Video Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/pdfimageplustext_agvid.jpg\" title=\"Web Share API Intranet Video Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Web Share API Intranet Video Tutorial<\/p><\/div>\n<p>Adding to yesterday&#8217;s <a title='Web Share API Animated GIF Tutorial' href='#wsapiagift'>Web Share API Animated GIF Tutorial<\/a> &#8230;<\/p>\n<ul>\n<li>animated GIF (PDF sharing) &#8230; today we add &#8230;<\/li>\n<li>video (via animated GIF via PDF)<\/li>\n<\/ul>\n<p> &#8230; but we need you to think &#8220;Intranet&#8221; for our first idea here.   Here at our macOS setup we use a <a target=_blank title='MAMP' href='http:\/\/www.mamp.info'>MAMP<\/a> local Apache\/PHP\/MySql web server as our &#8220;Intranet&#8221; portal.<\/p>\n<p>We&#8217;ve also installed the great <a target=_blank title='ffmpeg' href='https:\/\/www.ffmpeg.org\/'>ffmpeg<\/a> on this macOS system, and thanks to some great advice from <a target=_blank title=' ffmpeg lossless conversion of animated GIF to video' href='http:\/\/forum.doom9.org\/archive\/index.php\/t-168999.html'>this link<\/a> about ffmpeg lossless conversion of animated GIF to video &#8230;<\/p>\n<p><code><br \/>\nffmpeg -i video.gif -c:v libx264 -preset veryslow -qp 0 output.mp4<br \/>\n<\/code><\/p>\n<p> &#8230; we have <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/web_share_api_test.html--------GETME \">a tweaked HTML and Javascript<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/web_share_api_test.html--------GETME\">web_share_api_test.html<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/web_share_api_test.html\">Web Share API supervisor<\/a> web application (we&#8217;d now like you to download to MAMP Document Root HTMLCSS folder, as well as  <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing.html----------------------GETME\">client_browsing.htm<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing.htm\">Client Browsing supervisor<\/a>) to start making this a possibility, with <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/pdfimageplustext.php---------------------GETME\">its changed, sometimes supervisory<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/pdfimageplustext.php---------------------GETME\">pdfimageplustext.php<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/pdfimageplustext.php\" title=\"Click picture\">Image and Text PDF<\/a> PHP web application (we&#8217;d now like you to download to MAMP Document Root folder).<\/p>\n<p>Local web servers will not only have this extra accessible functionality, but their response times should be faster too.  The public RJM Programming version will understand a MAMP HTTP:\/\/localhost:888\/ clone and also look for ffmpeg to facilitate our &#8220;Intranet&#8221; feeling video creation solution.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/web-share-api-intranet-video-tutorial\/'>Web Share API Intranet Video Tutorial<\/a>.<\/p-->\n<hr>\n<p id='wsapiagift'>Previous relevant <a target=_blank title='Web Share API Animated GIF Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/web-share-api-animated-gif-tutorial\/'>Web Share API Animated GIF 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\/web_share_api_test.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Web Share API Animated GIF Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/web_share_ag_share.jpg\" title=\"Web Share API Animated GIF Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Web Share API Animated GIF Tutorial<\/p><\/div>\n<p>On top of yesterday&#8217;s <a title='Web Share API Download Tutorial' href='#wsapidt'>Web Share API Download Tutorial<\/a> work, there are some more advances we&#8217;ll like to integrate into our inhouse <a target=_blank title='Web Share API' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Navigator\/share'>Web Share API<\/a> interfacer.<\/p>\n<p>The first of these is to offer an animated GIF file conversion when a PDF <font size=1>(so far just those Books)<\/font> is the media being shared.  When thinking of approaches to encapture image presentation material in a single file when we think of PDF we also often think of animated GIF, as it has the additional advantage of being able to be, in a webpage &#8230;<\/p>\n<ul>\n<li>an HTML img element &#8230; or &#8230;<\/li>\n<li>an HTML element&#8217;s background image<\/li>\n<\/ul>\n<p> &#8230; both offering that image rotation and looping advantages that animated GIF have over PDF, as again the data fidelity and viewing incarnation advantages PDF has over animated GIF.  We <font color=blue>just needed<\/font> &#8230;<\/p>\n<p><code><br \/>\n  <font color=blue>function doit(tv) {<br \/>\n  document.getElementById('aag').href=document.getElementById('aag').href.split('&')[0] + '&delay=' + tv;<br \/>\n  }<br \/>\n<br \/> <br \/>\n  function basebit(inuis) {<br \/>\n    if (inuis.indexOf('\/\/') != -1) {<br \/>\n      if (inuis.split('\/\/')[1].indexOf('\/') != -1) {<br \/>\n        return inuis.replace(inuis.split('\/\/')[0] + '\/\/' + inuis.split('\/\/')[1].split('\/')[0] + '\/','');<br \/>\n      }<br \/>\n    }<br \/>\n    return inuis;<br \/>\n  }<\/font><br \/>\n<br \/>\n  function trythis(inpdfidea) {<br \/>\n    if (inpdfidea.toLowerCase().indexOf('-0.pdf') != -1) {<br \/>\n      woq=window.open(inpdfidea.split('#')[0], '_blank', 'top=50,left=50,width=800,height=800');<br \/>\n      document.getElementById('adown').innerHTML+='&amp;nbsp;&lt;a style=\"text-decoration:none;cursor:pointer;background-color:yellow;border:2px solid red;margin: 13px 13px 13px 13px;\" target=_blank title=\"Download ' + ('\/' + inpdfidea.split('#')[0]).split('\/')[eval(-1 + ('\/' + inpdfidea.split('#')[0]).split('\/').length)] + ' PDF Book\" href=\"' + inpdfidea.split('#')[0] + '\" download&gt;' + '&amp;nbsp;Download &lt;font size=1&gt;' + ('\/' + inpdfidea.split('#')[0]).split('\/')[eval(-1 + ('\/' + inpdfidea.split('#')[0]).split('\/').length)] + '&lt;\/font&gt; PDF Book&amp;nbsp;&lt;\/a&gt;<font color=blue>&amp;nbsp;&lt;a style=\"text-decoration:none;cursor:pointer;background-color:pink;border:2px solid blue;margin: 13px 13px 13px 13px;\" target=_blank title=\"Create ' + ('\/' + inpdfidea.split('#')[0]).split('\/')[eval(-1 + ('\/' + inpdfidea.split('#')[0]).split('\/').length)].replace('-0.pdf','-ag.gif') + ' Animated GIF\" href=\"\/pdfimageplustext.php?first=' + encodeURIComponent(basebit(inpdfidea).split('#')[0].replace('-0.pdf','-0.jpg')) + '&delay=500' + '\" id=aag&gt;' + '&amp;nbsp;Create &lt;font size=1&gt;' + ('\/' + inpdfidea.split('#')[0]).split('\/')[eval(-1 + ('\/' + inpdfidea.split('#')[0]).split('\/').length)].replace('-0.pdf','-ag.gif') + '&lt;\/font&gt; Animated GIF Delay &amp;nbsp;&lt;\/a&gt;&amp;nbsp;&lt;input onchange=doit(this.value); type=number style=display:inline-block;background-color:pink; value=500 min=1 step=1 id=iag&gt;&lt;\/input&gt;<\/font>';<br \/>\n    }<br \/>\n    return inpdfidea;<br \/>\n  }<br \/>\n<\/code> <\/p>\n<p> &#8230; in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/web_share_api_test.html-------GETME \">the changed HTML and Javascript<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/web_share_api_test.html-------GETME\">web_share_api_test.html<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/web_share_api_test.html\">Web Share API supervisor<\/a> web application to start making this a possibility, with <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/pdfimageplustext.php--------------------GETME\">its changed, sometimes supervisory<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/pdfimageplustext.php--------------------GETME\">pdfimageplustext.php<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/pdfimageplustext.php\" title=\"Click picture\">Image and Text PDF<\/a> PHP web application.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/web-share-api-animated-gif-tutorial\/'>Web Share API Animated GIF Tutorial<\/a> ...<\/p>\n\n\n\n\n\n<hr>\n\n\n\n\n\n<p id='wsapidt'>Previous relevant <a target=_blank title='Web Share API Download Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/web-share-api-download-tutorial\/'>Web Share API Download Tutorial<\/a> is shown below.<\/p>\n\n\n\n\n[caption id=\"\" align=\"alignnone\" width=\"220\" caption=\"Web Share API Download Tutorial\"]<a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/web_share_api_test.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Web Share API Download Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/web_share_api_test_download.jpg\" title=\"Web Share API Download Tutorial\"  style=\"float:left;\" \/><\/a>[\/caption]\n\n\n\n<p>When we first wrote about the <a target=_blank title='Web Share API' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Navigator\/share'>Web Share API<\/a> with the recent <a title='Web Share API Primer Tutorial' href='#wsapipt'>Web Share API Primer Tutorial<\/a> you may have been like me, pretty excited about the prospect?!  Well, it's the lack of support, at least right now, that has let us down a little.  We thought it might help get around the bugbear of the use of PHP mail function and inline HTML emails, less a possibility these days with security concerns.<\/p>\n\n\n\n\n\n<p>And though the API is not well supported we thought we'd like to \"tread water usefully\" waiting for \"those days of acceptance\" and augment our interfacing web application to it, offering some new ...<\/p>\n\n\n\n\n\n<ul>\n\n\n<li>download functionality ... starting with ...<\/li>\n\n\n\n\n<li>offer \"a\" <a target=_blank href='https:\/\/www.w3schools.com\/tags\/att_a_download.asp' title='a link download attribute information from W3schools'>\"download attribute\"<\/a> button looking elements off the URL <a target=_blank title='Web Share API' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Navigator\/share'>Web Share API<\/a> sharing functionality<\/li>\n\n\n<\/ul>\n\n\n\n\n\n<p>What got us interested?  Yesterday's <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/image-and-text-pdf-large-animated-gif-text-nodes-tutorial\/' title='Image and Text PDF Large Animated GIF Text Nodes Tutorial'>Image and Text PDF Large Animated GIF Text Nodes Tutorial<\/a>'s web application's interfacing to our \"middle person\" interfacing to <a target=_blank title='Web Share API' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Navigator\/share'>Web Share API<\/a> functionality could benefit greatly from this.<\/p>\n\n\n\n\n\n<p>And that is because ... <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=uhiCFdWeQfA'>anyone, anyone<\/a>?  Yes, <a target=_blank title='?' href='https:\/\/en.wikipedia.org\/wiki\/Rip_Van_Winkle'>Rip<\/a>, glad you could go the distance with us on this one ... <\/p>\n\n\n\n\n\n<blockquote>\n ... any link on a shared email or SMS sent only lasts less than a day, but <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=d3KdY_rm1SE'>\"<strike>diamonds<\/strike>downloads are forevvver\"<\/a>\n<\/blockquote>\n\n\n\n\n\n<p>And don't forget that, also ...<\/p>\n\n\n\n\n\n<blockquote>\n ... \"a\" \"download attribute\" links are pretty much <i>cross<\/i> platform and <i>cross<\/i> browser\n<\/blockquote>\n\n\n\n\n\n<p>So, yes, <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/Mac\/rolling.gif'>Luna<\/a>, \"spaniel <i>cross<\/i>\" <b>is<\/b> better than <a target=_blank title='?' href='https:\/\/www.google.com\/search?q=spaniel+cranky&rlz=1C5CHFA_enAU973AU973&sxsrf=ALiCzsZEeqkZ6GN5hooH8L3k615kToYbFA%3A1663386850586&ei=4kQlY6axI9vy4-EP-_qUiAU&ved=0ahUKEwimquny9pr6AhVb-TgGHXs9BVEQ4dUDCA4&uact=5&oq=spaniel+cranky&gs_lcp=Cgdnd3Mtd2l6EAMyBQgAEKIEMgUIABCiBDIFCAAQogQyBQgAEKIEOgYIABAeEAc6CggAEB4QDxAHEAo6CAgAEB4QDxAHOggIABAeEAgQB0oECEEYAEoECEYYAFAAWOgMYN8PaABwAXgAgAGxAYgB6giSAQMwLjeYAQCgAQHAAQE&sclient=gws-wiz'>\"spaniel cranky\"<\/a>!<\/p>\n\n\n\n\n\n<p>See for yourself, with <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/web_share_api_test.html------GETME \">the changed HTML and Javascript<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/web_share_api_test.html------GETME\">web_share_api_test.html<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/web_share_api_test.html\">Web Share API supervisor<\/a> web application helped out be <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/pdfimageplustext.php--------------------GETME\">its changed, sometime supervisory<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/pdfimageplustext.php--------------------GETME\">pdfimageplustext.php<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/pdfimageplustext.php\" title=\"Click picture\">Image and Text PDF<\/a> PHP web application.<\/p>\n\n\n\n<!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/new-web-share-api-primer-tutorial\/'>New Web Share API Primer Tutorial<\/a>.<\/p-->\n<hr>\n<p id='wsapipt'>Previous relevant <a target=_blank title='Web Share API Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/web-share-api-primer-tutorial\/'>Web Share API 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\/web_share_api_test.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Web Share API Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/web_share_api_test.gif\" title=\"Web Share API Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Web Share API Primer Tutorial<\/p><\/div>\n<p>The web is improved by operating system <a target=_blank title='Context menu information from Wikipedia' href='https:\/\/en.wikipedia.org\/wiki\/Context_menu#:~:text=A%20context%20menu%20(also%20called,a%20right%2Dclick%20mouse%20operation.'>Context Menus<\/a> via <i>right clicks or two finger gestures<\/i> over &#8230;<\/p>\n<ul>\n<li>links<\/li>\n<li>media<\/li>\n<li>document<\/li>\n<\/ul>\n<p> &#8230; webpage contents.  Today, we roadtest a web API called <a target=_blank title='Web Share API' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Navigator\/share'>&#8220;Web Share API&#8221;<\/a> that simulates <i>right clicks or two finger gestures<\/i> with your normal everyday button press on a webpage.<\/p>\n<p>Of most use, is the &#8220;Web Share API&#8221; which can take multiple selected files (via a &#8220;browse&#8221; type button) &#8230;<\/p>\n<p><code><br \/>\n\/\/ Thanks to https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Navigator\/share<br \/>\n<br \/>\ndocument.getElementById('share').addEventListener('click', async () =&gt; {<br \/>\n  const files = input.files<br \/>\n<br \/>\n  if (files.length === 0) {<br \/>\n    shareurl();<br \/>\n    output.textContent = 'No files selected.'<br \/>\n    return<br \/>\n  }<br \/>\n<br \/>\n  \/\/ feature detecting navigator.canShare() also implies<br \/>\n  \/\/ the same for the navigator.share()<br \/>\n  if (!navigator.canShare) {<br \/>\n    output.textContent = `Your browser doesn't support the Web Share API.`<br \/>\n    return<br \/>\n  }<br \/>\n<br \/>\n  if (navigator.canShare({ files })) {<br \/>\n    try {<br \/>\n      await navigator.share({<br \/>\n        files,<br \/>\n        title: 'Media or documents',<br \/>\n        text: 'Take a look at media or documents below' + String.fromCharCode(10) + String.fromCharCode(10)<br \/>\n      })<br \/>\n      output.textContent = 'Shared!'<br \/>\n    } catch (error) {<br \/>\n      output.textContent = `Error: ${error.message}`<br \/>\n    }<br \/>\n  } else {<br \/>\n    output.textContent = `Your system doesn't support sharing these files.`<br \/>\n  }<br \/>\n});<br \/>\n<\/code><\/p>\n<p> &#8230; and attach them to an email or SMS or some other &#8220;Sharing Application&#8221; on that operating system &#8220;Context Menu&#8221; in readiness for the user to fill in other requirements and then send off to the recipient, as required.<\/p>\n<p>This API was a little strange to us in that on this macOS setup Safari web browser worked, rather than Google Chrome, which is a turn around from our usual expectations with these experimental Javascript APIs.  Feel free to try our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/web_share_api_test.html\">&#8220;proof of concept&#8221;<\/a> <a target=_blank title='Web Share API' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Navigator\/share'>&#8220;Web Share API&#8221;<\/a> based, thanks, HTML and Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/web_share_api_test.html\">web application<\/a> you can also try below &#8230;<\/p>\n<p><iframe style=\"width:100%;height:600px;\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/web_share_api_test.html\"><\/iframe><\/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='#d56396' onclick='var dv=document.getElementById(\"d56396\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/api\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d56396' 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='#d56858' onclick='var dv=document.getElementById(\"d56858\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/download\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d56858' 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='#d56867' onclick='var dv=document.getElementById(\"d56867\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/animated-gif\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d56867' 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='#d56872' onclick='var dv=document.getElementById(\"d56872\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/video\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d56872' 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='#d56889' onclick='var dv=document.getElementById(\"d56889\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/notifications\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d56889' 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='#d56896' onclick='var dv=document.getElementById(\"d56896\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/windows\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d56896' 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='#d56902' onclick='var dv=document.getElementById(\"d56902\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/scrolling\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d56902' 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='#d56905' onclick='var dv=document.getElementById(\"d56905\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/line\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d56905' 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='#d56911' onclick='var dv=document.getElementById(\"d56911\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/annotation\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d56911' 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='#d56923' onclick='var dv=document.getElementById(\"d56923\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/grandparent\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d56923' 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='#d56930' onclick='var dv=document.getElementById(\"d56930\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/file_get_contents\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d56930' 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='#d56936' onclick='var dv=document.getElementById(\"d56936\"); 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='d56936' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Yesterday&#8217;s PDF Image and Text Nodes Absolute Image URL Tutorial got us to thinking about the idea that the image you select as a backdrop to your PDF A4 Portrait or Landscape page may not suit with the dimensions it &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/pdf-image-and-text-nodes-canvas-scaling-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,29,37],"tags":[2824,52,2516,83,1832,4079,85,88,2661,174,184,2525,275,278,2147,327,336,360,380,415,418,429,2619,3008,564,576,587,590,3554,1658,614,623,624,626,630,631,652,2598,1807,714,720,744,760,770,795,4020,2791,4030,876,894,2411,913,1738,4080,997,1761,2132,2945,1045,1094,1841,1917,1107,4078,1126,1133,1784,1159,1168,1282,1299,1319,1345,1369,1400,4031,1583,1433,3010,1435,3936],"class_list":["post-56936","post","type-post","status-publish","format-standard","hentry","category-animation","category-elearning","category-event-driven-programming","category-operating-system","category-tutorials","tag-absolute","tag-absolute-url","tag-alert","tag-animated-gif","tag-annotation","tag-annotations","tag-apache","tag-api","tag-base64_encode","tag-button","tag-canvas","tag-child","tag-cross-browser","tag-cross-platform","tag-delimiter","tag-did-you-know","tag-directory","tag-download","tag-email","tag-ffmpeg","tag-file","tag-file_get_contents","tag-ghostscript","tag-grandparent","tag-hierarchy","tag-html","tag-iframe","tag-image","tag-image-url","tag-imagemagick","tag-integration","tag-interpretive","tag-intranet","tag-ios","tag-ipad","tag-iphone","tag-javascript","tag-line","tag-link","tag-local-web-server","tag-lossless","tag-mamp","tag-media","tag-menu","tag-mobile","tag-notification-api","tag-notifications","tag-notifications-api","tag-opacity","tag-overlay","tag-parent","tag-pdf","tag-photo","tag-popup-box","tag-programming","tag-prompt","tag-rectangle","tag-relative","tag-relative-url","tag-scale","tag-scribble","tag-scroll","tag-scrolling","tag-separator","tag-settimeout","tag-share","tag-signature","tag-sms","tag-software-integration","tag-timer","tag-transformation","tag-tutorial","tag-url","tag-video","tag-web","tag-web-share-api","tag-window","tag-window-open","tag-window-opener","tag-windows","tag-world-wide-web"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/56936"}],"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=56936"}],"version-history":[{"count":4,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/56936\/revisions"}],"predecessor-version":[{"id":56940,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/56936\/revisions\/56940"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=56936"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=56936"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=56936"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}