{"id":45184,"date":"2019-06-07T03:01:08","date_gmt":"2019-06-06T17:01:08","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=45184"},"modified":"2019-06-06T21:36:13","modified_gmt":"2019-06-06T11:36:13","slug":"video-via-image-filter-and-canvas-magnifier-mobile-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/video-via-image-filter-and-canvas-magnifier-mobile-tutorial\/","title":{"rendered":"Video via Image Filter and Canvas Magnifier Mobile 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 via Image Filter and Canvas Magnifier Mobile Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/videomaskvia_canvas_mobile.jpg\" title=\"Video via Image Filter and Canvas Magnifier Mobile Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Video via Image Filter and Canvas Magnifier Mobile Tutorial<\/p><\/div>\n<p>We hadn&#8217;t tested the work of yesterday&#8217;s <a title='Video via Image Filter and Canvas Magnifier Tutorial' href='#vifcmt'>Video via Image Filter and Canvas Magnifier Tutorial<\/a> on mobile platforms, and because it is so mouse event sensitive, yes, there are quite a few issues.<\/p>\n<p>Also, on an iPad, the issues were not as severe as on an iPhone, that smaller screen size causing unique issues, such as the floating extra window video play we have to think about further.<\/p>\n<p>One we did not expect with iOS Safari was the preference that platform has for <i>[element].addEventListener(&#8216;change&#8217;,[functionCode])<\/i> rather than <i>[element].onchange=[functionCode]<\/i> as we read about at <a target=_blank title='Useful link, thanks' href='https:\/\/stackoverflow.com\/questions\/47664777\/javascript-file-input-onchange-not-working-ios-safari-only'>this useful link<\/a>, thanks.  With iOS generally, it is often a good idea with logic that involves media operations to involve a button click to set off proceedings.  Whether this can be a programmatical click is debatable on occasions, and can remember this programmatical approach not working for the playing of audio without real user button pressing.<\/p>\n<p>For some reason we could not get the &#8220;overlay&#8221; tactics of yesterday involving &#8220;position:absolute;left:[asCalculatedLeftForLHCanvas];top:[asCalculatedTopForLHCanvas];&#8221; and &#8220;z-index:[bigZ]&#8221; to work for iOS Safari, and so settled for an HTML img displayed nearby.<\/p>\n<p>So, we have <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/video_mask_via_canvas.html----GETME\" title=\"video_mask_via_canvas.html\">the changed<\/a> <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> that has this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/video_mask_via_canvas.html\" title=\"Click picture\">live run<\/a> link for you to try on mobile or non-mobile today, and which supervises <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/processor.js---GETME\" title=\"processor.js\">the changed external Javascript<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/processor.js---GETME\" title=\"processor.js\">processor.js<\/a> script.<\/p>\n<hr>\n<p id='vifcmt'>Previous relevant <a target=_blank title='Video via Image Filter and Canvas Magnifier Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/video-via-image-filter-and-canvas-magnifier-tutorial\/'>Video via Image Filter and Canvas Magnifier Tutorial<\/a> is shown below.<\/p>\n<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 via Image Filter and Canvas Magnifier Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/videomaskvia_canvas.jpg\" title=\"Video via Image Filter and Canvas Magnifier Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Video via Image Filter and Canvas Magnifier Tutorial<\/p><\/div>\n<p>When thinking of the HTML img element&#8217;s relationship with the HTML5 canvas element there are loads of importing and exporting possibilities between them, but one that just has to live in the img world alone are &#8230;<\/p>\n<ul>\n<li>CSS <a target=_blank title='CSS filter property information from w3schools' href='https:\/\/www.w3schools.com\/cssref\/css3_pr_filter.asp'>filter<\/a>s do not transfer to a canvas when using the [canvasContext].<a target=_blank title='HTML canvas element drawImage() method information from w3schools' href='http:\/\/www.w3schools.com\/tags\/canvas_drawimage.asp'>drawImage<\/a>() method &#8230; but one that works is &#8230;<\/li>\n<li>magnifier can work with the onmousemove (or mobile ontouchmove) event of the left canvas and manipulate an image and &#8220;project&#8221; it into the right hand canvas &#8230; a method you often see on fashion eCommerce websites, and which we got great help about with <a target=_blank title='Great link, thanks' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Canvas_API\/Tutorial\/Pixel_manipulation_with_canvas'>this great link<\/a>, thanks<\/li>\n<\/ul>\n<p>But those CSS <a target=_blank title='CSS filter property information from w3schools' href='https:\/\/www.w3schools.com\/cssref\/css3_pr_filter.asp'>filter<\/a>s &#8230;<\/p>\n<p><code><br \/>\n&lt;style&gt;<br \/>\n      img.sepia {<br \/>\n        -webkit-filter: sepia(1);<br \/>\n        filter: sepia(1);<br \/>\n      }<br \/>\n<br \/>\n      img.saturate {<br \/>\n        -webkit-filter: saturate(8);<br \/>\n        filter: saturate(8);<br \/>\n      }<br \/>\n<br \/> <br \/>\n      img.hue-rotate {<br \/>\n        -webkit-filter: hue-rotate(90deg);<br \/>\n        filter: hue-rotate(90deg);<br \/>\n      }<br \/>\n<br \/> <br \/>\n      img.opacity {<br \/>\n        -webkit-filter: opacity(.2);<br \/>\n        filter: opacity(.2);<br \/>\n      }<br \/>\n<br \/> <br \/>\n      img.brightness {<br \/>\n        -webkit-filter: brightness(3);<br \/>\n        filter: brightness(3);<br \/>\n      }<br \/>\n<br \/> <br \/>\n      img.contrast {<br \/>\n        -webkit-filter: contrast(4);<br \/>\n        filter: contrast(4);<br \/>\n      }<br \/>\n<br \/> <br \/>\n      img.blur {<br \/>\n        -webkit-filter: blur(5px);<br \/>\n        filter: blur(5px);<br \/>\n      }<br \/>\n<br \/> <br \/>\n      img.drop-shadow {<br \/>\n        -webkit-filter: drop-shadow(16px 16px 10px rgba(0,0,0,0.9));<br \/>\n        filter: drop-shadow(16px 16px 10px rgba(0,0,0,0.9));<br \/>\n      }<br \/>\n&lt;\/style&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; inspired by <a target=_blank title='Wonderful link, thanks' href='https:\/\/css-tricks.com\/almanac\/properties\/f\/filter\/'>this wonderful link<\/a>, thanks &#8230; should not be rejected on that count (as above).  We have (two of our usual) CSS &#8220;overlay&#8221; (suspect) friends that can come to our rescue, those being &#8230;<\/p>\n<ul>\n<li><a target=_blank title='CSS position:absolute information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_class_position.asp'>position:absolute<\/a> property (the left and top and width and height calculations helped out via the [rightHandCanvasElement].<a target=_blank title='Javascript getBoundingClientRect method information from Mozilla' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/getBoundingClientRect'>getBoundingClientRect<\/a>()  method)<\/li>\n<li><a target=_blank title='CSS z-index information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_pos_z-index.asp'>z-index<\/a><\/li>\n<\/ul>\n<p> &#8230; arranging the HTML img element float above the right hand canvas (or below it) depending on the option chosen in today&#8217;s much busier dropdown &#8220;mode of use&#8221; menu in our &#8220;Video\/Canvas\/Image Manipulations Web Application&#8221;.<\/p>\n<p>So, adding onto the progress to yesterday&#8217;s <a title='Video via Canvas File API Tutorial' href='#vcfapit'>Video via Canvas File API Tutorial<\/a> we have <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/video_mask_via_canvas.html---GETME\" title=\"video_mask_via_canvas.html\">the changed<\/a> <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> that has this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/video_mask_via_canvas.html\" title=\"Click picture\">live run<\/a> link for you to try, and which supervises <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/processor.js--GETME\" title=\"processor.js\">the changed external Javascript<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/processor.js--GETME\" title=\"processor.js\">processor.js<\/a> script.<\/p>\n<hr>\n<p id='vcfapit'>Previous relevant <a target=_blank title='Video via Canvas File API Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/video-via-canvas-file-api-tutorial\/'>Video via Canvas File API Tutorial<\/a> is shown below.<\/p>\n<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 via Canvas File API Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/videomask_via_canvas.jpg\" title=\"Video via Canvas File API Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Video via Canvas File API Tutorial<\/p><\/div>\n<p>Yes, some of you probably guessed correctly, regarding where we&#8217;d go after yesterday&#8217;s <a title='Video Pixel Manipulation via Canvas Tutorial' href='#vpmct'>Video Pixel Manipulation via Canvas Tutorial<\/a>.  As a background to this, we see for web applications, two primary source &#8220;partitions&#8221;, those being &#8230;<\/p>\n<ul>\n<li>around the &#8220;net&#8221; (in the <i>server<\/i> wooooooorrrrrlllllld, in the public areas of the Internet, which are not in &#8220;the dark web&#8221;, that is) via an absolute URL (to the same domain or beyond) and\/or relative URL (in relation to the URL &#8220;home&#8221; place on the web server of the same domain as where you launched it &#8230; which we catered for yesterday, though quietly we&#8217;d have allowed absolute URLs too, it&#8217;s just that cross-domain restrictions make us shy about publicizing that) &#8230; versus &#8230;<\/li>\n<li>on the <i>client<\/i> computer (or device)<\/li>\n<\/ul>\n<p> &#8230; and, yes, for all those who guessed we&#8217;d try to cater for image and\/or video data coming from this <i>client<\/i> source, you are correct, and will probably win a cupie doll at some stage in your life, maybe even into the future, and we&#8217;d like to take some responsibility for the positive thoughts we sent your way in your future endeavours in this regard, and would like to have it be noted that when you said &#8220;you don&#8217;t give me anything&#8221; we say &#8220;don&#8217;t say we don&#8217;t give you anything&#8221;.<\/p>\n<p>Where best to read about the <a target=_blank title='Great link' href='http:\/\/www.html5rocks.com\/en\/tutorials\/file\/dndfiles\/'>File API<\/a> (that came in with HTML5) that helps out so much here?  We really like, and think, <a target=_blank title='Great link' href='http:\/\/www.html5rocks.com\/en\/tutorials\/file\/dndfiles\/'>HTML5 Rocks<\/a>!  While you&#8217;re in the mood here, stay on the same domain, and read how we incorporate the &#8220;capture&#8221; attribute with the input type=file video and image browse buttons, so that for a lot of mobile devices and platforms you can capture you&#8217;re own media and &#8220;File API&#8221; it into place rather than looking about the device or computer hard disk, as you can read about at HTML5 Rock&#8217;s <a target=_blank title='Capturing Audio &#038; Video in HTML5' href='https:\/\/www.html5rocks.com\/en\/tutorials\/getusermedia\/intro\/'>Capturing Audio &#038; Video in HTML5<\/a>.<\/p>\n<p>What else have we included today into the mix?  That&#8217;s right, we nest the video element into an HTML div in order to be able to perhaps scroll around.   We give mechanisms to offset the video and background image masker.  We give a resizing mechanism to the video.<\/p>\n<p>If these features interest you, take a look at <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/video_mask_via_canvas.html--GETME\" title=\"video_mask_via_canvas.html\">the changed<\/a> <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> that has this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/video_mask_via_canvas.html\" title=\"Click picture\">live run<\/a> link for you to try, and which supervises the unchanged external Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/processor.js-GETME\" title=\"processor.js\">processor.js<\/a>.<\/p>\n<hr>\n<p id='vpmct'>Previous relevant <a target=_blank title='Video Pixel Manipulation via Canvas Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/video-pixel-manipulation-via-canvas-tutorial\/'>Video Pixel Manipulation via Canvas Tutorial<\/a> is shown below.<\/p>\n<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 Pixel Manipulation via Canvas Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/videomaskviacanvas.jpg\" title=Video Pixel Manipulation via Canvas Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Video Pixel Manipulation via Canvas Tutorial<\/p><\/div>\n<p>The recent <a title='Video Mask via Canvas Primer Tutorial' href='#vmcpt'>Video Mask via Canvas Primer Tutorial<\/a> got us started on a dynamic video manipulation tool that we see as &#8230;<\/p>\n<ul>\n<li>&#8220;see through&#8221; or masking functionality &#8230; and onto that today, we&#8217;d like to add two more pixel manipulation ideas, those being &#8230;<\/li>\n<li>grayscale &#8230; and &#8230;<\/li>\n<li>colour inversion<\/li>\n<\/ul>\n<p> &#8230; so that aforesaid mentioned Javascript function <b>becomes<\/b> &#8230;<\/p>\n<p><code><br \/>\n    computeFrame: function() {<br \/>\n      var imr=146;<br \/>\n      var img=117;<br \/>\n      var imb=101;<br \/>\n      <b>var mode=0; \/\/ see through<br \/>\n      var bright=0;<\/b><br \/>\n      if (document.getElementById('mr')) {<br \/>\n      if (document.getElementById('mr').value != '') {<br \/>\n      imr=eval('' + document.getElementById('mr').value);<br \/>\n      }<br \/>\n      }<br \/>\n      if (document.getElementById('mg')) {<br \/>\n      if (document.getElementById('mg').value != '') {<br \/>\n      img=eval('' + document.getElementById('mg').value);<br \/>\n      }<br \/>\n      }<br \/>\n      if (document.getElementById('mb')) {<br \/>\n      if (document.getElementById('mb').value != '') {<br \/>\n      imb=eval('' + document.getElementById('mb').value);<br \/>\n      }<br \/>\n      }<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      <b>if (document.getElementById('mode')) {<br \/>\n          mode=eval('' + document.getElementById('mode').value);<br \/>\n          if (mode == 1) {  \/\/ going grey<br \/>\n      for (let i = 0; i &lt; l; i++) {<br \/>\n        bright = 0.34 * frame.data[i * 4 + 0] + 0.5 * frame.data[i * 4 + 1] + 0.16 * frame.data[i * 4 + 2];<br \/>\n        frame.data[i * 4 + 0]=bright;<br \/>\n        frame.data[i * 4 + 1]=bright;<br \/>\n        frame.data[i * 4 + 2]=bright;<br \/>\n      }<br \/>\n          } else if (mode == 2) { \/\/ invert colours<br \/>\n      for (let i = 0; i &lt; l; i++) {<br \/>\n        frame.data[i * 4 + 0]=255 - frame.data[i * 4 + 0];<br \/>\n        frame.data[i * 4 + 1]=255 - frame.data[i * 4 + 1];<br \/>\n        frame.data[i * 4 + 2]=255 - frame.data[i * 4 + 2];<br \/>\n      }<br \/>\n          }<br \/>\n      }   <\/b><br \/>\n<br \/> <br \/>\n      <b>if (mode == 0) {<\/b><br \/>\n      for (let i = 0; i &lt; l; i++) {<br \/>\n        let r = frame.data[i * 4 + 0];<br \/>\n        let g = frame.data[i * 4 + 1];<br \/>\n        let b = frame.data[i * 4 + 2];<br \/>\n        if ((Math.abs(r - imr) &lt;= 43 && Math.abs(g - img) &lt;= 43 && Math.abs(b - imb) &lt;= 43) || (1 == 6 && r &gt; 200)) { frame.data[i * 4 + 3] = 0; }<br \/>\n      }<br \/>\n      <b>}<\/b><br \/>\n      this.ctx2.putImageData(frame, 0, 0);<br \/>\n      return;<br \/>\n    }<br \/>\n  };<br \/>\n<\/code> <\/p>\n<p>As well, we see the video itself as a parameterizable concept of the web application (as part of our continuing &#8220;genericization drive&#8221;) and offer logics to handle a user entered relative URL as far as that goes.  Perhaps here, though, you can imagine where we&#8217;ll go with this on the next occasion.<\/p>\n<p> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/video_mask_via_canvas.html-GETME\" title=\"video_mask_via_canvas.html\">The changed<\/a> <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> has this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/video_mask_via_canvas.html\" title=\"Click picture\">live run<\/a> link for you to try, and which supervises <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/processor.js-GETME\" title=\"processor.js\">the changed external Javascript<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/processor.js-GETME\" title=\"processor.js\">processor.js<\/a>).<\/p>\n<hr>\n<p id='vmcpt'>Previous relevant <a target=_blank title='Video Mask via Canvas Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/video-mask-via-canvas-primer-tutorial\/'>Video Mask via Canvas Primer Tutorial<\/a> is shown below.<\/p>\n<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<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='#d45152' onclick='var dv=document.getElementById(\"d45152\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/pixel\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d45152' 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='#d45157' onclick='var dv=document.getElementById(\"d45157\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/div\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d45157' 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='#d45174' onclick='var dv=document.getElementById(\"d45174\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/magnifier\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d45174' 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='#d45184' onclick='var dv=document.getElementById(\"d45184\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/ios\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d45184' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We hadn&#8217;t tested the work of yesterday&#8217;s Video via Image Filter and Canvas Magnifier Tutorial on mobile platforms, and because it is so mouse event sensitive, yes, there are quite a few issues. Also, on an iPad, the issues were &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/video-via-image-filter-and-canvas-magnifier-mobile-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,20,37],"tags":[2978,2682,127,1993,184,2150,224,281,330,342,409,419,431,2208,2440,576,578,590,2685,626,652,2562,760,2521,894,1918,1988,997,1059,1083,1917,1302,1319,1369,1496],"class_list":["post-45184","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-ios","category-tutorials","tag-addeventlistener","tag-background-colour","tag-background-image","tag-browse","tag-canvas","tag-capture","tag-colour","tag-css","tag-digital-colour-meter","tag-div","tag-external-javascript","tag-file-api","tag-filter","tag-getboundingclientrect","tag-grayscale","tag-html","tag-html5","tag-image","tag-invert","tag-ios","tag-javascript","tag-magnifier","tag-media","tag-nest","tag-overlay","tag-pixel","tag-position","tag-programming","tag-resize","tag-safari","tag-scroll","tag-transparency","tag-tutorial","tag-video","tag-z-index"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/45184"}],"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=45184"}],"version-history":[{"count":4,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/45184\/revisions"}],"predecessor-version":[{"id":45188,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/45184\/revisions\/45188"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=45184"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=45184"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=45184"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}