21,65d20
< var isvideoone=false, idtoclick='';
<   
<   var xtypes = ['image/tif', 'audio/x-m4r','audio/wav','audio/x-wav','audio/x-pn-realaudio','audio/x-mpegurl','audio/x-aiff','audio/mpeg','audio/mid',
<       'audio/basic','audio/ogg','video/x-sgi-movie','video/x-msvideo','video/quicktime','audio/mp3','video/mp4','video/mpeg',
<       'video/x-la-asf','video/ogg','video/webm','audio/mp4', 'image/jpeg', 'image/jpeg', 'image/png', 'image/gif', 'image/bmp',
<       'text/html', 'text/html', 'text/html', 'text/javascript', 'text/css', 'text/plain', 'text/xml', 'text/csv',
<       'application/vnd.ms-word', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'application/x-php', 'application/pdf', 'IMAGE/pdf',
<       'application/vnd.openxmlformats-officedocument.presentationml.presentation', 'application/vnd.ms-powerpoint',
<       'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'video/mp4'];
<   var xexts = ['.tif','.m4r','.wav','.wav','.ram','.m3u','.aiff','.mp3','.rmi',
<       '.snd','.ogg','.movie','.avi','.mov','.mp3','.m4v','.mpeg',
<       '.lsx','.ogv','.webm','.m4a', '.jpg', '.jpeg', '.png', '.gif', '.bmp',
<       '.htm', '.html', '.htmls', '.js', '.css', '.txt', '.xml', '.csv',
<       '.doc', '.docx', '.php', '.pdf', '.pdf',
<       '.pptx', '.ppt',
<       '.xls', '.xlsx', '.mp4'];
<       
< function stffsub() {
<   if (isvideoone) {
<     setTimeout(stffsub,100);
<     if (idtoclick != '') {
<     document.getElementById(idtoclick).click();
<     } else {
<     document.getElementById('fauxform').submit();
<     }
<   }
< }
<       
< function ffform() {
<   if (isvideoone) {
<     idtoclick='fsub';
<     setTimeout(stffsub,500);
<   } else {
<     idtoclick='';
<   }
< }
< 
< function fform() {
<   if (isvideoone) {
<     idtoclick='fsub';
<     setTimeout(stffsub,500);
<   } else {
<     idtoclick='';
<   }
< }
141c96
<    document.getElementById('an' + iurlit('img')).src=oinp.value;
---
>    document.getElementById('animg').src=oinp.value;
235,238c190
<       if (document.getElementById('iurl').value.indexOf('data:video') != -1) {
<       document.getElementById('ansource').type='video/' + document.getElementById('iurl').value.split('data:video/')[1].split(',')[0].split(';')[0];
<       }
<       document.getElementById('an' + (iurlit('img') == 'video' ? 'source' : 'img')).src=document.getElementById('iurl').value;
---
>       document.getElementById('animg').src=document.getElementById('iurl').value;
242,271d193
<  
<  function iurlit(sug) {
<    isvideoone=false;
<    if (document.getElementById('iurl').value.indexOf('data:video') != -1) {
<      if (document.getElementById('ansource').src != document.getElementById('iurl').value) {
<      if (1 == 1) {
<      document.getElementById('anvideo').innerHTMl='<source id=ansource type=video/' + document.getElementById('iurl').value.split('data:video/')[1].split(',')[0].split(';')[0] + ' src="' + document.getElementById('iurl').value + '"></source>';
<      } else {
<      document.getElementById('ansource').type='video/' + document.getElementById('iurl').value.split('data:video/')[1].split(',')[0].split(';')[0];
<      document.getElementById('ansource').src=document.getElementById('iurl').value;
<      }
<      //document.getElementById('anvideo').play();
<      //alert(456);
<      }
<      isvideoone=true;
<      return 'video';
<    } else if (('     ' + document.getElementById('iurl').value).slice(-5).indexOf('.') != -1) {
<      if (xexts.indexOf('.' + ('     ' + document.getElementById('iurl').value).slice(-5).toLowerCase().split('.')[1]) != -1) {
<        if (xtypes[xexts.indexOf('.' + ('     ' + document.getElementById('iurl').value).slice(-5).toLowerCase().split('.')[1])].indexOf('video/') == 0) {
<      if (document.getElementById('ansource').src != document.getElementById('iurl').value) {
<      document.getElementById('anvideo').innerHTMl='<source id=ansource type=video/' + xtypes[xexts.indexOf('.' + ('     ' + document.getElementById('iurl').value).slice(-5).toLowerCase().split('.')[1])] + ' src="' + document.getElementById('iurl').value + '"></source>';
<      //alert(2456);
<      }
<      isvideoone=true;
<      return 'video';
<        }
<      }
<    }
<    return sug;
<  }
285,291c207
<       if (document.getElementById('dettd1')) {
<       document.getElementById('dettd1').innerHTML=document.getElementById('sumtd1').outerHTML;
<       }
<       if (document.getElementById('dettd2')) {
<       document.getElementById('dettd2').innerHTML=document.getElementById('sumtd2').outerHTML;
<       }
<       document.getElementById('sumdi3').innerHTML='<br><br><h1>Canvas DrawImage 3 arguments (Positioning) example which is actioned by your form filling and clicking ...  <sup><select id=mysela onchange=process(this); style=width:30px;><option value=" ">Other Canvas Usage Ideas below ...</option><option value=di3 selected>Canvas DrawImage 3 arguments ... Positioning</option><option value=di5>Canvas DrawImage 5 arguments ... Positioning and Scaling</option><option value=di9>Canvas DrawImage 9 arguments ... Slicing and Scaling and Cropping</option><option value=td1>Canvas toDataURL 1 argument ... PNG/JPEG/GIF/HEIC</option><option value=td2>Canvas toDataURL 2 arguments ... JPEG/HEIC Quality</option></select></sup></h1>';
---
>       document.getElementById('sumdi3').innerHTML='<br><br><h1>Canvas DrawImage 3 arguments (Positioning) example which is actioned by your form filling and clicking ...  <sup><select id=mysela onchange=process(this); style=width:30px;><option value=" ">Other Canvas Usage Ideas below ...</option><option value=di3 selected>Canvas DrawImage 3 arguments ... Positioning</option><option value=di5>Canvas DrawImage 5 arguments ... Positioning and Scaling</option><option value=di9>Canvas DrawImage 9 arguments ... Slicing and Scaling and Cropping</option></select></sup></h1>';
294c210
<       document.getElementById('detdi3').innerHTML+='<form id=fauxform onsubmit="ctx.drawImage(document.getElementById(' + "'an' + iurlit('img')" + '), document.getElementById(' + "'thex'" + ').value, document.getElementById(' + "'they'" + ').value); return false;"><input style=width:50%; onblur=changeim(this); type=text id=iurl name=iurl value="" placeholder="Image/Video URL ... or ..."></input>&nbsp;&nbsp;<iframe class="spag" scrolling="no" id="cbi" frameborder="0" style="width:175px;height:200px;margin-top:-164px;" data-ok="218,-194" data-nmok="200,-178" src="/HTMLCSS/client_browsing.htm?d=332160562686&wording=Allimages%20images%2E%20"></iframe><br><br>X: <input type=number name=thex id=thex value=0 step=1></input>&nbsp;&nbsp;Y: <input type=number name=they id=they value=0 step=1></input><br><br><input id=fsub onclick=fform(); style=background-color:lightgreen; type=submit value="Draw Image/Video above as well ..."></input></form><br><br>';
---
>       document.getElementById('detdi3').innerHTML+='<form onsubmit="ctx.drawImage(document.getElementById(' + "'animg'" + '), document.getElementById(' + "'thex'" + ').value, document.getElementById(' + "'they'" + ').value); return false;"><input style=width:50%; onblur=changeim(this); type=url id=iurl name=iurl value="" placeholder="Image URL ... or ..."></input>&nbsp;&nbsp;<iframe class="spag" scrolling="no" id="cbi" frameborder="0" style="width:175px;height:200px;margin-top:-164px;" data-ok="218,-194" data-nmok="200,-178" src="/HTMLCSS/client_browsing.htm?d=332160562686&wording=Allimages%20images%2E%20"></iframe><br><br>X: <input type=number name=thex id=thex value=0 step=1></input>&nbsp;&nbsp;Y: <input type=number name=they id=they value=0 step=1></input><br><br><input style=background-color:lightgreen; type=submit value="Draw Image above as well ..."></input></form><br><br>';
306,312c222
<       if (document.getElementById('dettd1')) {
<       document.getElementById('dettd1').innerHTML=document.getElementById('sumtd1').outerHTML;
<       }
<       if (document.getElementById('dettd2')) {
<       document.getElementById('dettd2').innerHTML=document.getElementById('sumtd2').outerHTML;
<       }
<       document.getElementById('sumdi5').innerHTML='<br><br><h1>Canvas DrawImage 5 arguments (Positioning and Scaling) example which is actioned by your form filling and clicking ...  <sup><select id=mysela onchange=process(this); style=width:30px;><option value=" ">Other Canvas Usage Ideas below ...</option><option value=di3>Canvas DrawImage 3 arguments ... Positioning</option><option value=di5 selected>Canvas DrawImage 5 arguments ... Positioning and Scaling</option><option value=di9>Canvas DrawImage 9 arguments ... Slicing and Scaling and Cropping</option><option value=td1>Canvas toDataURL 1 argument ... PNG/JPEG/GIF/HEIC</option><option value=td2>Canvas toDataURL 2 arguments ... JPEG/HEIC Quality</option></select></sup></h1>';
---
>       document.getElementById('sumdi5').innerHTML='<br><br><h1>Canvas DrawImage 5 arguments (Positioning and Scaling) example which is actioned by your form filling and clicking ...  <sup><select id=mysela onchange=process(this); style=width:30px;><option value=" ">Other Canvas Usage Ideas below ...</option><option value=di3>Canvas DrawImage 3 arguments ... Positioning</option><option value=di5 selected>Canvas DrawImage 5 arguments ... Positioning and Scaling</option><option value=di9>Canvas DrawImage 9 arguments ... Slicing and Scaling and Cropping</option></select></sup></h1>';
315c225
<       document.getElementById('detdi5').innerHTML+='<form id=fauxform onsubmit="ctx.drawImage(document.getElementById(' + "'an' + iurlit('img')" + '), document.getElementById(' + "'thex'" + ').value, document.getElementById(' + "'they'" + ').value, document.getElementById(' + "'thewidth'" + ').value, document.getElementById(' + "'theheight'" + ').value); return false;"><input style=width:50%; onblur=changeim(this); type=text id=iurl name=iurl value="" placeholder="Image/Video URL ... or ..."></input>&nbsp;&nbsp;<iframe class="spag" scrolling="no" id="cbi" frameborder="0" style="width:175px;height:200px;margin-top:-164px;" data-ok="218,-194" data-nmok="200,-178" src="/HTMLCSS/client_browsing.htm?d=332160562686&wording=Allimages%20images%2E%20"></iframe><br><br>X: <input type=number name=thex id=thex value=0 step=1></input>&nbsp;&nbsp;Y: <input type=number name=they id=they value=0 step=1></input>&nbsp;&nbsp;Width: <input type=number name=thewidth id=thewidth value=0 step=1></input>&nbsp;&nbsp;Height: <input type=number name=theheight id=theheight value=0 step=1></input><br><br><input id=fsub onclick=fform(); style=background-color:lightgreen; type=submit value="Draw Image/Video above as well ..."></input></form><br><br>';
---
>       document.getElementById('detdi5').innerHTML+='<form onsubmit="ctx.drawImage(document.getElementById(' + "'animg'" + '), document.getElementById(' + "'thex'" + ').value, document.getElementById(' + "'they'" + ').value, document.getElementById(' + "'thewidth'" + ').value, document.getElementById(' + "'theheight'" + ').value); return false;"><input style=width:50%; onblur=changeim(this); type=url id=iurl name=iurl value="" placeholder="Image URL ... or ..."></input>&nbsp;&nbsp;<iframe class="spag" scrolling="no" id="cbi" frameborder="0" style="width:175px;height:200px;margin-top:-164px;" data-ok="218,-194" data-nmok="200,-178" src="/HTMLCSS/client_browsing.htm?d=332160562686&wording=Allimages%20images%2E%20"></iframe><br><br>X: <input type=number name=thex id=thex value=0 step=1></input>&nbsp;&nbsp;Y: <input type=number name=they id=they value=0 step=1></input>&nbsp;&nbsp;Width: <input type=number name=thewidth id=thewidth value=0 step=1></input>&nbsp;&nbsp;Height: <input type=number name=theheight id=theheight value=0 step=1></input><br><br><input style=background-color:lightgreen; type=submit value="Draw Image above as well ..."></input></form><br><br>';
327,333c237
<       if (document.getElementById('dettd1')) {
<       document.getElementById('dettd1').innerHTML=document.getElementById('sumtd1').outerHTML;
<       }
<       if (document.getElementById('dettd2')) {
<       document.getElementById('dettd2').innerHTML=document.getElementById('sumtd2').outerHTML;
<       }
<       document.getElementById('sumdi9').innerHTML='<br><br><h1>Canvas DrawImage 9 arguments (Slicing and Scaling and Cropping) example which is actioned by your form filling and clicking ...  <sup><select id=mysela onchange=process(this); style=width:30px;><option value=" ">Other Canvas Usage Ideas below ...</option><option value=di3>Canvas DrawImage 3 arguments ... Positioning</option><option value=di5>Canvas DrawImage 5 arguments ... Positioning and Scaling</option><option value=di9 selected>Canvas DrawImage 9 arguments ... Slicing and Scaling and Cropping</option><option value=td1>Canvas toDataURL 1 argument ... PNG/JPEG/GIF/HEIC</option><option value=td2>Canvas toDataURL 2 arguments ... JPEG/HEIC Quality</option></select></sup></h1>';
---
>       document.getElementById('sumdi9').innerHTML='<br><br><h1>Canvas DrawImage 9 arguments (Slicing and Scaling and Cropping) example which is actioned by your form filling and clicking ...  <sup><select id=mysela onchange=process(this); style=width:30px;><option value=" ">Other Canvas Usage Ideas below ...</option><option value=di3>Canvas DrawImage 3 arguments ... Positioning</option><option value=di5>Canvas DrawImage 5 arguments ... Positioning and Scaling</option><option value=di9 selected>Canvas DrawImage 9 arguments ... Slicing and Scaling and Cropping</option></select></sup></h1>';
336,379c240
<       document.getElementById('detdi9').innerHTML+='<form id=fauxform onsubmit="ctx.drawImage(document.getElementById(' + "'an' + iurlit('img')" + '), document.getElementById(' + "'thex'" + ').value, document.getElementById(' + "'they'" + ').value, document.getElementById(' + "'theswidth'" + ').value, document.getElementById(' + "'thesheight'" + ').value, document.getElementById(' + "'thecx'" + ').value, document.getElementById(' + "'thecy'" + ').value, document.getElementById(' + "'thewidth'" + ').value, document.getElementById(' + "'theheight'" + ').value); return false;"><input style=width:50%; onblur=changeim(this); type=text id=iurl name=iurl value="" placeholder="Image/Video URL ... or ..."></input>&nbsp;&nbsp;<iframe class="spag" scrolling="no" id="cbi" frameborder="0" style="width:175px;height:200px;margin-top:-164px;" data-ok="218,-194" data-nmok="200,-178" src="/HTMLCSS/client_browsing.htm?d=332160562686&wording=Allimages%20images%2E%20"></iframe><br><br>X: <input style=width:95px; type=number name=thex id=thex value=0 step=1></input>&nbsp;&nbsp;Y: <input style=width:95px; type=number name=they id=they value=0 step=1></input>&nbsp;&nbsp;<sup>Clipped</sup> <sub>Width</sub>: <input style=width:95px; type=number name=theswidth id=theswidth value=0 step=1></input>&nbsp;&nbsp;<sup>Clipped</sup> <sub>Height</sub>: <input style=width:95px; type=number name=thesheight id=thesheight value=0 step=1></input>&nbsp;&nbsp;<sup>Final</sup> <sub>X</sub>: <input style=width:95px; type=number name=thecx id=thecx value=0 step=1></input>&nbsp;&nbsp;<sup>Final</sup> <sub>Y</sub>: <input style=width:95px; type=number name=thecy id=thecy value=0 step=1></input>&nbsp;&nbsp;<sup>Final</sup> <sub>Width</sub>: <input style=width:95px; type=number name=thewidth id=thewidth value=0 step=1></input>&nbsp;&nbsp;<sup>Final</sup> <sub>Height</sub>: <input style=width:95px; type=number name=theheight id=theheight value=0 step=1></input><br><br><input id=fsub onclick=fform(); style=background-color:lightgreen; type=submit value="Draw Image/Video above as well ..."></input></form><br><br>';
<       break;
< 
<   
<     case 'td1':
<       document.getElementById('detvideo').style.display='none';
<       document.getElementById('previd').style.display='none';
<       if (document.getElementById('detdi3')) {
<       document.getElementById('detdi3').innerHTML=document.getElementById('sumdi3').outerHTML;
<       }
<       if (document.getElementById('detdi9')) {
<       document.getElementById('detdi9').innerHTML=document.getElementById('sumdi9').outerHTML;
<       }
<       if (document.getElementById('detdi5')) {
<       document.getElementById('detdi5').innerHTML=document.getElementById('sumdi5').outerHTML;
<       }
<       if (document.getElementById('dettd2')) {
<       document.getElementById('dettd2').innerHTML=document.getElementById('sumtd2').outerHTML;
<       }
<       document.getElementById('sumtd1').innerHTML='<br><br><h1>Canvas toDataURL 1 argument (PNG/JPEG/GIF/HEIC/WEBP) example which is actioned by your form filling and clicking ...  <sup><select id=mysela onchange=process(this); style=width:30px;><option value=" ">Other Canvas Usage Ideas below ...</option><option value=di3>Canvas DrawImage 3 arguments ... Positioning</option><option value=di5>Canvas DrawImage 5 arguments ... Positioning and Scaling</option><option value=di9>Canvas DrawImage 9 arguments ... Slicing and Scaling and Cropping</option><option value=td1>Canvas toDataURL 1 argument ... PNG/JPEG/GIF/HEIC</option><option value=td2 selected>Canvas toDataURL 2 arguments ... JPEG/HEIC Quality</option></select></sup></h1>';
<       document.getElementById('sumtd1').style.display='block';
<       document.getElementById('dettd1').style.display='block';
<       document.getElementById('dettd1').innerHTML+='<form id=fauxform onsubmit="ctx.drawImage(document.getElementById(' + "'an' + iurlit('img')" + '), document.getElementById(' + "'thex'" + ').value, document.getElementById(' + "'they'" + ').value); document.getElementById(' + "'tares'" + ').value=can.toDataURL(' + "'image/' + document.getElementById('itype').value" + '); document.getElementById(' + "'tares'" + ').title=' + "'' + document.getElementById('tares').value.length + ' characters'" + '; return false;"><input style=width:50%; onblur=changeim(this); type=text id=iurl name=iurl value="" placeholder="Image/Video URL ... or ..."></input>&nbsp;&nbsp;<iframe class="spag" scrolling="no" id="cbi" frameborder="0" style="width:175px;height:200px;margin-top:-164px;" data-ok="218,-194" data-nmok="200,-178" src="/HTMLCSS/client_browsing.htm?d=332160562686&wording=Allimages%20images%2E%20"></iframe><br><br>X: <input style=width:95px; type=number name=thex id=thex value=0 step=1></input>&nbsp;&nbsp;Y: <input style=width:95px; type=number name=they id=they value=0 step=1></input><br><br>Type: <select name=itype id=itype><option value=jpeg>PNG</option><option value=jpeg>JPEG</option>><option value=gif>GIF</option><option value=heic>HEIC</option><option value=webp>WEBP</option></select><br><br><textarea title="0 characters ... so far" rows=5 style=width:70%; id=tares placeholder="Data URI goes here ..." disabled></textarea><br><br><input onclick=fform(); style=background-color:lightgreen; type=submit value="Draw Image/Video above as well as Extract Contents to a data URI below ..."></input>&nbsp;&nbsp;<input id=fsub onclick="ffform(); document.getElementById(' + "'tares'" + ').value=can.toDataURL(' + "'image/' + document.getElementById('itype').value" + ');  document.getElementById(' + "'tares'" + ').title=' + "'' + document.getElementById('tares').value.length + ' characters'" + ';  " style=background-color:lightgreen; type=button value="Extract Contents to a data URI below ..."></input></form><br><br>';
<       break;
<   
<     case 'td2':
<       document.getElementById('detvideo').style.display='none';
<       document.getElementById('previd').style.display='none';
<       if (document.getElementById('detdi3')) {
<       document.getElementById('detdi3').innerHTML=document.getElementById('sumdi3').outerHTML;
<       }
<       if (document.getElementById('detdi5')) {
<       document.getElementById('detdi5').innerHTML=document.getElementById('sumdi5').outerHTML;
<       }
<       if (document.getElementById('dettd1')) {
<       document.getElementById('dettd1').innerHTML=document.getElementById('sumtd1').outerHTML;
<       }
<       if (document.getElementById('detdi9')) {
<       document.getElementById('detdi9').innerHTML=document.getElementById('sumdi9').outerHTML;
<       }
<       document.getElementById('sumtd2').innerHTML='<br><br><h1>Canvas toDataURL 2 arguments (JPEG/HEIC and Quality) example which is actioned by your form filling and clicking ...  <sup><select id=mysela onchange=process(this); style=width:30px;><option value=" ">Other Canvas Usage Ideas below ...</option><option value=di3>Canvas DrawImage 3 arguments ... Positioning</option><option value=di5>Canvas DrawImage 5 arguments ... Positioning and Scaling</option><option value=di9>Canvas DrawImage 9 arguments ... Slicing and Scaling and Cropping</option><option value=td1>Canvas toDataURL 1 argument ... PNG/JPEG/GIF/HEIC</option><option value=td2 selected>Canvas toDataURL 2 arguments ... JPEG/HEIC Quality</option></select></sup></h1>';
<       document.getElementById('sumtd2').style.display='block';
<       document.getElementById('dettd2').style.display='block';
<       document.getElementById('dettd2').innerHTML+='<form id=fauxform onsubmit="ctx.drawImage(document.getElementById(' + "'an' + iurlit('img')" + '), document.getElementById(' + "'thex'" + ').value, document.getElementById(' + "'they'" + ').value); document.getElementById(' + "'tares'" + ').value=can.toDataURL(' + "'image/' + document.getElementById('itype').value" + ', document.getElementById(' + "'thequality'" + ').value); document.getElementById(' + "'tares'" + ').title=' + "'' + document.getElementById('tares').value.length + ' characters'" + '; return false;"><input style=width:50%; onblur=changeim(this); type=text id=iurl name=iurl value="" placeholder="Image/Video URL ... or ..."></input>&nbsp;&nbsp;<iframe class="spag" scrolling="no" id="cbi" frameborder="0" style="width:175px;height:200px;margin-top:-164px;" data-ok="218,-194" data-nmok="200,-178" src="/HTMLCSS/client_browsing.htm?d=332160562686&wording=Allimages%20images%2E%20"></iframe><br><br>X: <input style=width:95px; type=number name=thex id=thex value=0 step=1></input>&nbsp;&nbsp;Y: <input style=width:95px; type=number name=they id=they value=0 step=1></input><br><br>Type: <select name=itype id=itype><option value=jpeg>JPEG</option><option value=heic>HEIC</option></select>&nbsp;&nbsp;Quality: <input style=width:95px; type=number name=thequality id=thequality value=1.0 step=0.1 min=0.0 max=1.0></input><br><br><textarea title="0 characters ... so far" rows=5 style=width:70%; id=tares placeholder="Data URI goes here ..." disabled></textarea><br><br><input id=fsub onclick=fform(); style=background-color:lightgreen; type=submit value="Draw Image/Video above as well as Extract Contents to a data URI below ..."></input>&nbsp;&nbsp;<input id=fsub onclick="ffform(); document.getElementById(' + "'tares'" + ').value=can.toDataURL(' + "'image/' + document.getElementById('itype').value" + ', document.getElementById(' + "'thequality'" + ').value);  document.getElementById(' + "'tares'" + ').title=' + "'' + document.getElementById('tares').value.length + ' characters'" + ';  " style=background-color:lightgreen; type=button value="Extract Contents to a data URI below ..."></input></form><br><br>';
---
>       document.getElementById('detdi9').innerHTML+='<form onsubmit="ctx.drawImage(document.getElementById(' + "'animg'" + '), document.getElementById(' + "'thex'" + ').value, document.getElementById(' + "'they'" + ').value, document.getElementById(' + "'theswidth'" + ').value, document.getElementById(' + "'thesheight'" + ').value, document.getElementById(' + "'thecx'" + ').value, document.getElementById(' + "'thecy'" + ').value, document.getElementById(' + "'thewidth'" + ').value, document.getElementById(' + "'theheight'" + ').value); return false;"><input style=width:50%; onblur=changeim(this); type=url id=iurl name=iurl value="" placeholder="Image URL ... or ..."></input>&nbsp;&nbsp;<iframe class="spag" scrolling="no" id="cbi" frameborder="0" style="width:175px;height:200px;margin-top:-164px;" data-ok="218,-194" data-nmok="200,-178" src="/HTMLCSS/client_browsing.htm?d=332160562686&wording=Allimages%20images%2E%20"></iframe><br><br>X: <input style=width:95px; type=number name=thex id=thex value=0 step=1></input>&nbsp;&nbsp;Y: <input style=width:95px; type=number name=they id=they value=0 step=1></input>&nbsp;&nbsp;<sup>Clipped</sup> <sub>Width</sub>: <input style=width:95px; type=number name=theswidth id=theswidth value=0 step=1></input>&nbsp;&nbsp;<sup>Clipped</sup> <sub>Height</sub>: <input style=width:95px; type=number name=thesheight id=thesheight value=0 step=1></input>&nbsp;&nbsp;<sup>Final</sup> <sub>X</sub>: <input style=width:95px; type=number name=thecx id=thecx value=0 step=1></input>&nbsp;&nbsp;<sup>Final</sup> <sub>Y</sub>: <input style=width:95px; type=number name=thecy id=thecy value=0 step=1></input>&nbsp;&nbsp;<sup>Final</sup> <sub>Width</sub>: <input style=width:95px; type=number name=thewidth id=thewidth value=0 step=1></input>&nbsp;&nbsp;<sup>Final</sup> <sub>Height</sub>: <input style=width:95px; type=number name=theheight id=theheight value=0 step=1></input><br><br><input style=background-color:lightgreen; type=submit value="Draw Image above as well ..."></input></form><br><br>';
382d242
< 
425c285
< <h1>Video and Captions to Canvas <sup><select id=mysel onchange=process(this); style=width:30px;><option value=''>Other Canvas Usage Ideas below ...</option><option value='di3'>Canvas DrawImage 3 arguments ... Positioning</option><option value='di5'>Canvas DrawImage 5 arguments ... Positioning and Scaling</option><option value='di9'>Canvas DrawImage 9 arguments ... Slicing and Scaling and Cropping</option><option value=td1>Canvas toDataURL 1 argument ... PNG/JPEG/GIF/HEIC</option><option value=td2>Canvas toDataURL 2 arguments ... JPEG/HEIC Quality</option></select></sup></h1>
---
> <h1>Video and Captions to Canvas <sup><select id=mysel onchange=process(this); style=width:30px;><option value=''>Other Canvas Usage Ideas below ...</option><option value='di3'>Canvas DrawImage 3 arguments ... Positioning</option><option value='di5'>Canvas DrawImage 5 arguments ... Positioning and Scaling</option><option value='di9'>Canvas DrawImage 9 arguments ... Slicing and Scaling and Cropping</option></select></sup></h1>
440,445d299
< <details id=dettd1 style=display:none; open><summary style=display:none; id=sumtd1></summary>
< </details>
< 
< <details id=dettd2 style=display:none; open><summary style=display:none; id=sumtd2></summary>
< </details>
< 
525,526d378
< <div id=danvideo><video style=display:none; id=anvideo autoplay=true autostart=true loop=true controls><source type=video/mp4 id=ansource src=''></source></video></div>
< <div id=danaudio><audio style=display:none; id=anaudio controls><source type=audio/mp3 id=anasource src=''></source> src=''></audio></div>