Skip to content

Instantly share code, notes, and snippets.

@najlepsiwebdesigner

najlepsiwebdesigner/html5-canvas-image-effects.js

Last active December 11, 2015 11:58
Show Gist options
  • Save najlepsiwebdesigner/4597595 to your computer and use it in GitHub Desktop.
Save najlepsiwebdesigner/4597595 to your computer and use it in GitHub Desktop.
Download ZIP
My project from subject Visual systems at Faculty of electrical engineering of Slovak technical university in Bratislava. http://www.fei.stuba.sk/english http://effects.peterbeno.com
Raw
html5-canvas-image-effects.js
// creates basic object structure, wraps routines together - can be compared to OOP class definition
var imageEffects = function () {}
imageEffects.prototype.loadImage = function (url, callback) {
var request = new XMLHttpRequest();
request.open('GET', url, true);
request.onreadystatechange = function () {
// Makes sure the document is ready to parse.
var result = false;
if (request.readyState == 4) {
// Makes sure it's found the file.
if (request.status == 200) {
var context = document.getElementById('myCanvas')
.getContext('2d');
var imageObj = new Image();
imageObj.onload = function () {
context.drawImage(this, 0, 0);
};
imageObj.src = request.responseText;
result = true;
}
if (request.status == 404) {
alert('ERROR 404: File not found!');
result = false;
}
}
try {
callback(result);
} catch (e) {}
};
request.send(null);
};
imageEffects.prototype._constructor = function (image, callback) {
this.loadImage(image, callback);
}
// ## ZADANIE VIZUALNE SYSTEMY ZACIATOK
// deklaracia obrazovych efektov - su zapuzdrene v objekte
var effects = {
// efekt histogram
histogram: function () {
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var imgd = context.getImageData(0, 0, 480, 640);
var pix = imgd.data;
var histogram = new Array();
var pixelCount = 480 * 640;
for (var i = 0, n = pix.length; i < n; i += 4) {
var grayscale = Math.round(pix[i] * .3 + pix[i + 1] * .59 + pix[i + 2] * .11);
if (histogram[grayscale] == undefined) {
histogram[grayscale] = 0;
}
histogram[grayscale]++;
}
console.log(histogram);
displayHistogram(histogram, pixelCount);
},
// efekt negativ
negative: function () {
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var imgd = context.getImageData(0, 0, 480, 640);
var pix = imgd.data;
for (var i = 0, n = pix.length; i < n; i += 4) {
pix[i] = 255 - pix[i]; // red
pix[i + 1] = 255 - pix[i + 1]; // green
pix[i + 2] = 255 - pix[i + 2]; // blue
}
context.putImageData(imgd, 0, 0);
},
// sum
noise: function () {
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var imgd = context.getImageData(0, 0, 480, 640);
var pix = imgd.data;
for (var i = 0, n = pix.length; i < n; i += 4) {
//var grayscale = pix[i] * .3 + pix[i + 1] * .59 + pix[i + 2] * .11;
if (Math.random() > 0.95) {
pix[i] = Math.random() * pix[i]; // red
pix[i + 1] = Math.random() * pix[i + 1]; // green
pix[i + 2] = Math.random() * pix[i + 2]; // blue
}
}
context.putImageData(imgd, 0, 0);
},
/* efekt median - bohuzial rata hodnoty len z dvoch susednych pixelov
* pouziva teda iba vektor |pixel|zapisovany pixel|pixel|, nie maticu 3x3
*/
median: function () {
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var imgd = context.getImageData(0, 0, 480, 640);
var pix = imgd.data;
limit = 640 * 480;
// prechadzam vsetky pixely - kazdy je definovany styrmi zlozkami
for (var i = 0, n = limit * 4; i < n; i += 4) {
// inicializacia vektorov, do ktorych sa budu ukladat hodnoty susednych pixelov
var vectorA = new Array(),
vectorR = new Array(),
vectorB = new Array(),
vectorG = new Array();
/* console.log('Hodnoty pixela su: ', pix[i],pix[i+1],pix[i+2],pix[i +3]) */
for (var j = i - 4, m = i + 8; j < m; j = j + 4) {
if (pix[j] != undefined) {
vectorR.push(pix[j]);
vectorG.push(pix[j + 1]);
vectorB.push(pix[j + 2]);
vectorA.push(pix[j + 3]);
}
}
/* console.log(' My sme teda vektory: ',vectorR,vectorG,vectorB,vectorA) */
vectorR = vectorR.sort(function (a, b) {
return a - b
});
vectorG = vectorG.sort(function (a, b) {
return a - b
});
vectorB = vectorB.sort(function (a, b) {
return a - b
});
vectorA = vectorA.sort(function (a, b) {
return a - b
});
/* console.log('Taketo by mali byt vektory po zoradeni: ',vectorR,vectorG,vectorB,vectorA) */
/* console.log('Taketo hodnoty bude mat novy pixel: ',vectorR[1],vectorG[1],vectorB[1],vectorA[1],"\n") */
// vlozime vypocitane median hodnoty do pixela
pix[i] = vectorR[Math.floor(vectorR.length / 2)]
pix[i + 1] = vectorG[Math.floor(vectorG.length / 2)]
pix[i + 2] = vectorB[Math.floor(vectorB.length / 2)]
pix[i + 3] = vectorA[Math.floor(vectorA.length / 2)]
// reset vektorov na konci cyklu
var vectorA = new Array(),
vectorR = new Array(),
vectorB = new Array(),
vectorG = new Array();
}
// zapisem obrazove data
context.putImageData(imgd, 0, 0);
},
// odtiene sedej efekt
greyScale: function () {
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var imgd = context.getImageData(0, 0, 480, 640);
var pix = imgd.data;
for (var i = 0, n = pix.length; i < n; i += 4) {
var grayscale = pix[i] * .3 + pix[i + 1] * .59 + pix[i + 2] * .11;
pix[i] = grayscale; // red
pix[i + 1] = grayscale; // green
pix[i + 2] = grayscale; // blue
}
context.putImageData(imgd, 0, 0);
},
// cierna & biela
blackAndWhite: function () {
var threshold = 97;
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var imgd = context.getImageData(0, 0, 480, 640);
var pix = imgd.data;
for (var i = 0, n = pix.length; i < n; i += 4) {
value = pix[i] * .3 + pix[i + 1] * .59 + pix[i + 2] * .11;
if (value < threshold) {
pixel = 0;
} else {
pixel = 255;
}
pix[i] = pixel; // red
pix[i + 1] = pixel; // green
pix[i + 2] = pixel; // blue
}
context.putImageData(imgd, 0, 0);
}
};
// refactor to class maybe
/* funckia histogram - funguje inak, ako standardny efekt, preto je osamostatnena.
* Este som ju nestihol zaclenit do objektoveho modelu, nema zatial vhodnych surodencov
*/
function displayHistogram(histogramData, pixelCount) {
var histogramDisplay = $('#histogram');
var collumnWidth = Math.round(histogramDisplay.width() / 256); // in pixels
var histogramHeight = histogramDisplay.height();
var max = 0;
for (k in histogramData) {
if (histogramData[k] > max) max = histogramData[k];
}
histogramHtml = new Array();
// ano, kazdy stlpcek histogramu je v skutocnosti HTML element
for (k in histogramData) {
histogramHtml.push('<div class="histogramCollumnContainer" style="width:' + collumnWidth + 'px;"><div class="histogramCollumn" style="height:' + ((histogramData[k] * 100) / (max)) + '%;background:rgb(' + k + ',' + k + ',' + k + ');width:' + collumnWidth + 'px;"></div></div>');
}
histogramHtml.push('<br style="clear:both;" />');
histogramDisplay.html('').html(histogramHtml);
$('#histogramModal').modal('show')
}
//## KONIEC POZADOVANEHO KODU ZADANIA Z VS, chyba laplasian filter a median rata len z vektora, nie z matice
// initialization part, here the fun begins!
$(function () {
// create new imageEffects instance
var imageEffect = new imageEffects;
// load default image
imageEffect.loadImage('image3.base64');
// gui bindings
$('.effects a:not(.disabled)')
.click(function (e) {
effect = $(this)
.attr('data-effect');
var funct = effects[effect]();
e.preventDefault();
});
$('#imagefile')
.change(function () {
if ($(this)
.find('option:selected')
.html()) {
imageEffect.loadImage($(this)
.find('option:selected')
.html());
}
});
$('#loadImageButton')
.click(function () {
var url = prompt("Zadaj URL obrazka");
if (url !== null) {
imageEffect.loadImage(url, function (result) {
if (result) {
$('#imagefile option')
.map(function () {
if ($(this)
.html() == url) {
$(this)
.remove();
}
});
$('#imagefile')
.append(['<option>', url, '</option>'].join(''));
$('#imagefile')
.children()
.each(function (i, child) {
$('#imagefile')
.prepend(child)
})
}
});
}
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment