2 * Pixastic Lib - Core Functions - v0.1.1
3 * Copyright (c) 2008 Jacob Seidelin, cupboy@gmail.com, http://blog.nihilogic.dk/
4 * MIT License [http://www.opensource.org/licenses/mit-license.php]
7 var Pixastic = (function() {
11 function addEvent(el, event, handler) {
12 if (el.addEventListener)
13 el.addEventListener(event, handler, false);
14 else if (el.attachEvent)
15 el.attachEvent("on" + event, handler);
18 function onready(handler) {
19 var handlerDone = false;
20 var execHandler = function() {
26 document.write("<"+"script defer src=\"//:\" id=\"__onload_ie_sumbox__\"></"+"script>");
27 var script = document.getElementById("__onload_ie_sumbox__");
28 script.onreadystatechange = function() {
29 if (script.readyState == "complete") {
30 script.parentNode.removeChild(script);
34 if (document.addEventListener)
35 document.addEventListener("DOMContentLoaded", execHandler, false);
36 addEvent(window, "load", execHandler);
41 if (!Pixastic.parseOnLoad) return;
42 var imgEls = getElementsByClass("pixastic", null, "img");
43 var canvasEls = getElementsByClass("pixastic", null, "canvas");
44 var elements = imgEls.concat(canvasEls);
45 for (var i=0;i<elements.length;i++) {
50 var classes = el.className.split(" ");
51 for (var c=0;c<classes.length;c++) {
53 if (cls.substring(0,9) == "pixastic-") {
54 var actionName = cls.substring(9);
56 actions.push(actionName);
60 if (el.tagName == "IMG") {
61 var dataImg = new Image();
63 if (dataImg.complete) {
64 for (var a=0;a<actions.length;a++) {
65 var res = Pixastic.applyAction(el, el, actions[a], null);
70 dataImg.onload = function() {
71 for (var a=0;a<actions.length;a++) {
72 var res = Pixastic.applyAction(el, el, actions[a], null)
79 setTimeout(function() {
80 for (var a=0;a<actions.length;a++) {
81 var res = Pixastic.applyAction(
82 el, el, actions[a], null
98 // getElementsByClass by Dustin Diaz, http://www.dustindiaz.com/getelementsbyclass/
99 function getElementsByClass(searchClass,node,tag) {
100 var classElements = new Array();
106 var els = node.getElementsByTagName(tag);
107 var elsLen = els.length;
108 var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
109 for (i = 0, j = 0; i < elsLen; i++) {
110 if ( pattern.test(els[i].className) ) {
111 classElements[j] = els[i];
115 return classElements;
120 function writeDebug(text, level) {
121 if (!Pixastic.debug) return;
126 console.warn("Pixastic:", text);
129 console.error("Pixastic:", text);
132 console.log("Pixastic:", text);
148 applyAction : function(img, dataImg, actionName, options) {
150 options = options || {};
152 var imageIsCanvas = (img.tagName == "CANVAS");
153 if (imageIsCanvas && Pixastic.Client.isIE()) {
154 if (Pixastic.debug) writeDebug("Tried to process a canvas element but browser is IE.");
159 if (Pixastic.Client.hasCanvas()) {
160 canvas = document.createElement("canvas");
161 ctx = canvas.getContext("2d");
164 var w = parseInt(img.offsetWidth);
165 var h = parseInt(img.offsetHeight);
167 if (actionName.indexOf("(") > -1) {
168 var tmp = actionName;
169 actionName = tmp.substr(0, tmp.indexOf("("));
170 var arg = tmp.match(/\((.*?)\)/);
172 arg = arg[1].split(";");
173 for (var a=0;a<arg.length;a++) {
174 thisArg = arg[a].split("=");
175 if (thisArg.length == 2) {
176 if (thisArg[0] == "rect") {
177 var rectVal = thisArg[1].split(",");
178 options[thisArg[0]] = {
179 left : parseInt(rectVal[0],10)||0,
180 top : parseInt(rectVal[1],10)||0,
181 width : parseInt(rectVal[2],10)||0,
182 height : parseInt(rectVal[3],10)||0
185 options[thisArg[0]] = thisArg[1];
194 left : 0, top : 0, width : w, height : h
197 var validAction = false;
198 if (Pixastic.Actions[actionName] && typeof Pixastic.Actions[actionName].process == "function") {
202 if (Pixastic.debug) writeDebug("Invalid action \"" + actionName + "\". Maybe file not included?");
205 if (!Pixastic.Actions[actionName].checkSupport()) {
206 if (Pixastic.debug) writeDebug("Action \"" + actionName + "\" not supported by this browser.");
210 if (Pixastic.Client.hasCanvas()) {
213 canvas.style.width = w+"px";
214 canvas.style.height = h+"px";
215 ctx.drawImage(dataImg,0,0,w,h);
227 var res = Pixastic.Actions[actionName].process(params);
233 if (Pixastic.Client.hasCanvas()) {
234 if (params.useData) {
235 if (Pixastic.Client.hasCanvasImageData()) {
236 canvas.getContext("2d").putImageData(params.canvasData, options.rect.left, options.rect.top);
237 // Opera doesn't seem to update the canvas until we draw something on it, lets draw a 0x0 rectangle.
238 canvas.getContext("2d").fillRect(0,0,0,0);
241 // copy properties and stuff from the source image
242 canvas.title = img.title;
243 canvas.imgsrc = img.imgsrc;
244 if (!imageIsCanvas) canvas.alt = img.alt;
245 if (!imageIsCanvas) canvas.imgsrc = img.src;
246 canvas.className = img.className;
247 if (img.getAttribute("style"))
248 canvas.setAttribute("style", img.getAttribute("style"));
249 canvas.cssText = img.cssText;
250 canvas.name = img.name;
251 canvas.tabIndex = img.tabIndex;
254 if (img.parentNode && img.parentNode.replaceChild) {
255 img.parentNode.replaceChild(canvas, img);
264 prepareData : function(params, getCopy) {
265 var ctx = params.canvas.getContext("2d");
266 var rect = params.options.rect;
267 var dataDesc = ctx.getImageData(rect.left, rect.top, rect.width, rect.height);
268 var data = dataDesc.data;
269 if (!getCopy) params.canvasData = dataDesc;
273 // load the image file
274 process : function(img, actionName, options, callback)
276 if (img.tagName == "IMG") {
277 var dataImg = new Image();
278 dataImg.src = img.src;
279 if (dataImg.complete) {
280 var res = Pixastic.applyAction(img, dataImg, actionName, options);
281 if (callback) callback(res);
284 dataImg.onload = function() {
285 var res = Pixastic.applyAction(img, dataImg, actionName, options)
286 if (callback) callback(res);
290 if (img.tagName == "CANVAS") {
291 var res = Pixastic.applyAction(img, img, actionName, options);
292 if (callback) callback(res);
298 hasCanvas : (function() {
299 var c = document.createElement("canvas");
302 val = !!((typeof c.getContext == "function") && c.getContext("2d"));
309 hasCanvasImageData : (function() {
310 var c = document.createElement("canvas");
314 if (typeof c.getContext == "function" && (ctx = c.getContext("2d"))) {
315 val = (typeof ctx.getImageData == "function");
324 return !!document.all && !!window.attachEvent && !window.opera;