init

demos/png/ox.png.js

@@ -0,0 +1,125 @@
+Ox = Ox || {};
+
+(function() {
+
+    Ox.PNG = function(url) {
+        var that = this,
+            self = {};
+        self.getCanvas = function() {
+            var canvas = $("<canvas/>")
+                    .attr({
+                        width: that.width,
+                        height: that.height
+                    })[0],
+                context = canvas.getContext("2d");
+            context.drawImage(self.$png[0], 0, 0);
+            return {
+                canvas: canvas,
+                context: context
+            };
+        };
+        self.getChunks = function() {
+            var data = self.getData().substr(8),
+                length, chunks = [];
+            while (data) {
+                length = data.charCodeAt(1) << 16 |
+                    data.charCodeAt(2) << 8 |
+                    data.charCodeAt(3);
+                chunks.push({
+                    length: length,
+                    type: data.substr(4, 4),
+                    data: data.substr(8, length),
+                    crc: data.substr(length + 8, 4)
+                });
+                data = data.substr(length + 12);
+            }
+            return chunks;
+        }
+        self.getData = function() {
+            return atob(self.getURL().split(",")[1]);
+        }
+        self.getDimensions = function() {
+            var dimensions;
+            self.$png
+                .hide()
+                .appendTo($("body"));
+            dimensions = {
+                width: self.$png.width(),
+                height: self.$png.height()
+            }
+            self.$png.remove();
+            return dimensions;
+        }
+        self.getHeader = function() {
+            return self.getData().substr(0, 8);
+        }
+        self.getURL = function() {
+            return that.canvas.toDataURL();
+        }
+        self.onLoad = function($png, callback) {
+            self.$png = $png;
+            var dimensions = self.getDimensions();
+            that.width = dimensions.width;
+            that.height = dimensions.height;
+            var canvas = self.getCanvas();
+            that.context = canvas.context;
+            that.canvas = canvas.canvas;
+            console.log(self.getChunks())
+            callback();
+        };
+        that.addChunk = function(options) {
+            options = $.extend({
+                data: "",
+                type: "",
+                position: -1
+            }, options);
+            var len = options.data.length,
+                randomType = !options.type,
+                chunks = self.getChunks();
+                chunk = {
+                    length: 0,
+                    type: options.type || "",
+                    data: options.data,
+                    crc: ""
+                },
+                data = "";
+                i;
+            //     0    1    2    3    4     ... length: 6
+            // IHDR IDAT IDAT IDAT ifOo IEND
+            options.position = options.position < 0 ?
+                Math.max(chunks.length - 1 - options.position, 0) : 
+                Math.min(options.position, chunks.length - 2);
+            for (i = 0; i < 4; i++) {
+                if (randomType) {
+                    // format abCd (ancillary, private, (reserved), safe-to-copy)
+                    chunk.type += String.fromCharCode((i == 2 ? 65 : 97) + Math.random() * 26);
+                }
+                chunk.length += String.fromCharCode(len >> ((3 - i) * 8) & 255);
+                chunk.crc += String.fromCharCode(Math.random() * 256);
+            }
+            chunks.splice(position + 1, 0, chunk);
+            // data = ...
+        }
+        that.appendTo = function(selector) {
+            $("<img/>")
+                .attr({
+                    src: self.getURL()
+                })
+                .appendTo(selector);
+        }
+        that.getSize = function() {
+            return self.getData().length;
+        }
+        that.load = function(callback) {
+            $("<img/>")
+                .attr({
+                    src: url
+                })
+                .load(function() {
+                    self.onLoad($(this), callback);
+                });
+        }
+        return that;
+    };
+
+})();