JSFiddle - React, Tailwind, and code Playground
HTML
<!-- random photo from google image search -->
<img id="myImg"...
JavaScript
$(window).load(function(){
$("input#myButton").click(function(){
$("#myImg").pixastic("desaturate",{average : false});
});
});
/*
ignore all of this.. it is just the minified version of pixastic
*/
/*
* Pixastic Lib - Core Functions - v0.1.3
* Copyright (c) 2008 Jacob Seidelin, jseidelin@nihilogic.dk, http://blog.nihilogic.dk/
* License: [http://www.pixastic.com/lib/license.txt]
*/
var Pixastic = (function() {
function addEvent(el, event, handler) {
if (el.addEventListener)
el.addEventListener(event, handler, false);
else if (el.attachEvent)
el.attachEvent("on" + event, handler);
}
function onready(handler) {
var handlerDone = false;
var execHandler = function() {
if (!handlerDone) {
handlerDone = true;
handler();
}
}
document.write("<"+"script defer src=\"//:\" id=\"__onload_ie_pixastic__\"></"+"script>");
var script = document.getElementById("__onload_ie_pixastic__");
script.onreadystatechange = function() {
if (script.readyState == "complete") {
script.parentNode.removeChild(script);
execHandler();
}
}
if (document.addEventListener)
document.addEventListener("DOMContentLoaded", execHandler, false);
addEvent(window, "load", execHandler);
}
function init() {
var imgEls = getElementsByClass("pixastic", null, "img");
var canvasEls = getElementsByClass("pixastic", null, "canvas");
var elements = imgEls.concat(canvasEls);
for (var i=0;i<elements.length;i++) {
(function() {
var el = elements[i];
var actions = [];
var classes = el.className.split(" ");
for (var c=0;c<classes.length;c++) {
var cls = classes[c];
if (cls.substring(0,9) ==...