{"id":56516,"date":"2022-07-31T03:01:45","date_gmt":"2022-07-30T17:01:45","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=56516"},"modified":"2022-07-30T13:06:02","modified_gmt":"2022-07-30T03:06:02","slug":"clipboard-api-image-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/clipboard-api-image-tutorial\/","title":{"rendered":"Clipboard API Image Tutorial"},"content":{"rendered":"<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","protected":false},"excerpt":{"rendered":"<p>Yes, yesterday&#8217;s Clipboard API Primer Tutorial&#8216;s Clipboard API usages just involved &#8230; text based data &#8230; and today we turn our attention to &#8230; image based data &#8230; to extend the functionality and interest of our changed clipboard_api_test.htm proof of &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/clipboard-api-image-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":[214,4040,265,2127,576,590,652,907,997,1254,1262,1319,1418],"class_list":["post-56516","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-clipboard","tag-clipboard-api","tag-copy","tag-cursor","tag-html","tag-image","tag-javascript","tag-paste","tag-programming","tag-text","tag-textarea","tag-tutorial","tag-webpage"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/56516"}],"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=56516"}],"version-history":[{"count":6,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/56516\/revisions"}],"predecessor-version":[{"id":56531,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/56516\/revisions\/56531"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=56516"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=56516"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=56516"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}