|
</lang>
=={{header|JavaScript}}==
HTML 5
Live Demo: http://jsfiddle.net/J4zVy/embedded/result/.
Demonstration: https://repl.it/repls/NiceFaroffRockrat
<lang JavaScript>
To load local files into the canvas you have to run a local webserver. See: http://stackoverflow.com/questions/3276072/canvas-getimagedata-uncaught-error-security-err-dom-exception-18.
function toGray(img) {
let var ccnv = document. createElementgetElementById("canvas"); ▼
<lang JavaScript><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
let ctx = cnv.getContext('2d');
"http://www.w3.org/TR/html4/strict.dtd">
let imgW = img.width;
<html><head><script type="text/javascript">
let imgH = img.height;
window.addEventListener(
cnv.width = imgW;
"load", function(){
cnv.height = imgH;
var img = new Image();
// ***********************************************************
ctx.drawImage(img, 0, 0);
// RUN LOCAL WEBSERVER TO LOAD LOCAL FILES: e.g. python -m http.server (python3)
let var imgDatapixels = can1.ctx.getImageData(0, 0, can1.wimgW, can1.himgH); ▼
// ***********************************************************
for (let y = 0; y < pixels.height; y ++) {
// img.src = prompt("enter image path","http://localhost:8000/test.jpg");
for (let x = img0; x < pixels.srcwidth; =x ++) {
let i = (y * 4) * pixels.width + x * 4;
'data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub/\
let avg = imgData(pixels.data[i] *rwgt + imgDatapixels.data[i + 1] *gwgt + imgDatapixels.data[i + 2] *bwgt) / 3; ▼
/ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcpp\
V0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7';
imgpixels.onloaddata[i] = function(){ avg;
imgDatapixels.data[i + 1] = avg; // red▼
var can1 = new CustomCanvas("color", img.width, img.height);
imgDatapixels.data[i + 1 2] = avg; // green▼
var can2 = new CustomCanvas("grayscale", img.width, img.height);
}
can1.ctx.drawImage(img,0, 0, img.width, img.height);
}
▲ var imgData = can1.ctx.getImageData(0, 0, can1.w, can1.h);
ctx.putImageData(pixels, 0, 0, 0, 0, pixels.width, pixels.height);
// desaturate
return cnv.toDataURL();
var avg; var max; var rwgt=0.2126; var gwgt=0.7152; var bwgt=0.0722;
}
for(var i = 0, max = can1.w*can1.h*4; i < max; i=i+4){
▲ avg = imgData.data[i]*rwgt + imgData.data[i+1]*gwgt + imgData.data[i+2]*bwgt;
▲ imgData.data[i ] = avg; // red
▲ imgData.data[i+1] = avg; // green
imgData.data[i+2] = avg;} // blue, alpha=alpha
can2.ctx.putImageData(imgData, 0, 0);
}, false);
function CustomCanvas(id, w, h, s) { /* Custom Canvas Object */
▲ var c = document.createElement("canvas");
c.setAttribute('id', id); c.setAttribute('width', w);
c.setAttribute('height', h); (s)?c.setAttribute('style', s):0;
document.body.appendChild(c, document.body.firstChild);
this.ctx = document.getElementById(id).getContext("2d");
this.w = w; this.h = h;}
</script></head><body></body></html>
</lang>
|