{"id":72554,"date":"2026-04-08T03:01:00","date_gmt":"2026-04-07T17:01:00","guid":{"rendered":"https:\/\/www.rjmprogramming.com.au\/ITblog\/?p=72554"},"modified":"2026-04-07T15:52:43","modified_gmt":"2026-04-07T05:52:43","slug":"universal-clipboard-onpaste-canvas-annotations-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/universal-clipboard-onpaste-canvas-annotations-tutorial\/","title":{"rendered":"Universal Clipboard Onpaste Canvas Annotations Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/user_of_signature_signature.htm\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Universal Clipboard Onpaste Canvas Annotations Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/universal_clipboard_annotation.gif\" title=\"Universal Clipboard Onpaste Canvas Annotations Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Universal Clipboard Onpaste Canvas Annotations Tutorial<\/p><\/div>\n<p>The recent onpaste event work has other places of &#8220;interventional interest&#8221;, for us, on top of the day before yesterday&#8217;s <a title='One Image Website Onpaste Uploading Device Copying Tutorial' href='#oiwoudct'>One Image Website Onpaste Uploading Device Copying Tutorial<\/a>.<\/p>\n<p>How about using it to have &#8230;<\/p>\n<ul>\n<li>mobile device<\/li>\n<li>take a photograph via mobile device Camera app &#8230; and it being iOS iPhone &#8230;<\/li>\n<li>via Photos app hover over relevant image and tap Copy option &#8230; and it being iOS iPhone with a MacBook Air of the same network nearby &#8230;<\/li>\n<li>be in a web browser starting up <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/user_of_signature_signature.htm\" rel=\"noopener\">our inhouse canvas annotation helper<\/a> web application &#8230; with two new HTML span contenteditable=true onpaste and onblur savvy &#8230;<br \/>\n<code><br \/>\n&lt;span title=\"Image copy Paste here to populate canvas fitting in.\" onclick=\"event.stopPropagation();\" onblur=\"myuplit(this,1);\" onpaste=\"myuplit(this,0);\" contenteditable=\"true\" id=\"imgcopycheck\" style=\"border:2px dotted red;width:50px;height:25px;display:inline-block;\"&gt;&amp;#x2B06;&amp;#xFE0F; &amp;#x1F5BC;&amp;#xFE0F;&lt;\/span&gt; &lt;span title=\"Image copy Paste here to populate canvas resizing.\" onclick=\"event.stopPropagation();\" onblur=\"myuplit(this,1);\" onpaste=\"myuplit(this,0);\" contenteditable=\"true\" id=\"imgcopychecken\" style=\"border:2px dotted red;width:50px;height:25px;display:inline-block;\"&gt;&amp;#x2B06;&amp;#xFE0F; &amp;#x1F4C8;&lt;\/span&gt;<br \/>\n<\/code><br \/>\n &#8230; elements &#8230;\n<\/li>\n<li>click on the one of interest regarding image sizing &#8230;<\/li>\n<li>Edit-&gt;Paste (or control-V) &#8230; accesses the great Apple <a target=\"_blank\" title='Universal Clipboard' href='https:\/\/support.apple.com\/en-au\/102430' rel=\"noopener\"><i>Universal Clipboard<\/i><\/a> functionality &#8230;<br \/>\n<code><br \/>\n  var yehbutisob=false, xcelem=null, xccontext=null, xcimg=null, within=false, mydivo=null, origh=-1, origw=-1, altdu='';<br \/>\n<br \/>\n  function iftoolarge(zimg,zw,zh) {<br \/>\n    var zcanvas = document.createElement('canvas');<br \/>\n    zcanvas.width = zw;<br \/>\n    zcanvas.height = zh;<br \/>\n    var zctx = zcanvas.getContext('2d');<br \/>\n<br \/>\n    zctx.drawImage(zimg, 0, 0);<br \/>\n<br \/>\n    \/\/ Get JPG as Data URL (quality 0.9)<br \/>\n    altdu=zcanvas.toDataURL(\"image\/jpeg\", 0.1);<br \/>\n<br \/>\n    setTimeout(function(){ xcimg.src=altdu; altdu=''; }, 2000);<br \/>\n    return false;<br \/>\n  }<br \/>\n<br \/>\n  function myuplit(divo, isonblurnotonpaste) {<br \/>\n     if (isonblurnotonpaste != 0) {<br \/>\n       yehbutisob=true;<br \/>\n     }<br \/>\n     if (divo.innerHTML.indexOf('data:image\/') == 0) {<br \/>\n        mydivo=divo;<br \/>\n        if (('' + divo.title).indexOf(' Paste') != -1) {<br \/>\n         xcelem=parent.document.getElementById('topcanvas');<br \/>\n        } else {<br \/>\n         xcelem=document.getElementById('topcanvas');<br \/>\n        }<br \/>\n        xccontext = xcelem.getContext(\"2d\");<br \/>\n        xcimg=new Image;<br \/>\n        \/\/console.log('cancontw,canconth=' + cancontw + ',' + canconth + ' cancont=' + cancont);<br \/>\n        xcimg.onload = function(){<br \/>\n          if (altdu == ' ') {<br \/>\n          return iftoolarge(xcimg,xcimg.width,xcimg.height);<br \/>\n          } else {<br \/>\n          if (mydivo.id.indexOf('en') != -1) {<br \/>\n          if (origw &lt; 0) {<br \/>\n            origw=eval('' + xcelem.width);<br \/>\n            origh=eval('' + xcelem.height);<br \/>\n          }<br \/>\n          xcelem.width=xcimg.width;<br \/>\n          xcelem.height=xcimg.height;<br \/>\n          xccontext.drawImage(xcimg,0,0);<br \/>\n          } else {<br \/>\n          if (origw &gt; 0) {<br \/>\n          xcelem.width=origw;<br \/>\n          xcelem.height=origh;<br \/>\n          } else {<br \/>\n          xcelem.width=xcelem.width;<br \/>\n          xcelem.height=xcelem.height;<br \/>\n          }<br \/>\n          \/\/setTimeout(function(){<br \/>\n          \/\/top.document.title=('1;' + yehbutisob);<br \/>\n          xccontext.drawImage(xcimg,0,0,xcimg.width,xcimg.height,0,0,xcelem.width,xcelem.height);<br \/>\n          }<br \/>\n          if (mydivo.id.indexOf('en') != -1) {<br \/>\n          mydivo.innerHTML='&amp;#x2B06;&amp;#xFE0F; &amp;#x1F4C8;';<br \/>\n          } else {<br \/>\n          mydivo.innerHTML='&amp;#x2B06;&amp;#xFE0F; &amp;#x1F5BC;&amp;#xFE0F;';<br \/>\n          }<br \/>\n          \/\/}, 6000);<br \/>\n          \/\/alert(1);<br \/>\n          }<br \/>\n        };<br \/>\n        if (eval('' + divo.innerHTML.length) &gt; 9000000) {<br \/>\n         altdu=' ';<br \/>\n        } else {<br \/>\n         altdu='';<br \/>\n        }<br \/>\n        xcimg.src=divo.innerHTML;<br \/>\n<br \/>\n     } else if (divo.innerHTML.indexOf('\"data:image\/') != -1) {<br \/>\n        mydivo=divo;<br \/>\n        if (('' + divo.title).indexOf(' Paste') != -1) {<br \/>\n         xcelem=parent.document.getElementById('topcanvas');<br \/>\n        } else {<br \/>\n         xcelem=document.getElementById('topcanvas');<br \/>\n        }<br \/>\n        xccontext = xcelem.getContext(\"2d\");<br \/>\n        xcimg=new Image;<br \/>\n        \/\/console.log('cancontw,canconth=' + cancontw + ',' + canconth + ' cancont=' + cancont);<br \/>\n        xcimg.onload = function(){<br \/>\n          if (altdu == ' ') {<br \/>\n          return iftoolarge(xcimg,xcimg.width,xcimg.height);<br \/>\n          } else {<br \/>\n          if (mydivo.id.indexOf('en') != -1) {<br \/>\n          if (origw &lt; 0) {<br \/>\n            origw=eval('' + xcelem.width);<br \/>\n            origh=eval('' + xcelem.height);<br \/>\n          }<br \/>\n          xcelem.width=xcimg.width;<br \/>\n          xcelem.height=xcimg.height;<br \/>\n          xccontext.drawImage(xcimg,0,0);<br \/>\n          } else {<br \/>\n          if (origw &gt; 0) {<br \/>\n          xcelem.width=origw;<br \/>\n          xcelem.height=origh;<br \/>\n          } else {<br \/>\n          xcelem.width=xcelem.width;<br \/>\n          xcelem.height=xcelem.height;<br \/>\n          }<br \/>\n          \/\/setTimeout(function(){<br \/>\n          \/\/top.document.title=('2;' + yehbutisob);<br \/>\n          xccontext.drawImage(xcimg,0,0,xcimg.width,xcimg.height,0,0,xcelem.width,xcelem.height);<br \/>\n          }<br \/>\n          if (mydivo.id.indexOf('en') != -1) {<br \/>\n          mydivo.innerHTML='&amp;#x2B06;&amp;#xFE0F; &amp;#x1F4C8;';<br \/>\n          } else {<br \/>\n          mydivo.innerHTML='&amp;#x2B06;&amp;#xFE0F; &amp;#x1F5BC;&amp;#xFE0F;';<br \/>\n          }<br \/>\n          \/\/}, 6000);<br \/>\n          \/\/alert(2);<br \/>\n          }<br \/>\n        };<br \/>\n        if (eval('' + divo.innerHTML.length) &gt; 9000000) {<br \/>\n         altdu=' ';<br \/>\n        } else {<br \/>\n         altdu='';<br \/>\n        }<br \/>\n        xcimg.src='data:image\/' + divo.innerHTML.split('data:image\/')[1].split('\"')[0];<br \/>\n<br \/>\n     } else if (eval('' + divo.innerHTML.length) &lt; 30 && isonblurnotonpaste == 0) {<br \/>\n<br \/>\n       yehbutisob=false;<br \/>\n       mydivo=divo;<br \/>\n       setTimeout(function(){<br \/>\n       if (!yehbutisob) {<br \/>\n       if (('' + mydivo.title).indexOf(' Paste') != -1) {<br \/>\n          if (mydivo.id.indexOf('en') != -1) {<br \/>\n          mydivo.innerHTML='&amp;#x2B06;&amp;#xFE0F; &amp;#x1F4C8;';<br \/>\n          } else {<br \/>\n          mydivo.innerHTML='&amp;#x2B06;&amp;#xFE0F; &amp;#x1F5BC;&amp;#xFE0F;';<br \/>\n          }<br \/>\n       parent.document.getElementById('jsemail').focus();<br \/>\n                 \/\/top.document.title+=('33');<br \/>\n       } else {<br \/>\n          if (mydivo.id.indexOf('en') != -1) {<br \/>\n          mydivo.innerHTML='&amp;#x2B06;&amp;#xFE0F; &amp;#x1F4C8;';<br \/>\n          } else {<br \/>\n          mydivo.innerHTML='&amp;#x2B06;&amp;#xFE0F; &amp;#x1F5BC;&amp;#xFE0F;';<br \/>\n          }<br \/>\n       document.getElementById('jsemail').focus();<br \/>\n                 \/\/top.document.title+=('333');<br \/>\n       }<br \/>\n       yehbutisob=true;<br \/>\n       }<br \/>\n       }, 8000);<br \/>\n     } else {<br \/>\n       setTimeout(function(){ within=false; }, 56000);<br \/>\n     }<br \/>\n<br \/>\n  }<br \/>\n<br \/>\nfunction checkoncp() {<br \/>\n     if (parent.document.getElementById('mydbut') && parent.document.getElementById('target') && !parent.document.getElementById('imgcopycheck')) {<br \/>\n       parent.document.getElementById('target').innerHTML+=\"&lt;span title=\\\"Image copy Paste here to populate canvas fitting in.\\\" onclick=\\\"event.stopPropagation();\\\" onblur=\\\"myuplit(this,1);\\\" onpaste=\\\"myuplit(this,0);\\\" contenteditable=true id=\\\"imgcopycheck\\\" style=\\\"border:2px dotted red;width:50px;height:25px;display:inline-block;\\\"&gt;&amp;#x2B06;&amp;#xFE0F; &amp;#x1F5BC;&amp;#xFE0F;&lt;\/span&gt;&nbsp;&lt;span title=\\\"Image copy Paste here to populate canvas resizing.\\\" onclick=\\\"event.stopPropagation();\\\" onblur=\\\"myuplit(this,1);\\\" onpaste=\\\"myuplit(this,0);\\\" contenteditable=true id=\\\"imgcopychecken\\\" style=\\\"border:2px dotted red;width:50px;height:25px;display:inline-block;\\\"&gt;&amp;#x2B06;&amp;#xFE0F; &amp;#x1F4C8;&lt;\/span&gt;\";<br \/>\n     } else if (document.getElementById('mydbut') && document.getElementById('target') && !document.getElementById('imgcopycheck')) {<br \/>\n       document.getElementById('target').innerHTML+=\"&lt;span title=\\\"Image Copy paste here to populate canvas fitting in.\\\" onclick=\\\"event.stopPropagation();\\\" onblur=\\\"myuplit(this,1);\\\" onpaste=\\\"myuplit(this,0);\\\" contenteditable=true id=\\\"imgcopycheck\\\" style=\\\"border:2px dotted red;width:50px;height:25px;display:inline-block;\\\"&gt;&amp;#x2B06;&amp;#xFE0F; &amp;#x1F5BC;&amp;#xFE0F;&lt;\/span&gt;&nbsp;&lt;span title=\\\"Image Copy paste here to populate canvas resizing.\\\" onclick=\\\"event.stopPropagation();\\\" onblur=\\\"myuplit(this,1);\\\" onpaste=\\\"myuplit(this,0);\\\" contenteditable=true id=\\\"imgcopychecken\\\" style=\\\"border:2px dotted red;width:50px;height:25px;display:inline-block;\\\"&gt;&amp;#x2B06;&amp;#xFE0F; &amp;#x1F4C8;&lt;\/span&gt;\";<br \/>\n     } else {<br \/>\n       setTimeout(checkoncp, 5000);<br \/>\n     }<br \/>\n}<br \/>\n<br \/>\nsetTimeout(checkoncp, 5000);<br \/>\n<\/code><br \/>\n &#8230; and then we optionally tab out &#8230;<\/li>\n<li>see canvas be given content that is that image (ie. digital photograph) &#8230; ready for &#8230;<\/li>\n<li>optional annotation functionality there<\/li>\n<\/ul>\n<p> &#8230; to flesh out what you might be trying to achieve, and facilitated by <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/web_share_api_test.js--------GETME\" rel=\"noopener\">our changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/web_share_api_test.js--------GETME\" rel=\"noopener\">web_share_api_test.js<\/a> external Javascript?<\/p>\n<p><video controls style=width:98%;><source type=video\/mp4 src='\/\/www.rjmprogramming.com.au\/universal_clipboard_annotation.mp4'><\/source><\/video><\/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\/new-one-image-website-onpaste-uploading-device-copying-tutorial\/' rel=\"noopener\">New One Image Website Onpaste Uploading Device Copying Tutorial<\/a>.<\/p-->\n<hr>\n<p id='oiwoudct'>Previous relevant <a target=\"_blank\" title='One Image Website Onpaste Uploading Device Copying Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/one-image-website-onpaste-uploading-device-copying-tutorial\/' rel=\"noopener\">One Image Website Onpaste Uploading Device Copying Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/streetart\/\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"One Image Website Onpaste Uploading Device Copying Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/streetart\/better_uploading_copying.gif\" title=\"One Image Website Onpaste Uploading Device Copying Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">One Image Website Onpaste Uploading Device Copying Tutorial<\/p><\/div>\n<p>Further to yesterday&#8217;s <a title='One Image Website Onpaste Uploading Hashtagging Tutorial' href='#oiwouht'>One Image Website Onpaste Uploading Hashtagging Tutorial<\/a> you may be wondering about our original gambit statement wondering if regarding &#8230;<\/p>\n<blockquote><p>\ntake a new relevant photograph (on an iPhone, for instance) &#8230; and then easily &#8230;\n<\/p><\/blockquote>\n<p> &#8230; upload?  Aren&#8217;t we worried about the iPhone device end of &#8230;<\/p>\n<ol>\n<li>getting the image off the Camera app &#8230;<\/li>\n<li>and then referencing in the Photos app &#8230;<\/li>\n<li>via a long hover and choosing the Copy option<\/li>\n<\/ol>\n<p> &#8230; will just fall upon deaf ears as far as our MacBook Air web browser use of the &#8220;One Image Website&#8221; webpage goes?<\/p>\n<p>Well, read this <a target=\"_blank\" title='Apple device buffer sharing' href='https:\/\/www.google.com\/search?q=if+an+iPhone+is+connected+to+a+MacBook+Air+can+the+copy+buffer+of+the+iPhone+be+transferred+to+the+copy+buffer+of+the+MacBook+Air&#038;rlz=1C5OZZY_en&#038;oq=if+an+iPhone+is+connected+to+a+MacBook+Air+can+the+copy+buffer+of+the+iPhone+be+transferred+to+the+copy+buffer+of+the+MacBook+Air&#038;gs_lcrp=EgZjaHJvbWUyBggAEEUYOdIBCTUxNTUxajBqN6gCALACAA&#038;sourceid=chrome&#038;ie=UTF-8' rel=\"noopener\">&#8220;if an iPhone is connected to a MacBook Air can the copy buffer of the iPhone be transferred to the copy buffer of the MacBook Air<\/a>?&#8221; ask &#8230;<\/p>\n<blockquote cite='https:\/\/www.google.com\/search?q=if+an+iPhone+is+connected+to+a+MacBook+Air+can+the+copy+buffer+of+the+iPhone+be+transferred+to+the+copy+buffer+of+the+MacBook+Air&#038;rlz=1C5OZZY_en&#038;oq=if+an+iPhone+is+connected+to+a+MacBook+Air+can+the+copy+buffer+of+the+iPhone+be+transferred+to+the+copy+buffer+of+the+MacBook+Air&#038;gs_lcrp=EgZjaHJvbWUyBggAEEUYOdIBCTUxNTUxajBqN6gCALACAA&#038;sourceid=chrome&#038;ie=UTF-8'><p>\nYes, if an iPhone is connected to a MacBook Air\u2014or even just nearby\u2014the copy buffer (clipboard) of the iPhone can be transferred to the copy buffer of the MacBook Air. Apple calls this feature Universal Clipboard.<br \/>\n<br \/>\nIt allows you to copy text, images, photos, and videos on your iPhone and instantly paste them onto your Mac (or vice versa).\n<\/p><\/blockquote>\n<p>Cute, huh?!  If on the same network, and close, the iPhone and MacBook Air do not even need an Apple White Lead connection, necessarily, though we noticed it sped up the process!<\/p>\n<p>Given the &#8220;smarts&#8221; at this end, today, we turned to &#8230;<\/p>\n<p><code><br \/>\nvar myxhr=null, formis=null, iclen=0, icsuffix='', extnew='.png', yehbutisob=true;<br \/>\nvar ipuvalid=true, ipis='', lhend='', lhdata='', fourthousand=(document.URL.indexOf('diris=') != -1 ? 10000 : 4000), gencount=0, upcount=(document.URL.indexOf('data=%') != -1 ? eval('' + decodeURIComponent(document.URL.split('data=')[1].split('&')[0].split('#')[0]).split(',').length) : 0);<br \/>\nvar fetchcmd=\".\/index.php?diris=images&prefixis=DSC_0&startsuffix=279&endsuffix=364\", within=false;<br \/>\n<br \/>\n\/\/ Thanks to <a target=\"_blank\" href='https:\/\/www.google.com\/search?q=javascript+convert+png+to+jpg&#038;rlz=1C5OZZY_en&#038;oq=javascript+convert+png+to+jpg&#038;gs_lcrp=EgZjaHJvbWUyCggAEEUYFhgeGDkyCAgBEAAYFhgeMggIAhAAGBYYHjINCAMQABiGAxiABBiKBTIHCAQQABjvBdIBCTEyNzIxajBqN6gCALACAA&#038;sourceid=chrome&#038;ie=UTF-8' rel=\"noopener\">https:\/\/www.google.com\/search?q=javascript+convert+png+to+jpg&rlz=1C5OZZY_en&oq=javascript+convert+png+to+jpg&gs_lcrp=EgZjaHJvbWUyCggAEEUYFhgeGDkyCAgBEAAYFhgeMggIAhAAGBYYHjINCAMQABiGAxiABBiKBTIHCAQQABjvBdIBCTEyNzIxajBqN6gCALACAA&sourceid=chrome&ie=UTF-8<\/a><br \/>\nconst convertPngToJpg = (pngDataUrl) =&gt; {<br \/>\n  const img = new Image();<br \/>\n  img.onload = () =&gt; {<br \/>\n    const canvas = document.createElement('canvas');<br \/>\n    canvas.width = img.width;<br \/>\n    canvas.height = img.height;<br \/>\n    const ctx = canvas.getContext('2d');<br \/>\n    <br \/>\n    \/\/ Optional: Fill white background (JPEGs don't support transparency)<br \/>\n    ctx.fillStyle = \"#FFFFFF\";<br \/>\n    ctx.fillRect(0, 0, canvas.width, canvas.height);<br \/>\n    <br \/>\n    ctx.drawImage(img, 0, 0);<br \/>\n    <br \/>\n    \/\/ Get JPG as Data URL (quality 0.9)<br \/>\n    const jpgDataUrl = canvas.toDataURL(\"image\/jpeg\", 0.1);<br \/>\n    extnew='.jpg';<br \/>\n    icsuffix=(' 0' + jpgDataUrl.length);<br \/>\n    formis.append('newdurl', jpgDataUrl);<br \/>\n    myxhr.open('POST', '.\/index.php'); \/\/, true);<br \/>\n    myxhr.onreadystatechange=mstateChanged;<br \/>\n    myxhr.send(formis);<br \/>\n    console.log(jpgDataUrl);<br \/>\n  };<br \/>\n  img.src = pngDataUrl;<br \/>\n};<br \/>\n<\/code><\/p>\n<p> &#8230; as a solution to massive image png copy buffers coming off the camera being fed into an HTML<sup>5<\/sup> canvas and out as a reduced size jpeg image to allow PHP $_POST methodologies used for the uploading process not be overwhelmed, as per the adjusted Ajax code &#8230;<\/p>\n<p><code><br \/>\n   function mstateChanged() {<br \/>\n   var ioff=1, thisoff=1;<br \/>\n   var vsoff=0, getridof='YouLlneverFinDtHis';<br \/>\n   \/\/document.title=document.title.substring(0,1) + ' readyState=' + myxhr.readyState + ' and status=' + myxhr.status + ' ' + iclen;<br \/>\n   if (myxhr.readyState == 4) {<br \/>\n    if (myxhr.status == 200) {<br \/>\n       \/\/alert(iclen);<br \/>\n       setTimeout(function(){<br \/>\n    if (document.URL.indexOf('#') != -1 && lhdata == '' && document.URL.indexOf('data=%') != -1) {<br \/>\n     lhdata=(('' + location.search + decodeURIComponent(('' + location.hash).replace(\/^undefined\/g,'').replace(\/^null\/g,'').replace(\/^\\#\/g,''))).split('data=')[1] ? decodeURIComponent(('' + location.search + decodeURIComponent(('' + location.hash).replace(\/^undefined\/g,'').replace(\/^null\/g,'').replace(\/^\\#\/g,'')))).split('data=')[eval(-1 + decodeURIComponent(('' + location.search + decodeURIComponent(('' + location.hash).replace(\/^undefined\/g,'').replace(\/^null\/g,'').replace(\/^\\#\/g,'')))).split('data=').length)].split('&')[0].split('#')[0] : '');<br \/>\n     var coms=lhdata.split(',');<br \/>\n     vsoff=eval('' + fetchcmd.split('endsuffix=')[1].split('&')[0].split('#')[0]);<br \/>\n     getridof=fetchcmd.split('diris=')[1].split('&')[0].split('#')[0] + '\/' + fetchcmd.split('prefixis=')[1].split('&')[0].split('#')[0];<br \/>\n     for (var iuyt=0; iuyt&lt;coms.length; iuyt++) {<br \/>\n       \/\/alert(coms[iuyt] + ' ... ' + getridof + ' ... ' + coms[iuyt].replace('[','').replace(']','').replace('\"','').replace('\"','').replace(getridof,''));<br \/>\n       thisoff=eval(eval(coms[iuyt].replace('[','').replace(']','').replace('\"','').replace('\"','').replace(getridof,'').split('.')[0]) - vsoff + 1);<br \/>\n       if (thisoff &gt; ioff) { ioff=thisoff; }<br \/>\n     }<br \/>\n    }<br \/>\n    if (document.URL.indexOf('#') == -1) {<br \/>\n    if (lhdata == '' && fetchcmd.indexOf('endsuffix=') != -1) {<br \/>\n    lhdata='[\"' + fetchcmd.split('diris=')[1].split('&')[0].split('#')[0] + '\/' + fetchcmd.split('prefixis=')[1].split('&')[0].split('#')[0] + eval(1 + eval('' + fetchcmd.split('endsuffix=')[1].split('&')[0].split('#')[0])) + extnew + '\"]';<br \/>\n    lhend='#' + encodeURIComponent(eval(1 + number_of_image) + '.' + fetchcmd.split('endsuffix=')[1].split('&')[0].split('#')[0]) + '&diris=' + fetchcmd.split('diris=')[1] + '&data=' + encodeURIComponent(lhdata);<br \/>\n    if (document.URL.indexOf(lhend.substring(1)) == -1) {<br \/>\n    if (6 == 6) {<br \/>\n    location.href=(document.URL.indexOf('?') != -1 ? document.URL.split('#')[0] + '&endbit=' + reduced(lhend).substring(1) + lhend : document.URL.split('#')[0] + '?endbit=' + reduced(lhend).substring(1) + lhend);<br \/>\n    } else {<br \/>\n    location.hash=lhend;<br \/>\n    }<br \/>\n    }<br \/>\n    }<br \/>\n    } else if (lhdata.indexOf('[') != -1) {<br \/>\n    lhdata=lhdata.replace('[', '[\"' + fetchcmd.split('diris=')[1].split('&')[0].split('#')[0] + '\/' + fetchcmd.split('prefixis=')[1].split('&')[0].split('#')[0] + eval(ioff + eval('' + fetchcmd.split('endsuffix=')[1].split('&')[0].split('#')[0])) + extnew + '\",');<br \/>\n    lhend='#' + encodeURIComponent(eval(1 + number_of_image) + '.' + fetchcmd.split('endsuffix=')[1].split('&')[0].split('#')[0]) + '&diris=' + fetchcmd.split('diris=')[1] + '&data=' + encodeURIComponent(lhdata);<br \/>\n    if (document.URL.indexOf(lhend.substring(1)) == -1) {<br \/>\n    if (6 == 6) {<br \/>\n    location.href=(document.URL.indexOf('?') != -1 ? document.URL.split('&')[0].replace('data=','daWASta=').replace('?diris=','?dirWASis=').replace('?endbit=','?endWASbit=') + '&endbit=' + reduced(lhend).substring(1) + lhend : document.URL.split('#')[0].replace('data=','daWASta=') + '?endbit=' + reduced(lhend).substring(1) + lhend);<br \/>\n    } else {<br \/>\n    location.hash=lhend;<br \/>\n    }<br \/>\n    }<br \/>\n    }<br \/>\n         within=false;<br \/>\n       }, 26000);<br \/>\n    }<br \/>\n   }<br \/>\n   }<br \/>\n  <br \/>\n  function uplitc(icontis) {<br \/>\n     if (icontis.indexOf('data:image\/') == 0) {<br \/>\n       \/\/document.title='A';<br \/>\n       myxhr = new XMLHttpRequest();<br \/>\n       formis = new FormData();<br \/>\n       formis.append('diris', fetchcmd.split('diris=')[1].split('&')[0].split('#')[0]);<br \/>\n       formis.append('prefixis', fetchcmd.split('prefixis=')[1].split('&')[0].split('#')[0]);<br \/>\n       formis.append('startsuffix', fetchcmd.split('startsuffix=')[1].split('&')[0].split('#')[0]);<br \/>\n       formis.append('endsuffix', fetchcmd.split('endsuffix=')[1].split('&')[0].split('#')[0]);<br \/>\n       iclen=eval('' + icontis.length);<br \/>\n       extnew='.' + icontis.split('data:image\/')[1].split(',')[0].split(';')[0].replace('jpeg','jpg');<br \/>\n       if (iclen &gt; 9000000) {<br \/>\n       convertPngToJpg(icontis);<br \/>\n       } else {<br \/>\n       formis.append('newdurl', icontis);<br \/>\n       myxhr.open('POST', '.\/index.php'); \/\/, true);<br \/>\n       myxhr.send(formis);<br \/>\n       }<br \/>\n     }<br \/>\n  }<br \/>\n  <br \/>\n  function uplit(divo, isonblurnotonpaste) {<br \/>\n     var icontis='';<br \/>\n     if (isonblurnotonpaste != 0) {<br \/>\n       yehbutisob=true;<br \/>\n     }<br \/>\n     if (divo.innerHTML.indexOf('data:image\/') == 0) {<br \/>\n       icontis=divo.innerHTML;<br \/>\n       divo.innerHTML='';<br \/>\n       divo.title=icontis;<br \/>\n       \/\/document.title='B';<br \/>\n       myxhr = new XMLHttpRequest();<br \/>\n       formis = new FormData();<br \/>\n       formis.append('diris', fetchcmd.split('diris=')[1].split('&')[0].split('#')[0]);<br \/>\n       formis.append('prefixis', fetchcmd.split('prefixis=')[1].split('&')[0].split('#')[0]);<br \/>\n       formis.append('startsuffix', fetchcmd.split('startsuffix=')[1].split('&')[0].split('#')[0]);<br \/>\n       formis.append('endsuffix', fetchcmd.split('endsuffix=')[1].split('&')[0].split('#')[0]);<br \/>\n       iclen=eval('' + icontis.length);<br \/>\n       extnew='.' + icontis.split('data:image\/')[1].split(',')[0].split(';')[0].replace('jpeg','jpg');<br \/>\n       if (iclen &gt; 9000000) {<br \/>\n       convertPngToJpg(icontis);<br \/>\n       } else {<br \/>\n       formis.append('newdurl', icontis);<br \/>\n       myxhr.open('POST', '.\/index.php'); \/\/, true);<br \/>\n       myxhr.onreadystatechange=mstateChanged;<br \/>\n       myxhr.send(formis);<br \/>\n       }<br \/>\n       \/\/alert(78);<br \/>\n       \/\/setTimeout(function(){ within=false; }, 6000);<br \/>\n     } else if (divo.innerHTML.indexOf('\"data:image\/') != -1) {<br \/>\n       icontis='data:image\/' + divo.innerHTML.split('data:image\/')[1].split('\"')[0];<br \/>\n       divo.innerHTML='';<br \/>\n       divo.title=icontis;<br \/>\n       \/\/document.title='C';<br \/>\n       myxhr = new XMLHttpRequest();<br \/>\n       formis = new FormData();<br \/>\n       formis.append('diris', fetchcmd.split('diris=')[1].split('&')[0].split('#')[0]);<br \/>\n       formis.append('prefixis', fetchcmd.split('prefixis=')[1].split('&')[0].split('#')[0]);<br \/>\n       formis.append('startsuffix', fetchcmd.split('startsuffix=')[1].split('&')[0].split('#')[0]);<br \/>\n       formis.append('endsuffix', fetchcmd.split('endsuffix=')[1].split('&')[0].split('#')[0]);<br \/>\n       iclen=eval('' + icontis.length);<br \/>\n       extnew='.' + icontis.split('data:image\/')[1].split(',')[0].split(';')[0].replace('jpeg','jpg');<br \/>\n       if (iclen &gt; 9000000) {<br \/>\n       convertPngToJpg(icontis);<br \/>\n       } else {<br \/>\n       formis.append('newdurl', icontis);<br \/>\n       myxhr.open('POST', '.\/index.php'); \/\/, true);<br \/>\n       myxhr.onreadystatechange=mstateChanged;<br \/>\n       myxhr.send(formis);<br \/>\n       }<br \/>\n       \/\/alert(278);<br \/>\n       \/\/setTimeout(function(){ within=false; }, 6000);<br \/>\n     } else if (eval('' + divo.innerHTML.length) &lt; 30 && isonblurnotonpaste == 0) {<br \/>\n       yehbutisob=false;<br \/>\n       setTimeout(function(){<br \/>\n       if (!yehbutisob) {<br \/>\n       document.getElementById('offscreen').focus();<br \/>\n       yehbutisob=true;<br \/>\n       }<br \/>\n       }, 8000);<br \/>\n     } else {<br \/>\n       setTimeout(function(){ within=false; }, 56000);<br \/>\n     }<br \/>\n  }<br \/>\n<\/code><\/p>\n<p> &#8230; helped out by <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/onrightclick.js------GETME\" rel=\"noopener\">changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/onrightclick.js------GETME\" rel=\"noopener\">onrightclick.js<\/a> external Javascript.<\/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\/one-image-website-onpaste-uploading-device-copying-tutorial\/' rel=\"noopener\">One Image Website Onpaste Uploading Device Copying Tutorial<\/a>.<\/p-->\n<hr>\n<p id='oiwouht'>Previous relevant <a target=\"_blank\" title='One Image Website Onpaste Uploading Hashtagging Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/one-image-website-onpaste-uploading-hashtagging-tutorial\/' rel=\"noopener\">One Image Website Onpaste Uploading Hashtagging Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/streetart\/\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"One Image Website Onpaste Uploading Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/streetart\/better_uploading_subsequent.gif\" title=\"One Image Website Onpaste Uploading Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">One Image Website Onpaste Uploading Hashtagging Tutorial<\/p><\/div>\n<p>You guessed it!  Yesterday&#8217;s <a title='One Image Website Onpaste Uploading Tutorial' href='#oiwout'>One Image Website Onpaste Uploading Tutorial<\/a>&#8216;s work was working just within the realms of those &#8220;first webpages&#8221; occurring within the &#8220;One Image Website&#8221; project paradigm, but that we needed to pass onto subsequent webpages this &#8220;new image uploaded&#8221; list as &#8230;.<\/p>\n<ul>\n<li>hashtagged data &#8230; but also &#8230;<\/li>\n<li>argumented data (ie. ? and &#038; arguments) for  those &#8220;first webpages&#8221; occurring within the &#8220;One Image Website&#8221; project paradigm &#8230;<\/li>\n<\/ul>\n<p> &#8230; the reason being that document.referrer cannot be used to glean hashtagged data.  Luckily in this project that second requirement above, which asks for a true document reload, is not the end of the woooorrrrllllddd, as we know it, and means we can get help from the external Javascript we use in these projects, as per &#8230;<\/p>\n<ul>\n<li>yesterday&#8217;s <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/onrightclick.js----GETME\" rel=\"noopener\">changed onrightclick.js<\/a> as a precursor to &#8230;<\/li>\n<li>today&#8217;s <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/onrightclick.js-----GETME\" rel=\"noopener\">changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/onrightclick.js-----GETME\" rel=\"noopener\">onrightclick.js<\/a> external Javascript &#8230;<\/li>\n<\/ul>\n<p> &#8230; featuring a new Javascript function the subsequent webpages can call just after any &#8230;<\/p>\n<p><code><br \/>\nimage_list = new Array();<br \/>\n<\/code><\/p>\n<p> &#8230; that being &#8230;<\/p>\n<p><code><br \/>\ninitthearr(image_list);<br \/>\n<\/code><\/p>\n<p> &#8230; as per &#8230;<\/p>\n<p><code><br \/>\n    var prefx='';<br \/>\n  <br \/> <br \/>\n    function reduced(documentreferrer) {<br \/>\n     if (('' + documentreferrer).indexOf('data=') != -1) {<br \/>\n        if (('' + documentreferrer).indexOf('diris=') != -1) {<br \/>\n          if (prefx == '' && ('' + documentreferrer).indexOf('prefixis=') != -1) {<br \/>\n            prefx=decodeURIComponent(('' + documentreferrer).split('diris=')[1].split('&')[0].split('#')[0]) + '\/' + decodeURIComponent(('' + documentreferrer).split('prefixis=')[1].split('&')[0].split('#')[0]);<br \/>\n          }<br \/>\n        }<br \/>\n     }<br \/>\n     if (prefx != '') {<br \/>\n      if (documentreferrer.indexOf(encodeURIComponent(prefx)) != -1) {<br \/>\n       while (documentreferrer.indexOf(encodeURIComponent(prefx)) != -1) {<br \/>\n         documentreferrer=documentreferrer.replace(encodeURIComponent(prefx),'');<br \/>\n       }<br \/>\n      }<br \/>\n     }<br \/>\n     return documentreferrer;<br \/>\n    }<br \/>\n    <br \/>\n    function initthearr(inarr) {<br \/>\n      var fort=false, jsonstr='', datas=[], inm=0;<br \/>\n      if (('' + location.hash).indexOf('data=') != -1) {<br \/>\n        if (('' + location.hash).indexOf('diris=') != -1) {<br \/>\n          if (prefx == '' && ('' + location.hash).indexOf('prefixis=') != -1) {<br \/>\n            prefx=decodeURIComponent(('' + location.hash).split('diris=')[1].split('&')[0].split('#')[0]) + '\/' + decodeURIComponent(('' + location.hash).split('prefixis=')[1].split('&')[0].split('#')[0]);<br \/>\n          }<br \/>\n        }<br \/>\n        jsonstr=decodeURIComponent(('' + location.hash).split('data=')[1].split('&')[0].split('#')[0]);<br \/>\n        datas=jsonstr.split(',');<br \/>\n        for (inm=0; inm&lt;datas.length; inm++) {<br \/>\n           inarr[image_index++] = new imageItem(prefx + datas[inm].replace((prefx == '' ? 'yOuLlneverfindThIs' : prefx),'').replace('[','').replace(']','').replace('\"','').replace('\"',''));<br \/>\n           console.log('ADDed ' + datas[inm].replace((prefx == '' ? 'yOuLlneverfindThIs' : prefx),'').replace('[','').replace(']','').replace('\"','').replace('\"',''));<br \/>\n           fort=true;<br \/>\n        }<br \/>\n      } else if (('' + document.referrer).indexOf('data=') != -1) {<br \/>\n        if (('' + document.referrer).indexOf('diris=') != -1) {<br \/>\n          if (prefx == '' && ('' + document.referrer).indexOf('prefixis=') != -1) {<br \/>\n            prefx=decodeURIComponent(('' + document.referrer).split('diris=')[1].split('&')[0].split('#')[0]) + '\/' + decodeURIComponent(('' + document.referrer).split('prefixis=')[1].split('&')[0].split('#')[0]);<br \/>\n          }<br \/>\n        }<br \/>\n        jsonstr=decodeURIComponent(('' + document.referrer).split('data=')[1].split('&')[0].split('#')[0]);<br \/>\n        \/\/alert(jsonstr);<br \/>\n        datas=jsonstr.split(',');<br \/>\n        for (inm=0; inm&lt;datas.length; inm++) {<br \/>\n           inarr[image_index++] = new imageItem(prefx + datas[inm].replace((prefx == '' ? 'yOuLlneverfindThIs' : prefx),'').replace('[','').replace(']','').replace('\"','').replace('\"',''));<br \/>\n           console.log('AddEd ' + prefx + datas[inm].replace((prefx == '' ? 'yOuLlneverfindThIs' : prefx),'').replace('[','').replace(']','').replace('\"','').replace('\"',''));<br \/>\n           fort=true;<br \/>\n        }<br \/>\n      }<br \/>\n      return fort;<br \/>\n    }<br \/>\n<\/code><\/p>\n<p> &#8230; in order to avoid any Asynchronous concerns in these subsequent webpages.  The ordering of external Javascript loading &#8230;<\/p>\n<p><code><br \/>\n&lt;script type=text\/javascript src='\/onrightclick.js?rand=86475'&gt;&lt;\/script&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; is sensitive here, and for the most part, is moved to above the &#8220;inline Javascript&#8221; loading within the <i>head<\/i> webpage element, to help make all this idea function, all the way back from <font color=brown>changes to<\/font> inline Javascript parts to the initialization code of (our Guinea Pig) &#8220;first webpage&#8221; occurring within the &#8220;One Image Website&#8221; project paradigm &#8230;<\/p>\n<p><code><br \/>\nvar image_index = 0;<br \/>\nvar number_of_image = 0;<br \/>\n<font color=brown>var myxhr=null, formis=null;<br \/>\nvar ipuvalid=true, ipis='', lhend='', lhdata='';<br \/>\nvar fetchcmd=\".\/index.php?diris=images&prefixis=DSC_0&startsuffix=279&endsuffix=364\";<br \/>\n<br \/>\n\/\/ Thanks to https:\/\/stackoverflow.com\/questions\/74997800\/how-to-code-a-synchronous-wrapper-for-jquery-ajax-functions<br \/>\n(async () =&gt; {<br \/>\n<br \/>\n  const resip = await fetch(\".\/index.php?getmeip=\" + Math.floor(Math.random() * 198978675), {\/* options here *\/});<br \/>\n  const dataip = await resip.json();<br \/>\n<br \/>\n  for (var inmip=0; inmip&lt;dataip.length; inmip++) {<br \/>\n    if (inmip == eval(-1 + dataip.length)) {<br \/>\n      ipis='' + dataip[inmip];<br \/>\n      if (inmip != 0) {<br \/>\n        ipuvalid=false;<br \/>\n        setTimeout(nag, 200);<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n<br \/>\n})();<\/font><br \/>\n<br \/>\nimage_list = new Array();<br \/>\n<br \/>\n<font color=brown>\/\/if (initthearr(image_list)) {<br \/>\n\/\/ lhend=lhend;<br \/>\n\/\/<br \/>\n\/\/} else<br \/>\nif (1 == 1) {<br \/>\n\/\/ Thanks to https:\/\/stackoverflow.com\/questions\/74997800\/how-to-code-a-synchronous-wrapper-for-jquery-ajax-functions<br \/>\n(async () =&gt; {<br \/>\n<br \/>\n  const res = await fetch(fetchcmd, {\/* options here *\/});<br \/>\n  const data = await res.json();<br \/>\n<br \/>\n  for (var inm=0; inm&lt;data.length; inm++) {<br \/>\n    lhend='# ';<br \/>\n    if (lhdata == '') {<br \/>\n      lhdata='[\"' + data[inm] + '\"]';<br \/>\n    } else {<br \/>\n      lhdata=lhdata.replace(']', ',\"' + data[inm] + '\"]');<br \/>\n    }<br \/>\n    image_list[image_index++] = new imageItem(data[inm]);<br \/>\n    console.log('Added ' + data[inm]);<br \/>\n  }<br \/>\n<br \/>\n  console.log(data);<br \/>\n  console.log(\"Some code after that uses data\");<br \/>\n<br \/>\n  setTimeout(function(){<br \/>\n  if (lhend == '# ') {<br \/>\n    \/\/lhend='#' + encodeURIComponent(number_of_image + '.364') + '&fetch=' + encodeURIComponent(fetchcmd) + '&data=' + encodeURIComponent(lhdata);<br \/>\n    lhend='#' + encodeURIComponent(number_of_image + '.364') + '&diris=' + fetchcmd.split('diris=')[1] + '&data=' + encodeURIComponent(lhdata);<br \/>\n    if (document.URL.indexOf(lhend.substring(1)) == -1) {<br \/>\n    if (6 == 6) {<br \/>\n    location.href=(document.URL.indexOf('?') != -1 ? document.URL.split('#')[0] + '&endbit=' + reduced(lhend).substring(1) + lhend : document.URL.split('#')[0] + '?endbit=' + reduced(lhend).substring(1) + lhend);<br \/>\n    } else {<br \/>\n    location.hash=lhend;<br \/>\n    }<br \/>\n    }<br \/>\n    console.warn(image_list[0]);<br \/>\n    \/\/lhend=' ';<br \/>\n  }<br \/>\n  }, 2000);<br \/>\n<br \/>\n})();<br \/>\n}<br \/>\n<br \/>\n setTimeout(function(){<\/font><br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0279.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0280.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0281.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0282.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0283.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0284.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0285.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0286.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0287.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0288.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0289.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0290.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0291.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0292.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0293.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0294.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0295.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0296.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0297.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0298.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0299.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0300.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0301.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0302.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0303.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0304.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0305.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0306.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0307.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0308.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0309.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0310.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0311.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0312.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0313.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0314.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0315.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0316.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0317.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0318.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0319.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0320.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0321.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0322.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0323.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0324.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0325.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0326.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0327.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0328.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0329.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0330.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0331.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0332.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0333.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0334.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0335.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0336.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0337.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0338.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0339.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0340.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0341.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0342.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0343.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0344.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0345.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0346.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0347.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0348.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0349.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0350.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0351.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0352.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0353.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0354.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0355.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0356.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0357.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0358.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0359.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0360.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0361.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0362.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0363.jpg');<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0364.jpg');<br \/>\n<br \/>\n\/\/alert('yay '<font color=brown> + lhend<\/font>);<br \/>\n<br \/>\nnumber_of_image = image_list.length;<br \/>\n<font color=brown>if ((lhend + ' ').substring(0,1) == '#') {<br \/>\n setTimeout(function(){<br \/>\n  number_of_image = image_list.length;<br \/>\n }, 2000);<br \/>\n}<br \/>\nif (lhend == '#') { lhend='#' + encodeURIComponent(number_of_image + '.364') + '&fetch=' + encodeURIComponent(fetchcmd) + '&data=' + encodeURIComponent(lhdata); alert(lhend); location.hash=lhend; lhend=''; }<br \/>\n}, 1000);<\/font><br \/>\n<\/code><\/p>\n<p>To most, it is still &#8220;undercover&#8221; trying out our &#8220;still at the Guinea Pig upload functionality thinking stage&#8221; <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/streetart\/\" rel=\"noopener\">Street Art<\/a> &#8220;One Image Website&#8221; project.<\/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\/one-image-website-onpaste-uploading-hashtagging-tutorial\/' rel=\"noopener\">One Image Website Onpaste Uploading Hashtagging Tutorial<\/a>.<\/p-->\n<hr>\n<p id='oiwout'>Previous relevant <a target=\"_blank\" title='One Image Website Onpaste Uploading Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/one-image-website-onpaste-uploading-tutorial\/' rel=\"noopener\">One Image Website Onpaste Uploading Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/streetart\/\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"One Image Website Onpaste Uploading Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/streetart\/better_uploading.gif\" title=\"One Image Website Onpaste Uploading Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">One Image Website Onpaste Uploading Tutorial<\/p><\/div>\n<p>The <i>onpaste<\/i> event referencing work of the recent <a title='Using Document Writeln Onpaste Tutorial' href='#udwot'>Using Document Writeln Onpaste Tutorial<\/a> set us to thinking about the unwieldy nature of our &#8220;One Image Website&#8221; series of photographic projects ability to, on the fly, these days &#8230;<\/p>\n<ul>\n<li>take a new relevant photograph (on an iPhone, for instance) &#8230; and then easily &#8230;<\/li>\n<li>get some functionality on the &#8220;One Image Websites&#8221; (our Guinea Pig, here, being our Street Art project) to accept either &#8230;\n<ol>\n<li>graphical image Copy into buffer via some Edit-&gt;Select All, Edit-&gt;Copy (eg. within an Image Editor desktop application) (combination) option Edit-&gt;Paste<sup>d<\/sup> into a new HTML span contenteditable=true <i>onpaste<\/i> and <i>onblur<\/i> savvy events &#8220;uploading&#8221; helper &#8230; or &#8230;<\/li>\n<li>right click at first webpage (of one of these &#8220;One Image Website&#8221; projects) to get to a prompt window that can accept a data URI the likes of which Google Image Search (say, of &#8220;clipart&#8221;)-&gt;right click-&gt;Copy Image Address could glean for you as a representation of an image<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<p>Where&#8217;s the security and moderation here?  Any upload operation needs to worry about that, huh?!   Well, we limit it via <i>IP addres<\/i>s at this stage, in our Guinea Pig start to proceedings, and will monitor over time.<\/p>\n<p>Let&#8217;s start, codewise with the pretty well self contained PHP block of code that is new for this work &#8230;<\/p>\n<p><code><br \/>\n&lt;?php<br \/>\n<br \/>\n  <i>$oklist=['0::1', '1.156.90.221'];<\/i><br \/>\n<br \/>\n  function server_remote_addr() {<br \/>\n    global $ris;<br \/>\n    $rma = $_SERVER['REMOTE_ADDR'];<br \/>\n    if ($rma != \"\") {<br \/>\n      $qris = $rma;<br \/>\n    } else if ($rma == \"\") {<br \/>\n      $rma = $qris;<br \/>\n    }<br \/>\n    $ua = strtolower($_SERVER['HTTP_USER_AGENT']);<br \/>\n    \/\/ you can add different browsers with the same way ..<br \/>\n    if(preg_match('\/(chromium)[ \\\/]([\\w.]+)\/', $ua))<br \/>\n            $rma = '000000'.$rma;<br \/>\n    elseif(preg_match('\/(chrome)[ \\\/]([\\w.]+)\/', $ua))<br \/>\n            $rma = '00000'.$rma;<br \/>\n    elseif(preg_match('\/(safari)[ \\\/]([\\w.]+)\/', $ua))<br \/>\n            $rma = '0000'.$rma;<br \/>\n    elseif(preg_match('\/(opera)[ \\\/]([\\w.]+)\/', $ua))<br \/>\n            $rma = '000'.$rma;<br \/>\n    elseif(preg_match('\/(msie)[ \\\/]([\\w.]+)\/', $ua))<br \/>\n            $rma = '00'.$rma;<br \/>\n    elseif(preg_match('\/(mozilla)[ \\\/]([\\w.]+)\/', $ua))<br \/>\n            $rma = '0'.$rma;<br \/>\n    \/\/echo \"&lt;p&gt;\".$ua.$rma.\"&lt;\/p&gt;\";<br \/>\n    return $rma;<br \/>\n  }<br \/>\n<br \/>\n  if (isset($_GET['getmeip'])) {<br \/>\n    $okipwise=false;<br \/>\n    $visip=server_remote_addr();<br \/>\n    for ($inb=0; $inb&lt;sizeof($oklist); $inb++) {<br \/>\n        if (strpos($visip . '!', $oklist[$inb] . '!') !== false) {<br \/>\n          $okipwise=true;<br \/>\n        }<br \/>\n    }<br \/>\n    if ($okipwise) {<br \/>\n      echo '[\"' . server_remote_addr() . '\"]';<br \/>\n    } else {<br \/>\n      echo '[\"\",\"' . server_remote_addr() . '\"]';<br \/>\n    }<br \/>\n    exit;<br \/>\n  } else if (isset($_GET['diris']) && isset($_GET['prefixis']) && isset($_GET['startsuffix']) && isset($_GET['endsuffix'])) {<br \/>\n    $arrbit='';<br \/>\n    if ($_GET['prefixis'] != '' && $_GET['diris'] != '' && $_GET['startsuffix'] != '' && $_GET['endsuffix'] != '') {<br \/>\n     foreach(glob(str_replace('+',' ',urldecode($_GET['diris'])) . DIRECTORY_SEPARATOR . str_replace('+',' ',urldecode($_GET['prefixis'])) . '*.*g*') as $filename) {<br \/>\n        if (strpos($filename, str_replace('+',' ',urldecode($_GET['diris'])) . DIRECTORY_SEPARATOR . str_replace('+',' ',urldecode($_GET['prefixis']))) !== false) {<br \/>\n          $restfnamebit=explode('.', explode(str_replace('+',' ',urldecode($_GET['diris'])) . DIRECTORY_SEPARATOR . str_replace('+',' ',urldecode($_GET['prefixis'])), $filename)[1])[0];<br \/>\n          if ($restfnamebit &lt; str_replace('+',' ',urldecode($_GET['startsuffix'])) || $restfnamebit &gt; str_replace('+',' ',urldecode($_GET['endsuffix']))) {<br \/>\n           if ($arrbit == '') {<br \/>\n            $arrbit='[\"' . $filename . '\"]';<br \/>\n           } else {<br \/>\n            $arrbit=str_replace(']', ',\"' . $filename . '\"]', $arrbit);<br \/>\n           }<br \/>\n          }<br \/>\n        }<br \/>\n     }<br \/>\n     if ($arrbit == '') {<br \/>\n       echo \"[]\";<br \/>\n     } else {<br \/>\n       echo $arrbit;<br \/>\n     }<br \/>\n     exit;<br \/>\n    }<br \/>\n    echo \"[]\";<br \/>\n    exit;<br \/>\n  } else if (isset($_POST['newdurl']) && isset($_POST['diris']) && isset($_POST['prefixis']) && isset($_POST['startsuffix']) && isset($_POST['endsuffix'])) {<br \/>\n    if (strpos(str_replace(' ','+',urldecode($_POST['newdurl'])), 'data:image\/') !== false && $_POST['prefixis'] != '' && $_POST['diris'] != '' && $_POST['startsuffix'] != '' && $_POST['endsuffix'] != '') {<br \/>\n      <i>$okipwise=false;<br \/>\n      $visip=server_remote_addr();<br \/>\n      for ($inb=0; $inb&lt;sizeof($oklist); $inb++) {<br \/>\n        if (strpos($visip . '!', $oklist[$inb] . '!') !== false) {<br \/>\n          $okipwise=true;<br \/>\n        }<br \/>\n      }<br \/>\n      if ($okipwise) {<\/i><br \/>\n      $proposedext='.' . str_replace('jpeg','jpg',explode(';',explode(',',explode('data:image\/', str_replace(' ','+',urldecode($_POST['newdurl'])))[1])[0])[0]);<br \/>\n      if (strpos($proposedext, 'g') !== false) {<br \/>\n        $fidea=str_replace('+',' ',urldecode($_POST['endsuffix']));<br \/>\n        $isthere=true;<br \/>\n        $fnameproposed='';<br \/>\n        while ($isthere) {<br \/>\n         $isthere=false;<br \/>\n         foreach(glob(str_replace('+',' ',urldecode($_POST['diris'])) . DIRECTORY_SEPARATOR . str_replace('+',' ',urldecode($_POST['prefixis'])) . $fidea . '.*g*') as $filename) {<br \/>\n          $isthere=true;<br \/>\n         }<br \/>\n         if (!$isthere) {<br \/>\n           $fnameproposed=str_replace('+',' ',urldecode($_POST['diris'])) . DIRECTORY_SEPARATOR . str_replace('+',' ',urldecode($_POST['prefixis'])) . $fidea . $proposedext;<br \/>\n         } else {<br \/>\n           $fidea++;<br \/>\n         }<br \/>\n        }<br \/>\n        if ($fnameproposed != '') {<br \/>\n         file_put_contents($fnameproposed, base64_decode(explode(\";base64,\", str_replace(' ','+',urldecode($_POST['newdurl'])))[1]));<br \/>\n        }<br \/>\n      }<br \/>\n      <i>}<\/i><br \/>\n    }<br \/>\n    exit;<br \/>\n  }<br \/>\n?&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; and then there is some new &#8220;fetch&#8221; and Ajax rich HTML and Javascript as per &#8230;<\/p>\n<table>\n<tr>\n<th>New <font color=purple>Global Variables<\/font> and <font color=blue>Asynchronous<\/font> section Javascript &#8230;<\/th>\n<\/tr>\n<tr>\n<td>\n<code><br \/>\n<font color=purple>var myxhr=null, formis=null;<br \/>\nvar ipuvalid=true, ipis='';<\/font><br \/>\n<br \/>\nimage_list = new Array();<br \/>\n<br \/>\n<font color=blue>\/\/ Thanks to https:\/\/stackoverflow.com\/questions\/74997800\/how-to-code-a-synchronous-wrapper-for-jquery-ajax-functions<br \/>\n(async () =&gt; {<br \/>\n<br \/>\n  const resip = await fetch(\".\/index.php?getmeip=\" + Math.floor(Math.random() * 198978675), {\/* options here *\/});<br \/>\n  const dataip = await resip.json();<br \/>\n<br \/>\n  for (var inmip=0; inmip&lt;dataip.length; inmip++) {<br \/>\n    if (inmip == eval(-1 + dataip.length)) {<br \/>\n      ipis='' + dataip[inmip];<br \/>\n      if (inmip != 0) {<br \/>\n        ipuvalid=false;<br \/>\n        setTimeout(nag, 200);<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n<br \/>\n})();<br \/>\n<br \/>\n\/\/ Thanks to https:\/\/stackoverflow.com\/questions\/74997800\/how-to-code-a-synchronous-wrapper-for-jquery-ajax-functions<br \/>\n(async () =&gt; {<br \/>\n<br \/>\n  const res = await fetch(\".\/index.php?diris=images&prefixis=DSC_0&startsuffix=279&endsuffix=364\", {\/* options here *\/});<br \/>\n  const data = await res.json();<br \/>\n<br \/>\n  for (var inm=0; inm&lt;data.length; inm++) {<br \/>\n    image_list[image_index++] = new imageItem(data[inm]);<br \/>\n    console.log('Added ' + data[inm]);<br \/>\n  }<br \/>\n<br \/>\n  console.log(data);<br \/>\n  console.log(\"Some code after that uses data\");<br \/>\n<br \/>\n})();<\/font><br \/>\n<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0279.jpg');<br \/>\n<br \/>\n image_list[image_index++] = new imageItem('images\/DSC_0280.jpg');<br \/>\n<br \/>\n\/\/ more usual code follows<br \/>\n<\/code>\n<\/td>\n<\/tr>\n<tr>\n<th>New Javascript functions &#8230;<\/th>\n<\/tr>\n<tr>\n<td>\n<code><br \/>\nfunction nag() {<br \/>\n          if (document.getElementById('imgcopycheck')) {<br \/>\n            document.getElementById('imgcopycheck').title+='  Sorry, we cannot authorize uploads here.';<br \/>\n            document.getElementById('imgcopycheck').disabled=true;<br \/>\n            document.getElementById('imgcopycheck').style.visibility='hidden';<br \/>\n          } else {<br \/>\n            setTimeout(nag, 200);<br \/>\n          }<br \/>\n}<br \/>\n<br \/>\n  function getipvalid() {<br \/>\n    return ipuvalid;<br \/>\n  }<br \/>\n<br \/>\n  function uplitc(icontis) {<br \/>\n     if (icontis.indexOf('data:image\/') == 0) {<br \/>\n       myxhr = new XMLHttpRequest();<br \/>\n       formis = new FormData();<br \/>\n       formis.append('diris', 'images');<br \/>\n       formis.append('prefixis', 'DSC_0');<br \/>\n       formis.append('startsuffix', '279');<br \/>\n       formis.append('endsuffix', '364');<br \/>\n       formis.append('newdurl', icontis);<br \/>\n       myxhr.open('POST', '.\/index.php'); \/\/, true);<br \/>\n       myxhr.send(formis);<br \/>\n     }<br \/>\n  }<br \/>\n<br \/>\n  function uplit(divo) {<br \/>\n     var icontis='';<br \/>\n     if (divo.innerHTML.indexOf('data:image\/') == 0) {<br \/>\n       icontis=divo.innerHTML;<br \/>\n       divo.innerHTML='';<br \/>\n       divo.title=icontis;<br \/>\n       myxhr = new XMLHttpRequest();<br \/>\n       formis = new FormData();<br \/>\n       formis.append('diris', 'images');<br \/>\n       formis.append('prefixis', 'DSC_0');<br \/>\n       formis.append('startsuffix', '279');<br \/>\n       formis.append('endsuffix', '364');<br \/>\n       formis.append('newdurl', icontis);<br \/>\n       myxhr.open('POST', '.\/index.php'); \/\/, true);<br \/>\n       myxhr.send(formis);<br \/>\n     } else if (divo.innerHTML.indexOf('\"data:image\/') != -1) {<br \/>\n       icontis='data:image\/' + divo.innerHTML.split('data:image\/')[1].split('\"')[0];<br \/>\n       divo.innerHTML='';<br \/>\n       divo.title=icontis;<br \/>\n       myxhr = new XMLHttpRequest();<br \/>\n       formis = new FormData();<br \/>\n       formis.append('diris', 'images');<br \/>\n       formis.append('prefixis', 'DSC_0');<br \/>\n       formis.append('startsuffix', '279');<br \/>\n       formis.append('endsuffix', '364');<br \/>\n       formis.append('newdurl', icontis);<br \/>\n       myxhr.open('POST', '.\/index.php'); \/\/, true);<br \/>\n       myxhr.send(formis);<br \/>\n     }<br \/>\n  }<br \/>\n<\/code>\n<\/td>\n<\/tr>\n<tr>\n<th>New HTML <font color=magenta>span<\/font> element &#8230;<\/th>\n<\/tr>\n<tr>\n<td>\n<code><br \/>\n&lt;a id=\"thedivlink\" style=\"display:block;\" title=\"Click for Temple of Groovy provided by http:\/\/www.freesoundtrackmusic.com\" alt=\"Street Art - RJM Programming ... you might see this while loading ... click here now to just play music (Temple of Groovy provided by http:\/\/www.freesoundtrackmusic.com) with less variety of imagery ... else please wait for full functionality ...\" onclick=\"javascript: window.open('index-ssmhalf.html','Street Art  -  Soul Tracker Mechanism (via http:\/\/www.freesoundtrackmusic.com) - RJM Programming - http:\/\/www.rjmprogramming.com.au (Copyright &copy; 2011 rjmprogramming.com.au all rights reserved.)');\" alt=\"Street Art - RJM Programming ... you might see this while loading ... click here now to just play music (Temple of Groovy provided by http:\/\/www.freesoundtrackmusic.com) with less variety of imagery ... else please wait for full functionality ...\" title=\"Click for Temple of Groovy provided by http:\/\/www.freesoundtrackmusic.com\" href=\"sound\/Temple_of_Groovy-freesoundtrackmusic.mp3\" &gt;Street Art - RJM Programming ... you might see this while loading ... click here now to just play music (Temple of Groovy provided by http:\/\/www.freesoundtrackmusic.com) with less variety of imagery ... else please wait for full functionality ...&lt;\/a&gt;<font color=magenta>&amp;nbsp;&lt;span title=\"Image copy paste here to upload that way.\" onclick=\"event.stopPropagation();\" onblur=\"uplit(this);\" onpaste=\"uplit(this);\" contenteditable=true id=\"imgcopycheck\" style=\"border:2px dotted red;width:50px;height:25px;display:inline-block;\"&gt;&amp;#x2B06;&amp;#xFE0F; &amp;#x1F5BC;&amp;#xFE0F;&lt;\/span&gt;<\/font><br \/>\n<\/code>\n<\/td>\n<\/tr>\n<\/table>\n<p> &#8230; that is &#8220;undercover&#8221; to most trying out our <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/streetart\/\" rel=\"noopener\">Street Art<\/a> &#8220;One Image Website&#8221; project.<\/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\/new-using-document-writeln-onpaste-tutorial\/' rel=\"noopener\">New Using Document Writeln Onpaste Tutorial<\/a>.<\/p-->\n<hr>\n<p id='udwot'>Previous relevant <a target=\"_blank\" title='Using Document Writeln Onpaste Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/using-document-writeln-onpaste-tutorial\/' rel=\"noopener\">Using Document Writeln Onpaste Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/using_writeln.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Using Document Writeln Onpaste Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/using_writeln.gif\" title=\"Using Document Writeln Onpaste Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Using Document Writeln Onpaste Tutorial<\/p><\/div>\n<p>Regarding yesterday&#8217;s <a title='Using Document Writeln Primer Tutorial' href='#udwpt'>Using Document Writeln Primer Tutorial<\/a> you might wonder &#8230;<\/p>\n<blockquote><p>\nWhy involve either\/both textarea and div (contenteditable=true) elements as &#8220;containers&#8221; of content?\n<\/p><\/blockquote>\n<p>Well, with yesterday&#8217;s starting <i>onblur<\/i> (just) event gambit, it&#8217;s a very pertinent question, but, today, we introduce <i>onpaste<\/i> event work, and involving this event with the <i>div<\/i> element can have it distinguishing itself, able to accept graphical (eg. image) content.  For example, the user can have their cursor placed into the <i>div<\/i> element and have been in an image editor having Edit-&gt;Select All<sup>ed<\/sup> and Edit-&gt;Copy<sup>ed<\/sup> graphical content, then that can be Edit-&gt;Paste<sup>d<\/sup> into the <i>div<\/i> as graphical content.<\/p>\n<p>As you might imagine, this opens a Pandora&#8217;s Box of possibilities regarding image sizing, but we apply inline CSS styling &#8230;<\/p>\n<p><code><br \/>\n style='object-fit:contain;width:100%;height:100%;'<br \/>\n<\/code><\/p>\n<p> &#8230; to the <i>img<\/i> data URI<sup>ed<\/sup> element within the <i>div<\/i> element that happens when graphical content is pasted into it, so that the graphical data is unlikely to spill too far outside the <i>div<\/i> bounds, assuming only one image is pasted, that is.<\/p>\n<p>So feel free to try <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/using_writeln.html-GETME\" rel=\"noopener\">a changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/using_writeln.html-GETME\" rel=\"noopener\">using_writeln.html<\/a> first draft <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/using_writeln.html\" rel=\"noopener\">Using (Document) Writeln<\/a> web application for you to try yourself.<\/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\/using-document-writeln-onpaste-tutorial\/' rel=\"noopener\">Using Document Writeln Onpaste Tutorial<\/a>.<\/p-->\n<hr>\n<p id='udwpt'>Previous relevant <a target=\"_blank\" title='Using Document Writeln Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/using-document-writeln-primer-tutorial\/' rel=\"noopener\">Using Document Writeln 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\/using_writeln.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Using Document Writeln Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/using_writeln.jpg\" title=\"Using Document Writeln Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Using Document Writeln Primer Tutorial<\/p><\/div>\n<p>The other day we stumbled on some advice leading us to use &#8230;<\/p>\n<p><code><br \/>\ndocument.<a target=\"_blank\" href='https:\/\/www.w3schools.com\/jsref\/met_doc_writeln.asp' rel=\"noopener\">writeln<\/a>([html-content]);<br \/>\n<\/code><\/p>\n<p> &#8230; rather than our usual &#8220;go to&#8221; &#8230;<\/p>\n<p><code><br \/>\ndocument.<a target=\"_blank\" href='https:\/\/www.w3schools.com\/jsref\/met_doc_write.asp' rel=\"noopener\">write<\/a>([html-content]);<br \/>\n<\/code><\/p>\n<p>And so we wrote a &#8220;proof of concept&#8221; <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/using_writeln.html_GETME\" rel=\"noopener\">using_writeln.html<\/a> first draft <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/using_writeln.html\" rel=\"noopener\">Using (Document) Writeln<\/a> web application for you to try yourself.<\/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='#d71711' onclick='var dv=document.getElementById(\"d71711\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/privacy\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d71711' 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='#d72462' onclick='var dv=document.getElementById(\"d72462\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/onpaste\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d72462' 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='#d72515' onclick='var dv=document.getElementById(\"d72515\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/upload\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d72515' 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='#d72520' onclick='var dv=document.getElementById(\"d72520\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/hashtag\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d72520' 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='#d72531' onclick='var dv=document.getElementById(\"d72531\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/copy\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d72531' 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='#d72554' onclick='var dv=document.getElementById(\"d72554\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/clipboard\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d72554' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The recent onpaste event work has other places of &#8220;interventional interest&#8221;, for us, on top of the day before yesterday&#8217;s One Image Website Onpaste Uploading Device Copying Tutorial. How about using it to have &#8230; mobile device take a photograph &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/universal-clipboard-onpaste-canvas-annotations-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,20,25,29,30,37],"tags":[3456,1832,168,184,214,252,2697,265,400,576,590,626,631,652,3810,2178,3529,4267,1738,929,997,2263,1319,5460],"class_list":["post-72554","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-ios","category-networking","category-operating-system","category-photography","category-tutorials","tag-annotate","tag-annotation","tag-buffer","tag-canvas","tag-clipboard","tag-connection","tag-contentedital","tag-copy","tag-event","tag-html","tag-image","tag-ios","tag-iphone","tag-javascript","tag-macbook-air","tag-macos","tag-onblue","tag-onpaste","tag-photo","tag-photograph","tag-programming","tag-span","tag-tutorial","tag-universal-clipboard"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/72554"}],"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=72554"}],"version-history":[{"count":6,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/72554\/revisions"}],"predecessor-version":[{"id":72561,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/72554\/revisions\/72561"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=72554"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=72554"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=72554"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}