Permalink
Browse files

initial import

  • Loading branch information...
1 parent 673588e commit 24f80af68ec0ea242dfe4f8ef01aab9953e46265 @fadomire committed Mar 22, 2013
Showing with 17,785 additions and 0 deletions.
  1. +23 −0 css/base.css
  2. +18 −0 css/bootstrap-combined.min.css
  3. +132 −0 index.html
  4. BIN js/.DS_Store
  5. +351 −0 js/aligning_guidelines.js
  6. +236 −0 js/canvas2image.js
  7. +86 −0 js/client.js
  8. +16,937 −0 js/fabric-0.9.15.js
  9. +2 −0 js/jquery-1.8.3.min.js
View
@@ -0,0 +1,23 @@
+@media (min-width:980px) {
+ body {
+ padding-top: 60px;
+ }
+}
+body {
+ margin-bottom: 30px;
+ }
+.canvas-container { margin: 0 auto; float: left; border: 1px solid #aaa; }
+.menu {
+ margin-bottom: 20px;
+}
+.menu img {
+ margin-bottom: 10px;
+ cursor: pointer;
+ border: 1px solid white;
+}
+.menu img:hover{
+ border: 1px solid green;
+}
+.thumb {
+ height: 70px;
+}

Large diffs are not rendered by default.

Oops, something went wrong.
View

Large diffs are not rendered by default.

Oops, something went wrong.
View
Binary file not shown.
View

Large diffs are not rendered by default.

Oops, something went wrong.
View
@@ -0,0 +1,236 @@
+/*
+ * Canvas2Image v0.1
+ * Copyright (c) 2008 Jacob Seidelin, jseidelin@nihilogic.dk
+ * MIT License [http://www.opensource.org/licenses/mit-license.php]
+ */
+
+var Canvas2Image = (function() {
+
+ // check if we have canvas support
+ var bHasCanvas = false;
+ var oCanvas = document.createElement("canvas");
+ if (oCanvas.getContext("2d")) {
+ bHasCanvas = true;
+ }
+
+ // no canvas, bail out.
+ if (!bHasCanvas) {
+ return {
+ saveAsBMP : function(){},
+ saveAsPNG : function(){},
+ saveAsJPEG : function(){}
+ }
+ }
+
+ var bHasImageData = !!(oCanvas.getContext("2d").getImageData);
+ var bHasDataURL = !!(oCanvas.toDataURL);
+ var bHasBase64 = !!(window.btoa);
+
+ var strDownloadMime = "image/octet-stream";
+
+ // ok, we're good
+ var readCanvasData = function(oCanvas) {
+ var iWidth = parseInt(oCanvas.width);
+ var iHeight = parseInt(oCanvas.height);
+ return oCanvas.getContext("2d").getImageData(0,0,iWidth,iHeight);
+ }
+
+ // base64 encodes either a string or an array of charcodes
+ var encodeData = function(data) {
+ var strData = "";
+ if (typeof data == "string") {
+ strData = data;
+ } else {
+ var aData = data;
+ for (var i=0;i<aData.length;i++) {
+ strData += String.fromCharCode(aData[i]);
+ }
+ }
+ return btoa(strData);
+ }
+
+ // creates a base64 encoded string containing BMP data
+ // takes an imagedata object as argument
+ var createBMP = function(oData) {
+ var aHeader = [];
+
+ var iWidth = oData.width;
+ var iHeight = oData.height;
+
+ aHeader.push(0x42); // magic 1
+ aHeader.push(0x4D);
+
+ var iFileSize = iWidth*iHeight*3 + 54; // total header size = 54 bytes
+ aHeader.push(iFileSize % 256); iFileSize = Math.floor(iFileSize / 256);
+ aHeader.push(iFileSize % 256); iFileSize = Math.floor(iFileSize / 256);
+ aHeader.push(iFileSize % 256); iFileSize = Math.floor(iFileSize / 256);
+ aHeader.push(iFileSize % 256);
+
+ aHeader.push(0); // reserved
+ aHeader.push(0);
+ aHeader.push(0); // reserved
+ aHeader.push(0);
+
+ aHeader.push(54); // dataoffset
+ aHeader.push(0);
+ aHeader.push(0);
+ aHeader.push(0);
+
+ var aInfoHeader = [];
+ aInfoHeader.push(40); // info header size
+ aInfoHeader.push(0);
+ aInfoHeader.push(0);
+ aInfoHeader.push(0);
+
+ var iImageWidth = iWidth;
+ aInfoHeader.push(iImageWidth % 256); iImageWidth = Math.floor(iImageWidth / 256);
+ aInfoHeader.push(iImageWidth % 256); iImageWidth = Math.floor(iImageWidth / 256);
+ aInfoHeader.push(iImageWidth % 256); iImageWidth = Math.floor(iImageWidth / 256);
+ aInfoHeader.push(iImageWidth % 256);
+
+ var iImageHeight = iHeight;
+ aInfoHeader.push(iImageHeight % 256); iImageHeight = Math.floor(iImageHeight / 256);
+ aInfoHeader.push(iImageHeight % 256); iImageHeight = Math.floor(iImageHeight / 256);
+ aInfoHeader.push(iImageHeight % 256); iImageHeight = Math.floor(iImageHeight / 256);
+ aInfoHeader.push(iImageHeight % 256);
+
+ aInfoHeader.push(1); // num of planes
+ aInfoHeader.push(0);
+
+ aInfoHeader.push(24); // num of bits per pixel
+ aInfoHeader.push(0);
+
+ aInfoHeader.push(0); // compression = none
+ aInfoHeader.push(0);
+ aInfoHeader.push(0);
+ aInfoHeader.push(0);
+
+ var iDataSize = iWidth*iHeight*3;
+ aInfoHeader.push(iDataSize % 256); iDataSize = Math.floor(iDataSize / 256);
+ aInfoHeader.push(iDataSize % 256); iDataSize = Math.floor(iDataSize / 256);
+ aInfoHeader.push(iDataSize % 256); iDataSize = Math.floor(iDataSize / 256);
+ aInfoHeader.push(iDataSize % 256);
+
+ for (var i=0;i<16;i++) {
+ aInfoHeader.push(0); // these bytes not used
+ }
+
+ var iPadding = (4 - ((iWidth * 3) % 4)) % 4;
+
+ var aImgData = oData.data;
+
+ var strPixelData = "";
+ var y = iHeight;
+ do {
+ var iOffsetY = iWidth*(y-1)*4;
+ var strPixelRow = "";
+ for (var x=0;x<iWidth;x++) {
+ var iOffsetX = 4*x;
+
+ strPixelRow += String.fromCharCode(aImgData[iOffsetY+iOffsetX+2]);
+ strPixelRow += String.fromCharCode(aImgData[iOffsetY+iOffsetX+1]);
+ strPixelRow += String.fromCharCode(aImgData[iOffsetY+iOffsetX]);
+ }
+ for (var c=0;c<iPadding;c++) {
+ strPixelRow += String.fromCharCode(0);
+ }
+ strPixelData += strPixelRow;
+ } while (--y);
+
+ var strEncoded = encodeData(aHeader.concat(aInfoHeader)) + encodeData(strPixelData);
+
+ return strEncoded;
+ }
+
+
+ // sends the generated file to the client
+ var saveFile = function(strData) {
+ console.log(strData)
+ document.location.href = strData;
+ }
+
+ var makeDataURI = function(strData, strMime) {
+ return "data:" + strMime + ";base64," + strData;
+ }
+
+ // generates a <img> object containing the imagedata
+ var makeImageObject = function(strSource) {
+ var oImgElement = document.createElement("img");
+ oImgElement.src = strSource;
+ return oImgElement;
+ }
+
+ var scaleCanvas = function(oCanvas, iWidth, iHeight) {
+ if (iWidth && iHeight) {
+ var oSaveCanvas = document.createElement("canvas");
+ oSaveCanvas.width = iWidth;
+ oSaveCanvas.height = iHeight;
+ oSaveCanvas.style.width = iWidth+"px";
+ oSaveCanvas.style.height = iHeight+"px";
+
+ var oSaveCtx = oSaveCanvas.getContext("2d");
+
+ oSaveCtx.drawImage(oCanvas, 0, 0, oCanvas.width, oCanvas.height, 0, 0, iWidth, iHeight);
+ return oSaveCanvas;
+ }
+ return oCanvas;
+ }
+
+ return {
+
+ saveAsPNG : function(oCanvas, bReturnImg, iWidth, iHeight) {
+ if (!bHasDataURL) {
+ return false;
+ }
+ var oScaledCanvas = scaleCanvas(oCanvas, iWidth, iHeight);
+ var strData = oScaledCanvas.toDataURL("image/png");
+ if (bReturnImg) {
+ return makeImageObject(strData);
+ } else {
+ saveFile(strData.replace("image/png", strDownloadMime));
+ }
+ return true;
+ },
+
+ saveAsJPEG : function(oCanvas, bReturnImg, iWidth, iHeight) {
+ if (!bHasDataURL) {
+ return false;
+ }
+
+ var oScaledCanvas = scaleCanvas(oCanvas, iWidth, iHeight);
+ var strMime = "image/jpeg";
+ var strData = oScaledCanvas.toDataURL(strMime);
+
+ // check if browser actually supports jpeg by looking for the mime type in the data uri.
+ // if not, return false
+ if (strData.indexOf(strMime) != 5) {
+ return false;
+ }
+
+ if (bReturnImg) {
+ return makeImageObject(strData);
+ } else {
+ saveFile(strData.replace(strMime, strDownloadMime));
+ }
+ return true;
+ },
+
+ saveAsBMP : function(oCanvas, bReturnImg, iWidth, iHeight) {
+ if (!(bHasImageData && bHasBase64)) {
+ return false;
+ }
+
+ var oScaledCanvas = scaleCanvas(oCanvas, iWidth, iHeight);
+
+ var oData = readCanvasData(oScaledCanvas);
+ var strImgData = createBMP(oData);
+ if (bReturnImg) {
+ return makeImageObject(makeDataURI(strImgData, "image/bmp"));
+ } else {
+ saveFile(makeDataURI(strImgData, strDownloadMime));
+ }
+ return true;
+ }
+ };
+
+})();
View
@@ -0,0 +1,86 @@
+(function() {
+ var canvas = new fabric.Canvas('canvas');
+
+ canvas.backgroundColor='white';
+
+ // resize the canvas to fill browser window dynamically
+ window.addEventListener('resize', resizeCanvas, false);
+
+ function resizeCanvas() {
+ canvas.setWidth(document.getElementById('canva-row').offsetWidth );
+ }
+ resizeCanvas();
+
+ initAligningGuidelines(canvas);
+
+ canvas.observe('object:modified', function (e) {
+ var activeObject = e.target;
+ activeObject.straighten(45);
+
+ });
+
+ // load image from menu to canva
+ $('.menu > img').on('click', function (){
+ drawObject(this.src);
+ })
+
+ function drawObject(imageSrc) {
+ fabric.Image.fromURL(imageSrc, function (oImg) {
+ // scale image down before adding it onto canvas
+ canvas.add(oImg.set({ left : 110, top: 110}).scale(0.5));
+ });
+ }
+
+ // save image to png
+ $('#saveToPng').on('click', function (){
+ //var group = new fabric.Group(canvas.getObjects());
+ canvas.setActiveGroup(new fabric.Group(canvas.getObjects())).renderAll();
+
+ var cropZone = canvas.getActiveGroup();
+
+ // dont save select helper
+ canvas.discardActiveObject().renderAll();
+ canvas.discardActiveGroup().renderAll();
+
+ var cropDestination = document.createElement('canvas');
+ var context = cropDestination.getContext('2d');
+ cropDestination.width = cropZone.width + 60;
+ cropDestination.height = cropZone.height + 60;
+
+ var cropSourceLeft = cropZone.left - (cropZone.width / 2) - 30;
+ var cropSourceTop = cropZone.top - (cropZone.height / 2) - 30;
+
+ if(cropSourceLeft < 0){
+ cropSourceLeft = 0;
+ }
+ if(cropSourceTop < 0){
+ cropSourceTop = 0;
+ }
+
+ context.drawImage(
+ canvas.getElement(),
+ cropSourceLeft,
+ cropSourceTop,
+ cropZone.width + 60,
+ cropZone.height + 60,
+ 0,
+ 0,
+ cropZone.width + 60,
+ cropZone.height + 60
+ );
+
+ Canvas2Image.saveAsJPEG(cropDestination);
+ });
+
+ // delete selected object
+ $('#delete').on('click', function (){
+ canvas.remove(canvas.getActiveObject());
+ });
+
+ // add text to canva
+ $('#addText').on('click', function (){
+ var text = new fabric.Text($('#canvaText').val(), {left : 210, top: 110});
+ canvas.add(text);
+ });
+
+})();
Oops, something went wrong.

0 comments on commit 24f80af

Please sign in to comment.