{"id":41926,"date":"2018-11-20T03:01:01","date_gmt":"2018-11-19T17:01:01","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=41926"},"modified":"2018-11-20T05:26:36","modified_gmt":"2018-11-19T19:26:36","slug":"media-ios-image-capture-ajax-formdata-cookie-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/media-ios-image-capture-ajax-formdata-cookie-tutorial\/","title":{"rendered":"Media iOS Image Capture Ajax FormData Cookie Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/imagecapture.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Media iOS Image Capture Ajax FormData Cookie Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/imagecapture_ios_cache.jpg\" title=\"Media iOS Image Capture Ajax FormData Cookie Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Media iOS Image Capture Ajax FormData Cookie Tutorial<\/p><\/div>\n<p>Moving on from cross-browser, with yesterday&#8217;s <a title='Canvas Image Capture Ajax FormData Ajax Email Tutorial' href='#cicafdaet'>Canvas Image Capture Ajax FormData Ajax Email Tutorial<\/a>, we move on to cross-platform issues today regarding iOS, shortcut desktop icon usage (we talked about with <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/web-meets-mobile-via-ios-desktop-icon-tutorial\/' title='Web Meets Mobile via iOS Desktop Icon Tutorial'>Web Meets Mobile via iOS Desktop Icon Tutorial<\/a>) and the cache and <a target=_blank title='Cookie information from w3schools' href='http:\/\/www.w3schools.com\/js\/js_cookies.asp'>HTTP Cookies<\/a>.  There are issues here.<\/p>\n<p>Our research on this started where we often start, a Google search, of <a target=_blank title='Google search of ios shortcut cookie issue' href='https:\/\/www.google.com\/search?q=ios+shortcut+cookie+issue&#038;ie=utf-8&#038;oe=utf-8&#038;client=firefox-b'>ios shortcut cookie issue<\/a> got us to <a target=_blank title='Useful link, thanks' href='https:\/\/forums.developer.apple.com\/thread\/89050'>this interesting link<\/a> &#8230;<\/p>\n<ul>\n<li>verifying, to me, there is an issue, which we (personally) see as intermittent success using iPhone and iPad shortcut desktop icons to our &#8220;Media Capture Email&#8221; web applications linking to HTTP Cookie settings that seem to work fine when doing the same thing straight from the web browser desktop application instead, and which we remembered with some code we applied to our <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.'>Google Chart<\/a> <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/piechart' title='Google Pie Charts'>Pie Chart<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/PieChart\/pie_chart.php\">interface<\/a> as per (in its case PHP) code &#8230;<br \/>\n<code><br \/>\n&lt;?php<br \/>\nheader( \"Expires: Mon, 20 Dec 1998 01:00:00 GMT\" );<br \/>\nheader( \"Last-Modified: \" . gmdate(\"D, d M Y H:i:s\") . \" GMT\" );<br \/>\nheader( 'Cache-Control: no-store, no-cache, must-revalidate' );<br \/>\nheader( 'Cache-Control: post-check=0, pre-check=0', false );<br \/>\nheader( 'Pragma: no-cache' );<br \/>\n\/\/ ... rest of PHP code<br \/>\n?&gt;<br \/>\n<\/code>\n<\/li>\n<li>but applying similar code ideas appeared to work for awhile, but not reliably, so we took a pragmatic approach here &#8230;\n<ol>\n<li>work with URL get arguments instead &#8230;<\/li>\n<li>intervening between touching the &#8220;Remember Me?&#8221; checkbox and the touching of the &#8220;Share icon&#8221;&#8216;s &#8220;Add to Home Screen&#8221; link with onclick (Javascript) logic &#8230;<\/li>\n<li>if no files browsed for (ie. &#8220;cfile&#8221; below will be null, and documentURL is the incoming document.URL) &#8230;<br \/>\n<code><br \/>\n   var qsprefix=\"?\", qs=\"\";<br \/>\n   if (document.getElementById('to').value.indexOf('@') != -1) {<br \/>\n     qs+=qsprefix + \"to=\" + encodeURIComponent(document.getElementById('to').value); \/\/ tn);<br \/>\n     qsprefix=\"&\";<br \/>\n   }<br \/>\n   if (navigator.userAgent.match(\/iPhone|iPad|iPod\/i)) {<br \/>\n    if (!cfile && qs != '' && documentURL.indexOf('to=') == -1) {<br \/>\n<br \/>\n     qs+=qsprefix + \"cc=\" + encodeURIComponent(document.getElementById('cc').value); \/\/ tn);<br \/>\n     qsprefix=\"&\";<br \/>\n     qs+=qsprefix + \"bcc=\" + encodeURIComponent(document.getElementById('bcc').value); \/\/ tn);<br \/>\n     qsprefix=\"&\";<br \/>\n     qs+=qsprefix + \"body=\" + encodeURIComponent(document.getElementById('body').value); \/\/ tn);<br \/>\n     qsprefix=\"&\";<br \/>\n     qs+=qsprefix + \"swir=\" + encodeURIComponent(document.getElementById('swir').value); \/\/ tn);<br \/>\n     qsprefix=\"&\";<br \/>\n     qs+=qsprefix + \"subject=\" + encodeURIComponent(document.getElementById('subject').value); \/\/ tn);<br \/>\n     qsprefix=\"&\";<br \/>\n     qs+=qsprefix + \"zipname=\" + encodeURIComponent(document.getElementById('zipname').value.replace(expireDate.getFullYear() + (\"0\" + eval(1 + expireDate.getMonth())).slice(-2) + (\"0\" + expireDate.getDate()).slice(-2),\"yyyymmdd\")); \/\/ tn);<br \/>\n     qsprefix=\"&\";<br \/>\n     if (document.getElementById('nocamera').checked) {<br \/>\n     qs+=qsprefix + \"nocamera=\" + encodeURIComponent('true'); \/\/ tn);<br \/>\n     } else {<br \/>\n     qs+=qsprefix + \"nocamera=\" + encodeURIComponent('false'); \/\/ tn);<br \/>\n     }<br \/>\n     qsprefix=\"&\";<br \/>\n     if (forever && 1 == 2) {<br \/>\n     qs+=qsprefix + \"forever=\" + encodeURIComponent('y'); \/\/ tn);<br \/>\n     qsprefix=\"&\";<br \/>\n     }<br \/>\n<br \/>\n     if ((document.URL.split('#')[0].split('?')[0] + qs).length &lt; 900) {<br \/>\n       location.href=document.URL.split('#')[0].split('?')[0] + qs;<br \/>\n     }<br \/>\n<br \/>\n    }<br \/>\n   }<br \/>\n<\/code>\n<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<p>Then if the iPad or iPhone user happens, by some blue moon scenario, decides to &#8220;Share icon&#8221;&#8216;s &#8220;Add to Home Screen&#8221; <font size=1>it, <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=psRzzT4U0-c'>Danno<\/a><\/font>, the big long argumented URL will be saved to the iPhone or iPad shortcut desktop icon itself, and there will be less flakiness because the &#8220;connection&#8221; to HTTP Cookie settings will not be crucial.<\/p>\n<p>Try any one of &#8230;<\/p>\n<ul>\n<li><a target=_blank title='imagecapture.html' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/imagecapture.html-------------GETME'>changed HTML<\/a> <a target=_blank title='imagecapture.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/imagecapture.html-------------GETME'>imagecapture.htm<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/imagecapture.htm\" title=\"Click picture\">live run (just images)<\/a> (or, for example, <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/imagecapture.htm?extras=%2Cvideo%2F*%2Caudio%2F*\">live run (all three categories of &#8220;media&#8221;<\/a>)<\/li>\n<li><a target=_blank title='audiocapture.html' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/audiocapture.html---GETME'>changed HTML<\/a> <a target=_blank title='audiocapture.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/audiocapture.html---GETME'>audiocapture.htm<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/audiocapture.htm\" title=\"Click picture\">live run<\/a><\/li>\n<li><a target=_blank title='videocapture.html' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/videocapture.html---GETME'>changed HTML<\/a> <a target=_blank title='videocapture.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/videocapture.html---GETME'>videocapture.htm<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/videocapture.htm\" title=\"Click picture\">live run<\/a><\/li>\n<\/ul>\n<p> &#8230; on an iPad or iPhone, and save an emailee (to) and subject (etcetera), but do not browse for any media at this pass, then &#8230;<\/p>\n<ol>\n<li>touch &#8220;Remember Me?&#8221; checkbox<\/li>\n<li>touch &#8220;Share icon&#8221;&#8216;s &#8220;Add to Home Screen&#8221; link<\/li>\n<li>touch that new shortcut desktop icon<\/li>\n<\/ol>\n<p> &#8230; to see what we mean, here.  <font size=1>Now you can browse (and not have to re-enter other settings) for media to your heart&#8217;s content.<\/font><\/p>\n<hr>\n<p id='cicafdaet'>Previous relevant <a target=_blank title='Canvas Image Capture Ajax FormData Ajax Email Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/canvas-image-capture-ajax-formdata-ajax-email-tutorial\/'>Canvas Image Capture Ajax FormData Ajax Email 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\/imagecapture.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Canvas Image Capture Ajax FormData Ajax Email Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/imagecapture_cemail.jpg\" title=\"Canvas Image Capture Ajax FormData Ajax Email Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Canvas Image Capture Ajax FormData Ajax Email Tutorial<\/p><\/div>\n<p>Clearly, to build on yesterday&#8217;s <a title='Windows Web Browser F12 Development Tools Debugger Tutorial' href='#wwbf12dtdt'>Windows Web Browser F12 Development Tools Debugger Tutorial<\/a> and <a target=_blank title='Canvas Image Capture Ajax FormData Annotation Dropdown Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/canvas-image-capture-ajax-formdata-annotation-dropdown-tutorial'>Canvas Image Capture Ajax FormData Annotation Dropdown Tutorial<\/a> we need to clear up another issue that is cross-browser by nature, that being the emailing functionality for canvas content imagery (in an email attachment).  Cross-browser issues may worry you in your projects so much that you do not want to proceed without as many platforms as possible &#8220;coming along for the road&#8221; on every single coding step, but the more we program and code here, we find there are that many deprecations and changes with platforms that we prefer to leave some cross-browser issues as a thing to note, and come back to, especially if it involves an optional part of the workflow of the web application.<\/p>\n<p>We want to stick with Ajax FormData methods to achieve this, this being our &#8220;line in the sand&#8221; to try to learn more about these techniques.  That being the case, we were mesmerized, really awfully keen, and tickled pink, going on turquoise to learn of a Javascript function (<b>mozGetAsFile<\/b> below) that takes HTML5 canvas content and creates for you a &#8220;file&#8221; object, the type of object that prompts an uploading behaviour in the destination PHP mailto.php we are going to send to via &#8230;<\/p>\n<p><code><br \/>\nfunction clientemail(whoto) {<br \/>\n  var cemailhref=\"\";<br \/>\n     copycanvas();<br \/>\n     cemailhref=cemailorig;<br \/>\n     cemailhref=cemailhref.replace(':?', ':' + whoto + '?');<br \/>\n   if (document.getElementById('cc').value.indexOf('@') != -1) {<br \/>\n     cemailhref=cemailhref.replace('&cc=', '&cc=' + encodeURIComponent(document.getElementById('cc').value));<br \/>\n   }<br \/>\n   if (document.getElementById('bcc').value.indexOf('@') != -1) {<br \/>\n     cemailhref=cemailhref.replace('&bcc=', '&bcc=' + encodeURIComponent(document.getElementById('bcc').value));<br \/>\n   }<br \/>\n   if (document.getElementById('body').value != '') {<br \/>\n     cemailhref=cemailhref.replace('&body=', '&body=' + encodeURIComponent(document.getElementById('body').value));<br \/>\n   }<br \/>\n   if (document.getElementById('subject').value != '') {<br \/>\n     cemailhref=cemailhref.replace('?subject=', '?subject=' + encodeURIComponent(document.getElementById('subject').value));<br \/>\n   } else {<br \/>\n     cemailhref=cemailhref.replace('?subject=', '?subject=' + encodeURIComponent('Canvas Image in email'));<br \/>\n   }<br \/>\n     document.getElementById('cemail').href=cemailhref;<br \/>\n       document.getElementById('cemail').click();<br \/>\n}<br \/>\n<br \/> <br \/>\nfunction email() {<br \/>\n  var cemailhref=\"\";<br \/>\n  var whoto=document.getElementById('to').value;<br \/>\n  if (whoto.indexOf('@') == -1) {<br \/>\n  whoto=prompt('Email To? (answer with space to open email client where in body section you can paste the canvas contents)','');<br \/>\n  if (whoto == null) { whoto=''; }<br \/>\n  }<br \/>\n  if (whoto.indexOf('@') == -1) {<br \/>\n     whoto='';<br \/>\n     clientemail(whoto);<br \/>\n  } else if (whoto.indexOf('@') != -1) {<br \/>\n  var ecanvas = document.getElementById('canvaselement');<br \/>\n     <i>try {<\/i><br \/>\n     canvasf = ecanvas.<b><a target=_blank title='Canvas to File object mozGetAsFile information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/HTMLCanvasElement\/mozGetAsFile'>mozGetAsFile<\/a><\/b>('canvasimage.png');<br \/>\n     form = new FormData();<br \/>\n     xhr = new XMLHttpRequest();<br \/>\n     var ereader = new FileReader();<br \/>\n  ereader.readAsDataURL(canvasf);<br \/>\n<br \/> <br \/>\n  ereader.onloadend = function() {<br \/>\n<br \/> <br \/>\n   form.append('to', whoto);<br \/>\n   if (document.getElementById('cc').value.indexOf('@') != -1) {<br \/>\n   form.append('cc', document.getElementById('cc').value);<br \/>\n   }<br \/>\n   if (document.getElementById('bcc').value.indexOf('@') != -1) {<br \/>\n   form.append('bcc', document.getElementById('bcc').value);<br \/>\n   }<br \/>\n   if (document.getElementById('body').value != '') {<br \/>\n   form.append('body', document.getElementById('body').value);<br \/>\n   }<br \/>\n   if (document.getElementById('subject').value != '') {<br \/>\n    form.append('subject', document.getElementById('subject').value);<br \/>\n   } else {<br \/>\n    form.append('subject', 'Canvas Image in email');<br \/>\n   }<br \/>\n   form.append('filename', isipn('canvasimage.png'));<br \/>\n   form.append('image', canvasf);<br \/>\n  pbval+=canvasf.size;<br \/>\n  if (pbval &gt; pbmax) { pbmax=pbval; document.getElementById('sbig').innerHTML='' + eval(pbmax \/ 1048576.0) + 'mB' + pbb; document.getElementById('pb').max='' + pbmax; document.getElementById('pb').style.borderRight='5px inset red';  } else {  document.getElementById('pb').style.borderRight='0px inset red';  document.getElementById('sbig').innerHTML='10mB' + pbb; }<br \/>\n  document.getElementById('pb').value='' + pbval;<br \/>\n  document.getElementById('pb').title='' + eval(pbval \/ 1048576.0) + 'mB';<br \/>\n   if (document.getElementById('zipname').value != '') {<br \/>\n    form.append('zipname', jsipn(document.getElementById('zipname').value));<br \/>\n   } else {<br \/>\n    form.append('zipname', jsipn('canvasimage.png'));<br \/>\n   }<br \/>\n   xhr.open('post', 'mailto.php', true);<br \/>\n   xhr.send(form);<br \/>\n  if (1 == 1) {<br \/>\n  if (document.getElementById('myh3').innerHTML.indexOf('Emailed to ') != -1) {<br \/>\n  document.getElementById('myh3').innerHTML=document.getElementById('myh3').innerHTML.split('Emailed to ')[0] + 'Emailed to ' + whoto + ' (' + document.getElementById('pb').title + ' &lt;a style=text-decoration:underline;cursor:pointer; onclick=\"clientemail(' + \"'\" + whoto + \"'\" + ');\" title=\"Use client email instead of PHP mail where canvas content can be Pasted into email body section\"&gt;in a canvas image&lt;\/a&gt; media file)';<br \/>\n  } else {<br \/>\n  document.getElementById('myh3').innerHTML+='&lt;br&gt;Emailed to ' + whoto + ' (' + document.getElementById('pb').title + ' &lt;a style=text-decoration:underline;cursor:pointer; onclick=\"clientemail(' + \"'\" + whoto + \"'\" + ');\" title=\"Use client email instead of PHP mail where canvas content can be Pasted into email body section\"&gt;in a canvas image&lt;\/a&gt; media file)';<br \/>\n  }<br \/>\n  } else {<br \/>\n  alert('Emailed to ' + whoto + ' (' + document.getElementById('pb').title + ' in a canvas image media file)');<br \/>\n  }<br \/>\n  };<br \/>\n<br \/> <br \/>\n     <i>} catch(eee) {<\/i><br \/>\n     var huhe=confirm('Sorry, but best we could do was copy your canvas ready for you to paste into your own email, that will open if you click OK button.');<br \/>\n     if (huhe) {<br \/>\n       clientemail(whoto);<br \/>\n     }<br \/>\n<br \/> <br \/>\n     <i>}<\/i><br \/>\n  }<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; but, sadly, <b>mozGetAsFile<\/b> is a cross-browser issue itself, in that it works on Firefox (maybe only), and even then is about to be deprecated, hence the <i>try\/catch<\/i> Javascript logic adding to &#8230;<\/p>\n<ul>\n<li>Firefox <b>mozGetAsFile<\/b> email with canvas content attachment via PHP mail automatically &#8230; with a fallback position where we &#8230;<\/li>\n<li>use previous canvas copy to clipboard logic then arrange an HTML &#8220;a&#8221; link &#8220;mailto:&#8221; link to the client email program where the user can Paste their canvas content data directly into the body section of the presented new email message window, which appears by a programmatical click() of that &#8220;mailto:&#8221; link<\/li>\n<\/ul>\n<p>Another cross-browser issue we improved upon is the timing of the saving of the canvas contents, <i>as a data URL<\/i>, ready to perhaps store in Web Storage &#8220;localStorage&#8221;, at <b>this juncture<\/b>, rather than later on (where Firefox was okay but Chrome and Opera and Safari were not) &#8230;<\/p>\n<p><code><br \/>\nvar elemtoDataURL='';<br \/>\nfunction drawOnCanvas(file, xtop) {<br \/>\n  var reader = new FileReader();<br \/>\n<br \/>\n  reader.onload = function (e) {<br \/>\n    var dataURL = e.target.result, imgl = new Image();<br \/>\n<br \/>\n    imgl.onload = function() {<br \/>\n      \/\/elem.width = imgl.width;<br \/>\n      \/\/elem.height = imgl.height;<br \/>\n      this.style.height='' + this.height + 'px';<br \/>\n      if (1 == 1) {<br \/>\n      c = document.getElementById('canvaselement'); \/\/querySelector('canvas'), \/\/ see Example 4<br \/>\n      ctx = c.getContext('2d');<br \/>\n      if (isNaN(xtop)) {<br \/>\n      ctx.drawImage(imgl, 0, 0);<br \/>\n      } else {<br \/>\n      ctx.drawImage(imgl, 0, xtop);<br \/>\n      }<br \/>\n      } else {<br \/>\n      cdi(imgl, 0, xtop);<br \/>\n      }<br \/>\n      <i>elemtoDataURL=c.toDataURL('image\/jpeg',0.5).replace(\";base64,\",\";charset=utf-8;base64,\").replace(\/^daXta:image\\\/(png|jpg|jpeg);base64,\/, \"\");<\/i><br \/>\n    };<br \/>\n<br \/>\n    imgl.src = dataURL;<br \/>\n  };<br \/>\n<br \/>\n  reader.readAsDataURL(file);<br \/>\n}<br \/>\n<\/code><\/p>\n<p>Lots of web inspector work again to nut out what to do on these cross-browser issues!<\/p>\n<p>Yet again, you can try the <a target=_blank title='imagecapture.html' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/imagecapture.html------------GETME'>changed HTML<\/a> <a target=_blank title='imagecapture.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/imagecapture.html------------GETME'>imagecapture.htm<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/imagecapture.htm\" title=\"Click picture\">live run (just images)<\/a> (or, for example, <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/imagecapture.htm?extras=%2Cvideo%2F*%2Caudio%2F*\">live run (all three categories of &#8220;media&#8221;<\/a>) for your &#8220;cross-browser issues, continued, work&#8221; for your perusal, and hope it is of some interest to you.<\/p>\n<hr>\n<p id='wwbf12dtdt'>Previous relevant <a target=_blank title='Windows Web Browser F12 Development Tools Debugger Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/windows-web-browser-f12-development-tools-debugger-tutorial\/'>Windows Web Browser F12 Development Tools Debugger 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\/imagecapture.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Windows Web Browser F12 Development Tools Debugger Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/imagecapture_f12.jpg\" title=\"Windows Web Browser F12 Development Tools Debugger Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Windows Web Browser F12 Development Tools Debugger Tutorial<\/p><\/div>\n<p>As hard a lesson as it may be, when you find a cross-browser issue that only happens with a certain brand or brands of web browser, if you have the time, investigate there and then on a laptop with a web inspector of that web browser brand.   So it was, today, for us with our &#8220;Media Capture Email&#8221; web application last talked about with <a target=_blank title='Canvas Image Capture Ajax FormData Annotation Dropdown Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/canvas-image-capture-ajax-formdata-annotation-dropdown-tutorial'>Canvas Image Capture Ajax FormData Annotation Dropdown Tutorial<\/a>, and its weaknesses with Internet Explorer and Microsoft Edge web browsers.<\/p>\n<p>Maybe you have been reading this blog posting thread avidly, and the mention of those two synchs with you, as was my thought too, that these two web browsers do not support the HTML5 details\/summary tags.  We&#8217;d coded for this, but our first suspicion was that this rearrangement of code could be responsible for the problems.  But you&#8217;ll only really know truth from <font size=1>whatevvvvvvvvvvvver<\/font> by testing for yourself and having a web inspector like today&#8217;s (Internet Explorer) F12 Developer Tools web inspector&#8217;s &#8230;<\/p>\n<ul>\n<li>console tab &#8230; and &#8230;<\/li>\n<li>debugger tab (at least today)<\/li>\n<\/ul>\n<p> &#8230; working to your advantage like with <a title='Windows Web Browser F12 Development Tools Primer Tutorial' href='#wwbf12dtpt'>Windows Web Browser F12 Development Tools Primer Tutorial<\/a>, putting you into the &#8220;shoes&#8221; of your web browser.<\/p>\n<p>And that&#8217;s where the timing of the execution of external Javascript, <a target=_blank title='HTML script tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_script.asp'>defer<\/a>red as it was, <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/imagecapture_f12.jpg\" title=\"Tutorial picture\">was too quick<\/a> for the parent&#8217;s deferred (via setTimeout) document.body onload logic.  Hence the canvas external Javascript code firing ahead of the canvas element creation <font size=1>&#8230; oopsy daisy!<\/font>  Delay, further, the parent code until past the external Javascript delay, and to sort out the problem here, we reposition the script (src=) tag (for external Javascript) to just before the &lt;\/body&gt; endtag, and we&#8217;re <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=TAa_TkKAwMw'>back in business baby!<\/a><\/p>\n<p>You can try the <a target=_blank title='imagecapture.html' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/imagecapture.html-----------GETME'>changed HTML<\/a> <a target=_blank title='imagecapture.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/imagecapture.html-----------GETME'>imagecapture.htm<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/imagecapture.htm\" title=\"Click picture\">live run (just images)<\/a> (or, for example, <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/imagecapture.htm?extras=%2Cvideo%2F*%2Caudio%2F*\">live run (all three categories of &#8220;media&#8221;<\/a>) for your Internet Explorer or Microsoft Edge scrutiny and perusal, and hope it is of some interest to you.<\/p>\n<hr>\n<p id='wwbf12dtpt'>Previous relevant <a target=_blank title='Windows Web Browser F12 Development Tools Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/windows-web-browser-f12-development-tools-primer-tutorial\/'>Windows Web Browser F12 Development Tools 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\/Windows\/wwbfdt.gif\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Windows Web Browser F12 Development Tools Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Windows\/wwbfdt.gif\" title=\"Windows Web Browser F12 Development Tools Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Windows Web Browser F12 Development Tools Primer Tutorial<\/p><\/div>\n<p>We can&#8217;t emphasise enough how important, and useful, are the modern &#8220;breed&#8221; of web browser &#8220;web inspectors&#8221;.  These useful tools are written by the web browser products to enhance the experience using that web browser, though, of course, they hope you never have to visit their accompanying &#8220;web inspectors&#8221; to nut out problems, because, of course their products are perfect &#8230; tee hee.<\/p>\n<p>We find the &#8220;web inspectors&#8221; great for nutting out CSS issues first and foremost, because they will all have an &#8220;Inspect HTML Element&#8221; piece of functionality (usually their top left icon) assisting the user &#8230;<\/p>\n<ul>\n<li>point at an HTML area of interest<\/li>\n<li>that\/those HTML element(s) get highlighted<\/li>\n<li>the user picks a CSS (or Styles) tab to show what CSS &#8220;rules the roost&#8221; (ie. it is hierarchical &#8230; Cascading Style Sheet)<\/li>\n<li>strategies, as needed, can be put in place, at the proper place, to remedy for the look the user is after, to achieve, as necessary<\/li>\n<\/ul>\n<p>Today, we&#8217;re visiting the Windows browsers &#8230;<\/p>\n<ul>\n<li>Internet Explorer<\/li>\n<li>Microsoft Edge<\/li>\n<\/ul>\n<p> &#8230; regarding their &#8220;web inspectors&#8221;.  For both above, they are accessed via (perhaps an initial Alt-F to get the &#8220;old&#8221; menus back, as required) &#8230;<\/p>\n<p><code><br \/>\nTools -&gt; F12 Developer Tools<br \/>\n<\/code><\/p>\n<p> &#8230; or &#8230;<\/p>\n<p><code><br \/>\nSettings (icon at top right) -&gt; F12 Developer Tools<br \/>\n<\/code><\/p>\n<p> &#8230; and then you are presented, on a non-mobile platform, with a separate window, with the menus &#8230;<\/p>\n<ul>\n<li>F12<\/li>\n<li>DOM Explorer<\/li>\n<li>Console<\/li>\n<li>Debugger<\/li>\n<li>Network<\/li>\n<li>Performance<\/li>\n<li>Memory<\/li>\n<\/li>\n<p>Emulation<\/li>\n<\/ul>\n<p> &#8230; and of these we spend most of our time in the &#8220;Console&#8221; tab, debugging for Javascript issues, should they arise, as that is where such error messages are shown to you, along, often with a line of code at issue, and a clickable means to get into that code, on occasions.<\/p>\n<p>The &#8220;Network&#8221; menu is interesting, on instigating some PHP, in that you see the HTML and non-inline Javascript and CSS components involved in a web application, displayed to you, if you are ready with it, as you launch your web application.<\/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='#d32473' onclick='var dv=document.getElementById(\"d32473\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/web-browser\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d32473' 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='#d41893' onclick='var dv=document.getElementById(\"d41893\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/web-browser\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d41893' 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='#d41902' onclick='var dv=document.getElementById(\"d41902\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/firefox\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d41902' 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='#d41926' onclick='var dv=document.getElementById(\"d41926\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/ios\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d41926' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Moving on from cross-browser, with yesterday&#8217;s Canvas Image Capture Ajax FormData Ajax Email Tutorial, we move on to cross-platform issues today regarding iOS, shortcut desktop icon usage (we talked about with Web Meets Mobile via iOS Desktop Icon Tutorial) and &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/media-ios-image-capture-ajax-formdata-cookie-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":[2,12,14,20,37],"tags":[177,275,276,305,306,2742,576,622,626,630,631,1805,997,1319,2099,1435],"class_list":["post-41926","post","type-post","status-publish","format-standard","hentry","category-ajax","category-elearning","category-event-driven-programming","category-ios","category-tutorials","tag-cache","tag-cross-browser","tag-cross-browser-issues","tag-debug","tag-debugger","tag-f12-developer-tools","tag-html","tag-internet-explorer","tag-ios","tag-ipad","tag-iphone","tag-microsoft-edge","tag-programming","tag-tutorial","tag-web-inspector","tag-windows"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/41926"}],"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=41926"}],"version-history":[{"count":2,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/41926\/revisions"}],"predecessor-version":[{"id":41928,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/41926\/revisions\/41928"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=41926"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=41926"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=41926"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}