{"id":63602,"date":"2024-05-14T03:01:24","date_gmt":"2024-05-13T17:01:24","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=63602"},"modified":"2024-05-14T14:57:36","modified_gmt":"2024-05-14T04:57:36","slug":"image-element-dynamic-css-canvas-context-filter-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/image-element-dynamic-css-canvas-context-filter-tutorial\/","title":{"rendered":"Image Element Dynamic CSS Canvas Context Filter Tutorial"},"content":{"rendered":"
\"Image<\/a>

Image Element Dynamic CSS Canvas Context Filter Tutorial<\/p><\/div>\n

Ask and ye shall discover, ‘guvn<\/sup>er<\/sub>. Ask …<\/p>\n


\nimage to canvas include css filters<\/a>
\n<\/code><\/p>\n

… which got us to the excellent …<\/p>\n


\nHow to save image from canvas with CSS filters<\/a>
\n<\/code><\/p>\n

… including the great canvas<\/a> advice …<\/p>\n

\n

There is a little known property<\/a> on the context object, conveniently named filter<\/code>.<\/p>\n

This can take a CSS filter as argument and apply it to the bitmap. However, this is not<\/em> part of the official standard and it only works in Firefox so there is the limitation.<\/del>. This has since this answer was originally written become a part of the official standard<\/a>.<\/p>\n

You can check for the existence of this property and use CSS filters if it does, or use a fallback to manually apply the filters to the image if not. The only advantage is really performance when available.<\/p>\n

CSS and DOM is a separate world from the bitmaps that are used for images and canvas. The bitmaps themselves are not affected by CSS, only the elements which acts as a looking-glass to the bitmap. The only way is to work with at pixel levels (when context<\/em>‘s filter property is not available).<\/p>\n

How to calculate the various filters can be found in the Filter Effects Module Level 1<\/a>. Also see SVG Filters<\/a> and Color Matrix<\/a>.<\/p>\n<\/blockquote>\n

. Who’d have known?! And … why didn’t people wake me up at 2:23am (me at my “clarifying” best)<\/font> to tell me? But we digress.<\/p>\n

Even so, though this new canvas involvement<\/font> thinking …<\/p>\n


\n document.getElementById('animg').onload=function(event){
\n var filt=document.getElementById('selopt').innerText;
\n if (document.getElementById('animg').outerHTML.indexOf(' style=\"') != -1) {
\n if (document.getElementById('animg').outerHTML.split(' style=\"')[1].split('\"')[0].indexOf('filter:') != -1) {
\n filt=document.getElementById('animg').outerHTML.split(' style=\"')[1].split('\"')[0].split('filter:')[1].split(';')[0].trim();
\n document.getElementById('dcanvas').innerHTML='<details id=dtlcanvas><summary id=sumcanvas>Canvas view below ...<\/summary><br><br><canvas id=mycanvas width=' + lastim.width + ' height=' + lastim.height + '><\/canvas><\/details>';
\n } else {
\n document.getElementById('dcanvas').innerHTML='<details id=dtlcanvas><summary id=sumcanvas>Canvas view below ...<\/summary><br><br><canvas style=\"' + document.getElementById('animg').outerHTML.split(' style=\"')[1].split('\"')[0] + '\" id=mycanvas width=' + lastim.width + ' height=' + lastim.height + '><\/canvas><\/details>';
\n }
\n } else {<\/font>
\n document.getElementById('dcanvas').innerHTML='<details id=dtlcanvas><summary id=sumcanvas>Canvas view below ...<\/summary><br><br><canvas id=mycanvas width=' + lastim.width + ' height=' + lastim.height + '><\/canvas><\/details>';
\n }<\/font>
\n lastca=document.getElementById('mycanvas');
\n lastcac=lastca.getContext('2d');
\n if (filt != '') { lastcac.filter=filt; }<\/font>
\n lastcac.drawImage(event.target, 0, 0);
\n lastim=document.getElementById('animg');
\n };
\n document.getElementById('animg').src=document.getElementById('animg').src;
\n<\/code><\/p>\n

… offers new context menu functionality, and so we are keen to include it, it has not changed our sharing hashtag powered logic.<\/p>\n

If at this stage you are forgetting the original issue … let me explain it from a new outlook …<\/p>\n