{"id":56598,"date":"2022-08-10T03:01:20","date_gmt":"2022-08-09T17:01:20","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=56598"},"modified":"2022-08-09T16:13:17","modified_gmt":"2022-08-09T06:13:17","slug":"selection-api-and-clipboard-api-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/selection-api-and-clipboard-api-tutorial\/","title":{"rendered":"Selection API and Clipboard API Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/clipboard_api_test.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Selection API and Clipboard API Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/selection_api_test.gif\" title=\"Selection API and Clipboard API Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Selection API and Clipboard API Tutorial<\/p><\/div>\n<p>There&#8217;s the &#8230;<\/p>\n<ul>\n<li>clipboard, the &#8220;cut and copy and paste ideas&#8221;, for text, as we showed you with <a title='Clipboard API Image Tutorial' href='#capiit'>Clipboard API Image Tutorial<\/a> and <a target=_blank title='Clipboard API Primer Tutorial' href='#capipt'>Clipboard API Primer Tutorial<\/a> &#8230; but there&#8217;s also the bit before you reach the clipboard using the &#8230;<\/li>\n<li>text selection (ie. the bit of text you highlight using your mouse or touchpad) &#8230; accessible, today, via our introduction to the <a target=_blank title='Selection API' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Selection_API'>Selection API<\/a><\/li>\n<\/ul>\n<p> &#8230; using HTML <font color=blue>changed code<\/font> &#8230;<\/p>\n<p><code><br \/>\n<font color=blue>&lt;table&gt;&lt;tr&gt;&lt;td&gt;<\/font>&lt;textarea id=mytao class=editor rows=7 cols=120 onmousedown=\"mustnot=true;  setTimeout(mnoff, 2000);\" ontouchstart=\"mustnot=true;  setTimeout(mnoff, 2000);\"&gt;&lt;\/textarea&gt;<font color=blue>&lt;\/td&gt;&lt;\/TR&gt;&lt;TR&gt;&lt;td id=emailsms style=display:none;vertical-align:top;&gt;&nbsp;&lt;a target=_blank href='mailto:?subject=My%20Selection%20...&body=' id=aemail title=Email&gt;&amp;#128231;&lt;\/a&gt;&nbsp;&lt;a target=_blank onmouseover=\"if (smsee.length == 0 && origsmsurl.indexOf('sms:&') != -1) { smsee=prompt('Please enter SMS number to send to.', ''); if (smsee == null) { smsee=''; } else { origsmsurl=origsmsurl.replace('sms:&','sms:' + smsee + '&'); asmsurl=asmsurl.replace('sms:&','sms:' + smsee + '&'); this.href=asmsurl;  }   }\" ontouchstart=\"if (smsee.length == 0 && origsmsurl.indexOf('sms:&') != -1) { smsee=prompt('Please enter SMS number to send to.', ''); if (smsee == null) { smsee=''; } else { origsmsurl=origsmsurl.replace('sms:&','sms:' + smsee + '&'); asmsurl=asmsurl.replace('sms:&','sms:' + smsee + '&'); this.href=asmsurl;  }   }\" href='sms:&body=My%20Selection%20...' id=asms title=SMS&gt;&amp;#128223;&lt;\/a&gt;&lt;\/td&gt;&lt;\/tr&gt;&lt;\/table&gt;<\/font>&lt;br&gt;&lt;br&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; supported by new Javascript event interventional code &#8230;<\/p>\n<p><code><br \/>\n var origemailurl='mailto:?subject=My%20Selection%20...&body=';<br \/>\n var origsmsurl='sms:&body=My%20Selection%20...';<br \/>\n var smsee='';<br \/>\n<br \/>\n\/\/ addEventListener version<br \/>\ndocument.addEventListener('selectionchange', () => {<br \/>\n  document.getElementById('emailsms').style.display='table-cell';<br \/>\n  document.getElementById('mytao').title=document.getSelection().toString();<br \/>\n  aemailurl=origemailurl + encodeURIComponent(document.getSelection().toString());<br \/>\n  document.getElementById('aemail').href=aemailurl;<br \/>\n  asmsurl=origsmsurl + encodeURIComponent(String.fromCharCode(10) + document.getSelection().toString());<br \/>\n  document.getElementById('asms').href=asmsurl;<br \/>\n  console.log(document.getSelection().toString());<br \/>\n});<br \/>\n<br \/>\n\/\/ addEventListener version<br \/>\ndocument.addEventListener('selectstart', () => {<br \/>\n  document.getElementById('mytao').title='';<br \/>\n  aemailurl=origemailurl;<br \/>\n  asmsurl=origsmsurl;<br \/>\n  console.log('Selection started');<br \/>\n});<br \/>\n<\/code><\/p>\n<p> &#8230; to be able to share your highlighted text snippets via email or SMS in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/clipboard_api_test.html--GETME\">the changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/clipboard_api_test.htmlGETME\" title=\"clipboard_api_test.html\">clipboard_api_test.html<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/clipboard_api_test.html\">Selection API usage web application<\/a> you can also try <a href='#myifca'>below<\/a>.<\/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\/selection-api-and-clipboard-api-tutorial\/'>Selection API and Clipboard API Tutorial<\/a>.<\/p-->\n<hr>\n<p id='capiit'>Previous relevant <a target=_blank title='Clipboard API Image Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/clipboard-api-image-tutorial\/'>Clipboard API Image Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/clipboard_api_test.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Clipboard API Image Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/clipboard_api_test_media.jpg\" title=\"Clipboard API Image Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Clipboard API Image Tutorial<\/p><\/div>\n<p>Yes, yesterday&#8217;s <a title='Clipboard API Primer Tutorial' href='#capipt'>Clipboard API Primer Tutorial<\/a>&#8216;s <a target=_blank title='Clipboard API' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Clipboard_API'>Clipboard API<\/a> usages just involved &#8230;<\/p>\n<ul>\n<li>text based data &#8230; and today we turn our attention to &#8230;<\/li>\n<li>image based data<\/li>\n<\/ul>\n<p> &#8230; to extend the functionality and interest of <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/clipboard_api_test.html-GETME\" title=\"clipboard_api_test.htm\">our changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/clipboard_api_test.html-GETME\" title=\"clipboard_api_test.htm\">clipboard_api_test.htm<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/clipboard_api_test.htm\" title=\"Click picture\">proof of concept<\/a><br \/>\n text and image clipboard using webpage.<\/p>\n<p>It&#8217;s lucky for us that there are so many good resources out there to help, one link of real interest, for us, being <a target=_blank title='Excellent link' href='https:\/\/stackoverflow.com\/questions\/6333814\/how-does-the-paste-image-from-clipboard-functionality-work-in-gmail-and-google-c'>this excellent link<\/a>, thanks, getting us to use this new Javascript function &#8230;<\/p>\n<p><code><br \/>\nasync function pasteImage() {<br \/>\n  \/\/event.stopPropagation();<br \/>\n  try {<br \/>\n    const permission = await navigator.permissions.query({ name: 'clipboard-read' });<br \/>\n    if (permission.state === 'denied') {<br \/>\n      throw new Error('Not allowed to read clipboard.');<br \/>\n    }<br \/>\n    const clipboardContents = await navigator.clipboard.read();<br \/>\n    for (const item of clipboardContents) {<br \/>\n      if (!item.types.includes('image\/png')) {<br \/>\n        throw new Error('Clipboard contains non-image data.');<br \/>\n      }<br \/>\n      const blob = await item.getType('image\/png');<br \/>\n      imgz = new Image();<br \/>\n      anothercell();<br \/>\n      imgz.onload = () => {<br \/>\n        destinationImage.style.width='' + imgz.width + 'px';<br \/>\n        destinationImage.style.height='' + imgz.height + 'px';<br \/>\n        prevw=eval('' + ('' + cnv.style.width).replace('px',''));<br \/>\n        prevh=eval('' + ('' + cnv.style.height).replace('px',''));<br \/>\n        console.log('canvas width becomes ' + eval('' + cnv.width) + ' + ' + eval('' + imgz.width) + ' = ' + '' + eval(eval('' + cnv.width) + eval('' + imgz.width)) + 'px');<br \/>\n        cnv.style.width='' + eval(eval('' + ('' + cnv.style.width).replace('px','')) + eval('' + imgz.width)) + 'px';<br \/>\n        cnv.style.height='' + eval(eval('' + ('' + cnv.style.height).replace('px','')) + eval('' + imgz.height)) + 'px';<br \/>\n        cnv.width='' + ('' + cnv.style.width).replace('px','') + 'px';<br \/>\n        cnv.height='' + ('' + cnv.style.height).replace('px','') + 'px';<br \/>\n      if (mmode == 'mbefore' || 1 == 1) {<br \/>\n      ctx.drawImage(imgz, prevw, prevh);<br \/>\n      if (wo) {<br \/>\n        wo.close();<br \/>\n        wo=null;<br \/>\n      }<br \/>\n      cnv.style.display='block';<br \/>\n      \/\/wo=window.open('','_blank','top=50,left=50,height=600,width=600');<br \/>\n      \/\/wo.document.write(cnv.toDataURL('image\/png'));<br \/>\n      }<br \/>\n      };<br \/>\n      imgz.src = URL.createObjectURL(blob);<br \/>\n      destinationImage.src = URL.createObjectURL(blob);<br \/>\n      \/\/cnv.style.backgroundRepeat=(('' + cnv.style.backgroundRepeat) + ',no-repeat').replace(\/^\\,\/g,'');<br \/>\n      \/\/if (('' + cnv.style.background + ' ').trim() != '') { document.getElementById('mysummary').innerHTML='Conglomerated Images below ...';  }<br \/>\n      cnv.style.background=(('' + cnv.style.background) + ',url(' + destinationImage.src + ') no-repeat').replace(\/^\\,\/g,'');<br \/>\n      \/\/document.querySelector(\".editor\").style.display='block';<br \/>\n      \/\/destinationImage.style.display='none';<br \/>\n      setTimeout(anothercellz, 6000);<br \/>\n    }<br \/>\n  }<br \/>\n  catch (error) {<br \/>\n    console.error(error.message);<br \/>\n  }<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; to achieve a lot of this image data use of the Clipboard API functionality.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/clipboard-api-image-tutorial\/'>Clipboard API Image Tutorial<\/a>.<\/p-->\n<hr>\n<p id='capipt'>Previous relevant <a target=_blank title='Clipboard API Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/clipboard-api-primer-tutorial\/'>Clipboard API Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/clipboard_api_test.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Clipboard API Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/clipboard_api_test.jpg\" title=\"Clipboard API Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Clipboard API Primer Tutorial<\/p><\/div>\n<p>Here&#8217;s another day of testing a Javascript API today, which has that &#8220;desktop feel&#8221;, that being the <a target=_blank title='Clipboard API' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Clipboard_API'>Clipboard API<\/a> &#8230;<\/p>\n<blockquote cite='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Clipboard_API'><p>\nThe Clipboard API provides the ability to respond to clipboard commands (cut, copy, and paste) as well as to asynchronously read from and write to the system clipboard.\n<\/p><\/blockquote>\n<p> &#8230; our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/clipboard_api_test.html_GETME\" title=\"clipboard_api_test.html\">clipboard_api_test.html<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/clipboard_api_test.html\" title=\"Click picture\">proof of concept<\/a> version offering &#8220;text clipboard data&#8221; functionality from the text based clipboard into an HTML textarea element via &#8230;<\/p>\n<ul>\n<li>append<\/li>\n<li>prepend<\/li>\n<li>at cursor<\/li>\n<\/ul>\n<p> &#8230; modes of use, you can also try below (or get a <a onclick=\"if \n (1 == 11) { window.open('\/\/www.rjmprogramming.com.au\/HTMLCSS\/clipboard_api_test.htm','myifca');  \n } else { document.getElementById('myifca').src='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/clipboard_api_test.htm'; }\" style=\"cursor:pointer;text-decoration:underline;\" title='Below'>sneak<\/a> <a title='New window' target=_blank href='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/clipboard_api_test.htm'>peak<\/a> at tomorrow&#8217;s ideas) &#8230;<\/p>\n<p><iframe name=myifca id=myifca style=\"width:100%;height:1000px;\" src=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/clipboard_api_test.html\"><\/iframe><\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d56509' onclick='var dv=document.getElementById(\"d56509\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/paste\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d56509' 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='#d56516' onclick='var dv=document.getElementById(\"d56516\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/image\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d56516' 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='#d56598' onclick='var dv=document.getElementById(\"d56598\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/highlight\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d56598' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>There&#8217;s the &#8230; clipboard, the &#8220;cut and copy and paste ideas&#8221;, for text, as we showed you with Clipboard API Image Tutorial and Clipboard API Primer Tutorial &#8230; but there&#8217;s also the bit before you reach the clipboard using the &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/selection-api-and-clipboard-api-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,37],"tags":[4040,265,2127,286,1696,2349,576,590,652,907,997,1116,4058,4057,1254,1262,4056,1319,1418],"class_list":["post-56598","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-clipboard-api","tag-copy","tag-cursor","tag-cut","tag-event-driven-programming","tag-highlight","tag-html","tag-image","tag-javascript","tag-paste","tag-programming","tag-selection","tag-selection-api","tag-tclipboard","tag-text","tag-textarea","tag-this-entry-was-posted-in-elearning","tag-tutorial","tag-webpage"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/56598"}],"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=56598"}],"version-history":[{"count":7,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/56598\/revisions"}],"predecessor-version":[{"id":56605,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/56598\/revisions\/56605"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=56598"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=56598"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=56598"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}