cloud9 Image Processing

0 - top .md

to retrieve data to sen to cloud9 server use "ctx.toDataURL()"

toDatUrl will return a base64 of IMG

then convert base64 to a blob to send over webdav

https://github.com/jseidelin/pixastic/blob/master/pixastic.js

cloud9-imgview.js

/**
 * Code Editor for the Cloud9 IDE
 *
 * @copyright 2010, Ajax.org B.V.
 * @license GPLv3 <http://www.gnu.org/licenses/gpl.txt>
 */


define(function(require, exports, module) {

var ide = require("core/ide");
var ext = require("core/ext");
var markup = require("text!ext/imgview/imgview.xml");
var editors = require("ext/editors/editors");

module.exports = ext.register("ext/imgview/imgview", {
    name    : "Image Viewer",
    dev     : "Ajax.org",
    fileExtensions : [
        "bmp",
        "djv",
        "djvu",
        "gif",
        "ico",
        "jpg",
        "jpeg",
        "pbm",
        "pgm",
        "png",
        "pnm",
        "ppm",
        "psd",//doest not work in browser with out a plugin
        "tiff",
        "xbm",
        "xpm"
    ],
    type    : ext.EDITOR,
    markup  : markup,
    deps    : [editors],

    nodes : [],

    setDocument : function(doc, actiontracker){
        doc.session = doc.getNode().getAttribute("path");
        
        this.loadCanvas(doc);
        
        //P = new Pixastic(ctx);
        
        if (!doc.isInited) {
            doc.isInited = true;
            doc.dispatchEvent("init");
        }
    },
    loadCanvas:function(doc){
        var img = this.img = imgEditor.$ext.getElementsByTagName("img")[0];
        var canvas = this.canvas = imgEditor.$ext.getElementsByTagName("canvas")[0];
        var ctx = this.ctx = canvas.getContext("2d");
        
        if(doc){
            img.src =  apf.escapeXML(doc.session);
            img.onload = function(){
                canvas.width = img.width;
                canvas.height = img.height;
                canvas.style.display = "block";
                img.style.display = "none";
                ctx.drawImage(img, 0, 0);
            }
        }else{
            canvas.width = img.width;
            canvas.height = img.height;
            canvas.style.display = "block";
            img.style.display = "none";
            ctx.drawImage(img, 0, 0);
        }
    },

    hook : function() {},

    init : function(amlPage) {
        var editor = imgEditor;

        ide.addEventListener("beforefilesave", function(e) {
            var path = e.node && e.node.getAttribute("path");
            if (!path)
                return;
            // don't save images for now.
            if (editor.value == path)
                return false;
        });

        //amlPage.appendChild(editor);
        editor.show();

        this.imgEditor = this.amlEditor = editor;
        editor.$self = this;
        //this.nodes.push();
    },
    isEditing: false,
    save : function(button) {
        
        if(button.caption == "Edit"){
            this.loadCanvas();
            button.setCaption("Save");
        }else{
        this.img.onload = function(){};
        this.canvas.style.display = "none";
        this.img.style.display = "block";
        this.img.src = this.canvas.toDataURL();
        button.setCaption("Edit");
        };
    },
    Rotate90CW : function() {
            //copyCanvas
        var newcanvas = document.createElement("canvas");
        newcanvas.width = this.canvas.width;
        newcanvas.height = this.canvas.height;
        newcanvas.getContext("2d").drawImage(this.canvas, 0, 0);
        this.canvas.width = newcanvas.height;
        this.canvas.height = newcanvas.width;
        
        var ctx = this.canvas.getContext("2d");
        ctx.save();
        ctx.rotate(90 * Math.PI / 180);
        ctx.drawImage(newcanvas, 0, - newcanvas.height);
        ctx.restore();
        
        return true;
    
    },
    Rotate90CCW : function() {
        //copyCanvas
        var newcanvas = document.createElement("canvas");
        newcanvas.width = this.canvas.width;
        newcanvas.height = this.canvas.height;
        newcanvas.getContext("2d").drawImage(this.canvas, 0, 0);
        this.canvas.width = newcanvas.height;
        this.canvas.height = newcanvas.width;
        
        var ctx = this.canvas.getContext("2d");
        ctx.save();
        ctx.translate(0, this.canvas.height);
        ctx.rotate(-90 * Math.PI / 180);
        ctx.drawImage(newcanvas, 0, 0);
        ctx.restore();
        return true;
    }
});

});

cloud9-imgview.xml

<a:application xmlns:a="http://ajax.org/2005/aml">
    
    <a:toolbar align="top" height="25">
        <a:bar style="border-bottom:2px">
            <a:button
              onclick  = "imgEditor.$self.Rotate90CCW()">Rotate90CCW</a:button>
            <a:button
              onclick  = "imgEditor.$self.Rotate90CW()">Rotate90CW</a:button>
              <a:button
              onclick  = "imgEditor.$self.save(this)">Save</a:button>
        </a:bar>
    </a:toolbar>
    <a:bar id="imgEditor" flex="1" anchors="35 0 0 0" visible="false" style="overflow:scroll;">
            <img />
            <canvas style="margin:0 auto;"></canvas>
    </a:bar>
    
</a:application>

how to base64 in node.js

fs = require('fs');
sys = require('sys');
// string generated by canvas.toDataURL()
var img = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0"
    + "NAAAAKElEQVQ4jWNgYGD4Twzu6FhFFGYYNXDUwGFpIAk2E4dHDRw1cDgaCAASFOffhEIO"
    + "3gAAAABJRU5ErkJggg==";
// strip off the data: url prefix to get just the base64-encoded bytes
var data = img.replace(/^data:image\/\w+;base64,/, "");
var buf = new Buffer(data, 'base64');
fs.writeFile('image.png', buf);

//webdav will be handling save, so use blob case use

new-case-use-Blob.js

// Convert DataURL to Blob object
function dataURLtoBlob(dataURL) {
    // Decode the dataURL    
    var binary = atob(dataURL.split(',')[1]);
    // Create 8-bit unsigned array
    var array = [];
    for(var i = 0; i < binary.length; i++) {
        array.push(binary.charCodeAt(i));
    }
    // Return our Blob object
    return new Blob([new Uint8Array(array)], {type: 'image/png'});
}

var dataURL= canvas.toDataURL();

// Get Our File
var file= dataURLtoBlob(dataURL);

// Create new form data
var fd = new FormData();

// Append our image
fd.append("attrName", file);

$.ajax({
    url: "url",
    type: "POST",
    data: fd,
    processData: false,
    contentType: false,
}).done(function(respond){
    //..
});

Things to look at in cloud9

We really need to sitdown and dertermin on howto Save the images...

webdav is saving the files ext/save > ext/filesystem > webdav

so we need to see how webdav handles saving blobs

http://www.screencast.com/t/QAi37wiqmE