Javascript use canvas for grayscale

grayscale.htm HTML (2,38 kByte) 07.04.2021 19:53
<!DOCTYPE html >
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Convert Image to Grayscale</title>
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data: " />
    <script type="text/javascript">
      /* <![CDATA[ */
function getElementsByClassName(searchClass, tagName, domNode) {
  if (domNode == null) domNode = document;
  if (tagName == null) tagName = '*';
  var el = new Array();
  var tags = domNode.getElementsByTagName(tagName);
  var tcl = " "+searchClass+" ";
  for(var i=0,j=0; i<tags.length; i++) {
    var test = " " + tags[i].className + " ";
    if (test.indexOf(tcl) != -1) {
      el[j++] = tags[i];
    }
  };
  return el;
}

function grayscaleImageIE(imgObj) {
  imgObj.style.filter = "progid:DXImageTransform.Microsoft.BasicImage(grayScale=1)";
}

function grayscaleImage(imgobj) {
  var canvas = document.createElement("canvas");
  var canvascontext = canvas.getContext("2d");
  var imgw = imgobj.width;
  var imgh = imgobj.height;
  canvas.width = imgw;
  canvas.height = imgh;
  canvascontext.drawImage(imgobj, 0, 0);
  var imgpixels = canvascontext.getImageData(0, 0, imgw, imgh);
  for (var y = 0; y < imgpixels.height; y++) {
    for (var x = 0; x < imgpixels.width; x++) {
      var i = (y * 4) * imgpixels.width + x * 4;
      var avg = (imgpixels.data[i] + imgpixels.data[i + 1] + imgpixels.data[i + 2]) / 3;
      imgpixels.data[i] = avg;
      imgpixels.data[i + 1] = avg;
      imgpixels.data[i + 2] = avg;
    }
  }
  canvascontext.putImageData(imgpixels, 0, 0, 0, 0, imgpixels.width, imgpixels.height);
  imgobj.src = canvas.toDataURL();
}

function isOldIE () {
  var div = document.createElement("div");
  div.innerHTML = "<!--[if lt IE 9]><i></i><![endif]-->";
  return (div.getElementsByTagName("i").length == 1);
}

function init() {
  var grayList = getElementsByClassName("grayscale", "img");
  for (var i=0; i<grayList.length; i++) {
    var imgObj = grayList[i];
    if (isOldIE()){
      grayscaleImageIE(imgObj);
    } else {
      grayscaleImage(imgObj);
    }
  }
}

function ready(f){/complete|loaded/i.test(document.readyState)?f():setTimeout("ready("+f+")",9)}
ready(init);
/* ]]> */
    </script>
  </head>
  <body><img class="grayscale" src="/media/2007/Sammy/DSC02303~300x225.JPG" /><img class="grayscale" src="/media/2007/Sammy/DSC02833~300x225.JPG" /></body>
</html>

Author: , published: , last modified:

Kontakt

Udo Schmal

Udo Schmal
Softwareentwickler
Olvengraben 41
47608 Geldern
Nordrhein-Westfalen
Germany





+49 2831 9776557
+49 1575 0663676
+49 2831 1328709
SMS
WhatsApp

Instagram Profile
vCard 3.0

Service Infos

CMS Info Product Name:
UDOs Webserver
Version:
0.5.0.68
Description:
All in one Webserver
Copyright:
Udo Schmal
Compilation:
Tue, 4. May 2021 23:15:05
Development Info Compiler:
Free Pascal FPC 3.3.1
compiled for:
OS:Linux, CPU:x86_64
System Info OS:
Ubuntu 20.04.2 LTS (Focal Fossa)
Hardware Info Model:
Hewlett-Packard HP Pavilion dv7 Notebook PC
CPU Name:
Intel(R) Core(TM) i5-2450M CPU @ 2.50GHz
CPU Type:
x86_64, 1 physical CPU(s), 2 Core(s), 4 logical CPU(s), 1607.994 MHz