{"id":55897,"date":"2022-05-22T03:01:25","date_gmt":"2022-05-21T17:01:25","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=55897"},"modified":"2022-05-22T09:40:21","modified_gmt":"2022-05-21T23:40:21","slug":"keyboard-based-cursor-canvas-content-copy-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/keyboard-based-cursor-canvas-content-copy-tutorial\/","title":{"rendered":"Keyboard Based Cursor Canvas Content Copy Tutorial"},"content":{"rendered":"
\"Keyboard<\/a>

Keyboard Based Cursor Canvas Content Copy Tutorial<\/p><\/div>\n

You may have noticed with yesterday’s Keyboard Based Cursor Share Content Copy Tutorial<\/a>, crucial to the sharing code, was the use of the incredible HTML5 introduced canvas<\/a> element, helped by that middleperson link to those public<\/i> email and SMS sharing conduits, overseeing the great random Lorem Picsum<\/a> background images and user created emoji and\/or text initial annotations.<\/p>\n

And this got us wondering whether there was a private<\/i> (ie. inhouse) web application of the past that could further value add as another optional middleperson tool for (user) personalization (of the content) purposes. And yes, do you remember the canvas work involved in the featured web application of Emoji Borders and Backgrounds Canvas Annotation Tutorial<\/a>?<\/p>\n

It uses an interesting approach with the transference of data across from a canvas in one application to the canvas in that user_of_signature_signature.htm<\/a> web application. Once our changed<\/a> body_mouse_deepdive.html<\/a>‘s “parent” web application<\/a> has organized its canvas contents, it’s just a matter of …<\/p>\n


\n var awo=null;
\n awo=window.open<\/a>('.\/user_of_signature_signature.htm','_blank','top=100,left=100,width=800,height=800');
\n<\/code><\/p>\n

for the “child” canvas annotator<\/a> to effectively “suck up” the canvas data into its canvas via …<\/p>\n


\nvar cancont='';
\nvar elemode=location.search.split('elemode=')[1] ? (location.search.split('elemode=')[1].split('&')[0]) : \"canvas\";
\n
\nif (('' + window.opener<\/a>).replace('null','') != '') {
\n var cans=window.opener.document.getElementsByTagName<\/a>(elemode);
\n if (cans.length > 0) {
\n if (elemode == 'img') {
\n cancont=cans[0].src;
\n } else {
\n cancont=cans[0].toDataURL<\/a>('image\/png');
\n }
\n if (cancontw < 0 && canconth < 0) {\n cancontw=cans[0].width; \n canconth=cans[0].height; \n }\n }\n}\n<\/code><\/p>\n

... possible because both \"parent\" and \"child\" exist on the same RJM Programming domain (web server).<\/p>\n

Once there, another woooooorrrrrlllddd of image manipulations, via canvas, can await the user, perhaps ready for ongoing sharing possibilities with that \"child\".<\/p>\n

\n

\n

Previous relevant Keyboard Based Cursor Share Content Copy Tutorial<\/a> is shown below.<\/p>\n

\"Keyboard<\/a>

Keyboard Based Cursor Share Content Copy Tutorial<\/p><\/div>\n

Yesterday's Keyboard Based Cursor Personalized Content Copy Tutorial<\/a> has probably reached a point where some sharing mechanism is apt, for accountability and usefulness purposes, at the very least, regarding our recent web application allowing for foreground content on top of a random Lorem Picsum<\/a> background image.<\/p>\n

We've been helped out greatly by javascript - Can I take a screenshot from the clipboard? - Stack Overflow<\/a> and html - How to render a blob on a canvas element? - Stack Overflow<\/a> in the following new relevant Javascript code ...<\/p>\n


\nfunction renderNoImage(canvas, blob) { \/\/ thanks to https:\/\/stackoverflow.com\/questions\/38004917\/how-to-render-a-blob-on-a-canvas-element
\n const ctx = canvas.getContext('2d');
\n const img = new Image();
\n img.onload = (event) => {
\n URL.revokeObjectURL(event.target.src) \/\/ This is important. If you are not using the blob, you should release it if you don't want to reuse it. It's good for memory.
\n ctx.drawImage(event.target, 0, 0)
\n img.style.display='none';
\n img.style.zIndex='-123';
\n };
\n img.src = URL.createObjectURL(blob);
\n}
\n

\nfunction renderImage(canvas, blob) { \/\/ thanks to https:\/\/stackoverflow.com\/questions\/38004917\/how-to-render-a-blob-on-a-canvas-element
\n const ctx = canvas.getContext('2d');
\n const img = new Image();
\n img.onload = (event) => {
\n URL.revokeObjectURL(event.target.src) \/\/ This is important. If you are not using the blob, you should release it if you don't want to reuse it. It's good for memory.
\n ctx.drawImage(event.target, 0, 0)
\n };
\n img.src = URL.createObjectURL(blob);
\n}
\n

\n addEventListener(\"paste\", ev => { \/\/ thanks to https:\/\/stackoverflow.com\/questions\/55559432\/can-i-take-a-screenshot-from-the-clipboard
\n for(const item of ev.clipboardData.items) { \/\/\/ Clipboard may contain multiple elements of different type -- text, image, etc
\n if(item.type.startsWith(\"image\/\")) { \/\/\/ We are only interested in clipboard data that is an image
\n if (emailee == '') {
\n emailee=prompt('Your clipboard has a useful image you could share the image with. Optionally, please enter an email address or SMS number to share with.');
\n if (emailee == null) { emailee=''; }
\n }
\n if (emailee.indexOf('@') != -1) {
\n document.getElementById('mydiv').style.overflow='scroll';
\n document.getElementById('mycanvas').innerHTML='<br><canvas style=\"position:absolute;z-index:98;top:0px;left:0px;\" id=thecanvas width=' + screen.width + ' height=' + screen.height + '><\/canvas>';
\n elem=document.getElementById('thecanvas');
\n context=elem.getContext('2d');
\n renderImage(elem, item.getAsFile()); \/\/context.drawImage(item.getAsFile(), 0, 0);
\n document.getElementById('aemail').href=document.getElementById('aemail').href.replace(':?', ':' + emailee + '?');
\n document.getElementById('aemail').click();
\n document.getElementById('mycanvas').innerHTML='';
\n } else if (emailee != '' && emailee.replace(\/0\/g,'').replace(\/1\/g,'').replace(\/2\/g,'').replace(\/3\/g,'').replace(\/4\/g,'').replace(\/5\/g,'').replace(\/6\/g,'').replace(\/7\/g,'').replace(\/8\/g,'').replace(\/9\/g,'') == '') {
\n document.getElementById('mydiv').style.overflow='scroll';
\n document.getElementById('mycanvas').innerHTML='<br><canvas style=\"position:absolute;z-index:98;top:0px;left:0px;\" id=thecanvas width=' + screen.width + ' height=' + screen.height + '><\/canvas>';
\n elem=document.getElementById('thecanvas');
\n context=elem.getContext('2d');
\n renderImage(elem, item.getAsFile()); \/\/context.drawImage(item.getAsFile(), 0, 0);
\n document.getElementById('asms').href=document.getElementById('asms').href.replace(':&', ':' + emailee + '&');
\n document.getElementById('asms').click();
\n document.getElementById('mycanvas').innerHTML='';
\n } else {
\n \/\/document.getElementById('mydiv').style.overflow='scroll';
\n document.getElementById('mycanvas').innerHTML='<br><canvas style=\"display:none;position:absolute;z-index:-98;top:0px;left:0px;\" id=thecanvas width=' + screen.width + ' height=' + screen.height + '><\/canvas>';
\n elem=document.getElementById('thecanvas');
\n context=elem.getContext('2d');
\n renderNoImage(elem, item.getAsFile()); \/\/context.drawImage(item.getAsFile(), 0, 0);
\n document.getElementById('mycanvas').innerHTML='';
\n }
\n }
\n }
\n});
\n<\/code> <\/p>\n

... which is explained to the user in the following way ...<\/p>\n

\nShare with email or SMS happens via screenshots (macOS control-command-shift-3 or Windows Prnt-Scrn) followed by File menu Paste option causing chance to share after which File menu Undo can remove pasted part as required.\n<\/p><\/blockquote>\n

... in the changed<\/a> \"proof of concept\" body_mouse_deepdive.html<\/a> live run<\/a>.<\/p>\n

\n

\n

Previous relevant Keyboard Based Cursor Personalized Content Copy Tutorial<\/a> is shown below.<\/p>\n

\"Keyboard<\/a>

Keyboard Based Cursor Personalized Content Copy Tutorial<\/p><\/div>\n

On top of yesterday's Keyboard Based Cursor Content Copy Tutorial<\/a> we wanted to offer the user the chance for them to tailor their foreground content on top of the Lorem Picsum<\/a> background image.<\/p>\n

The user can enter this via the keyboard because there is an HTML div contenteditable<\/a>=true pallette to work with ...<\/p>\n


\n<div id=mydiv onfocus='setTimeout(alte, 1000);' ondblclick=\"this.innerHTML='';\" onclick='stamp(event);' title='Click and type and see the cursor change as you use Alt or Shift or Control that can be reset via Caps Lock with a click copying cursor into content ... RJM Programming ... May, 2022 ... thanks to https:\/\/picsum.photos\/ Lorem Picsum You can change emojis if you know the \\002602 form of UTF-16 (hex) entry (our example is umbrella and if you express it as \\\\002602 that leaves cursor just as your emoji). <\/font>Double click existant foreground emoji element to clear all the foreground emoji elements.<\/font>' spellcheck='false' contenteditable=true style='width:100vw;height:100%;color:transparent;text-color:transparent;' onkeypress=kpcursorlook(event); <\/font>onkeydown=cursorlook(event); onmousemove=xycursorlook(event); ontouchmove=xycursorlook(event);><\/div>
\n<\/code><\/p>\n

It's \"title\" attribute now talks about two new pieces of functionality, those being ...<\/p>\n