{"id":45133,"date":"2019-06-02T03:01:18","date_gmt":"2019-06-01T17:01:18","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=45133"},"modified":"2019-06-01T20:43:44","modified_gmt":"2019-06-01T10:43:44","slug":"video-mask-via-canvas-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/video-mask-via-canvas-primer-tutorial\/","title":{"rendered":"Video Mask via Canvas Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/video_mask_via_canvas.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Video Mask via Canvas Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/video_mask_via_canvas.jpg\" title=Video Mask via Canvas Primer Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Video Mask via Canvas Primer Tutorial<\/p><\/div>\n<p>Thanks to <a target=_blank title='Manipulating Video using Canvas' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Canvas_API\/Manipulating_video_using_canvas'>Manipulating Video using Canvas<\/a> we have a &#8230;<\/p>\n<ul>\n<li>video &#8230; meets &#8230;<\/li>\n<li>canvas &#8230; may meet &#8230;<\/li>\n<li>image &#8230; or background colour &#8230; masking mechanism<\/li>\n<\/ul>\n<p> &#8230; today with a new web application (called <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/video_mask_via_canvas.html_GETME\" title=\"video_mask_via_canvas.html\">video_mask_via_canvas.html<\/a>) <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/video_mask_via_canvas.html\" title=\"Click picture\">live run<\/a> (supervising external Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/processor.js_GETME\" title=\"processor.js\">processor.js<\/a>) whereby a video is accompanied by a left canvas recreation of any one frame of the video as it plays and a right one subject to masking functionality <b style='background-color:rgb(146,117,101);'>as per<\/b> &#8230;<\/p>\n<p><code><br \/>\n    computeFrame: function() {<br \/>\n      this.ctx1.drawImage(this.video, 0, 0, this.width, this.height);<br \/>\n      let frame = this.ctx1.getImageData(0, 0, this.width, this.height);<br \/>\n          let l = frame.data.length \/ 4;<br \/>\n<br \/> <br \/>\n      for (let i = 0; i < l; i++) {\n        let r = frame.data[i * 4 + 0];\n        let g = frame.data[i * 4 + 1];\n        let b = frame.data[i * 4 + 2];\n        <b style='background-color:rgb(146,117,101);'>if ((Math.abs(r - 146) <= 43 &#038;&#038; Math.abs(g - 117) <= 43 &#038;&#038; Math.abs(b - 101) <= 43) || (1 == 6 &#038;&#038; r > 200)) { frame.data[i * 4 + 3] = 0; }<\/b><br \/>\n      }<br \/>\n      this.ctx2.putImageData(frame, 0, 0);<br \/>\n      return;<br \/>\n    }<br \/>\n  };<br \/>\n<\/code> <\/p>\n<p> &#8230; where we &#8220;masked&#8221; near to the rgb(146,117,101) dark brown (the rgb() details of which we gleaned via our MacBook Pro&#8217;s Digital Color Meter desktop application you can read more about at <a target=_blank title='click picture' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/digital-colour-meter-on-mac-laptop-tutorial'>Digital Colour Meter on Mac Laptop Tutorial<\/a>) that is near to our dog Luna&#8217;s liver coloured fur, as the star of the video.   The effect of the masking is a splash of colour around Luna as pixels of that type above near to that liver &#8220;dark brown&#8221; become transparent and let through what is in the background, whether that be that background colour selected by our HTML input type=color colour picker or our HTML input type=text element optionally asking for a relative image URL to use as the masking helper.<\/p>\n<p>We hope this is of interest to you.<\/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='#d45133' onclick='var dv=document.getElementById(\"d45133\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/canvas\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d45133' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Thanks to Manipulating Video using Canvas we have a &#8230; video &#8230; meets &#8230; canvas &#8230; may meet &#8230; image &#8230; or background colour &#8230; masking mechanism &#8230; today with a new web application (called video_mask_via_canvas.html) live run (supervising external &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/video-mask-via-canvas-primer-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,1,37],"tags":[2682,127,184,224,330,409,576,578,590,652,997,1302,1319,1369],"class_list":["post-45133","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-uncategorised","category-tutorials","tag-background-colour","tag-background-image","tag-canvas","tag-colour","tag-digital-colour-meter","tag-external-javascript","tag-html","tag-html5","tag-image","tag-javascript","tag-programming","tag-transparency","tag-tutorial","tag-video"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/45133"}],"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=45133"}],"version-history":[{"count":8,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/45133\/revisions"}],"predecessor-version":[{"id":45141,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/45133\/revisions\/45141"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=45133"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=45133"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=45133"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}