init

.bowerrc

@@ -0,0 +1,3 @@
+{
+  "directory": "bower_components/"
+}

.gitignore

@@ -0,0 +1,4 @@
+bower_components
+node_modules
+public/asset
+.idea

app/app.css

@@ -0,0 +1,16 @@
+.memeCanvas {
+    border-style: solid;
+    border-width: 1px;
+    border-color: black;
+    width: 100%;
+    height: auto;
+}
+
+body {
+    padding-top: 50px;
+}
+
+.starter-template {
+    padding: 40px 15px;
+    text-align: center;
+}

app/app.js

@@ -0,0 +1,182 @@
+var canvas = new fabric.Canvas('memeCanvas', {});
+
+var background_filterType = null;
+var background_filter = null;
+var background_type = null;
+var background_src = null;
+
+function backgroundSetType(type,render){
+    window.background_type = type;
+    if (type == 'facebook'){
+        backgroundSetSize(1024,500);
+    }
+    else if(type == 'instagram'){
+        backgroundSetSize(1024,1024);
+    }
+    else if (type == 'pinterest'){
+        backgroundSetSize(734,1024);
+    }else{
+        backgroundSetSize(1024,1024);
+    }
+
+    if (render === true){
+        backgroundRender();
+    }
+}
+
+function backgroundSetSize(width,height){
+    canvas.setWidth(width);
+    canvas.setWidth('100%', { cssOnly: true });
+    canvas.setHeight(height);
+    canvas.setHeight($('#memeCanvas-container').width()*(height/width)+'px', { cssOnly: true });
+}
+
+function backgroundSetFilter(filterType,render){
+    window.background_filter_type = filterType;
+    var filter = null;
+
+    if (filterType == 'sepia'){
+        filter = new fabric.Image.filters.Sepia();
+    }
+
+    if (filterType == 'sepia2'){
+        filter = new fabric.Image.filters.Sepia2();
+    }
+    if (filterType == 'noise'){
+        filter = new fabric.Image.filters.Noise({noise:100});
+    }
+    if (filterType == 'pixelate'){
+        filter = new fabric.Image.filters.Pixelate({blocksize: 5});
+    }
+
+    window.background_filter = filter;
+    if (render===true){
+        backgroundRender();
+    }
+
+}
+
+function backgroundSetImage(src,render) {
+    window.background_src = src;
+    if (render===true){
+        backgroundRender();
+    }
+}
+
+function backgroundRender() {
+    if (window.background_src === null){
+        console.log('no image');
+        return;
+    }
+
+    image = fabric.Image.fromURL(window.background_src, function(img) {
+        img.set({width: canvas.width, height: canvas.height, originX: 'left', originY: 'top'});
+
+        if (window.background_filter!==null){
+            img.filters.push(window.background_filter);
+            img.applyFilters(canvas.renderAll.bind(canvas));
+        }
+
+        canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas));
+    });
+
+    updateWrapper();
+
+}
+
+function textControllFill(target){
+    $('#controllTextText').val(target.text);
+    $('#controllTextFontSize').val(target.fontSize);
+    $('#controllTextFontFamily').val(target.fontFamily);
+    $('#controllTextFill').val(target.fill);
+}
+
+function textControllUpdate() {
+    if(canvas.getActiveObject().get('type')==="text"){
+        obj =  canvas.getActiveObject();
+        obj.text = $('#controllTextText').val();
+        obj.fill = $('#controllTextFill').val();
+        obj.fontSize = $('#controllTextFontSize').val();
+        obj.fontFamily = $('#controllTextFontFamily').val();
+        canvas.renderAll();
+    }
+
+}
+
+function saveImg(){
+    canvas.isDrawingMode = false;
+    canvas.deactivateAll().renderAll();
+
+    if(!window.localStorage){alert("This function is not supported by your browser."); return;}
+    // to PNG
+
+    var c = document.getElementById("memeCanvas");
+    var ctx = canvas.getContext("2d");
+    c.toBlob(function(blob) {
+        saveAs(blob, "pretty image.png");
+    });
+    // var data = canvas.toDataURL('png');
+    // var blob = new Blob([data], {type: ""});
+    // var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
+    // saveAs(blob, "hello world.png");
+    // saveAs(canvas.toDataURL('png'), "pretty image.png");
+}
+
+function createObject(type,options) {
+    if (type == 'text'){
+        canvas.add(new fabric.Text('Your Text Here', {
+            left: Math.floor(Math.random() * 100) + 1 ,
+            top: Math.floor(Math.random() * 100) + 1 ,
+            fontSize: Math.floor(Math.random() * 40) + 60 ,
+            fill:getRandomColor(),
+            // lockScalingX: true,
+            // lockScalingY: true,
+            fontFamily: 'Arial'
+        }));
+    }
+}
+
+function getRandomColor() {
+    var letters = '0123456789ABCDEF';
+    var color = '#';
+    for (var i = 0; i < 6; i++ ) {
+        color += letters[Math.floor(Math.random() * 16)];
+    }
+    return color;
+}
+
+function removeObject() {
+    canvas.remove(canvas.getActiveObject());
+    updateWrapper(null);
+}
+
+function updateWrapper(options) {
+    $('#backgroundFilter').val(window.background_filter_type);
+    $('#backgroundType').val(window.background_type);
+
+    $(".wrapper").hide();
+    if (options === undefined) return;
+    if (options.target) {
+        if (options.target.type == 'text'){
+            $(".wrapperText").show();
+            $('.nav-tabs a[href="#tabtext"]').tab('show');
+            textControllFill(options.target);
+        }
+
+        if (options.target.type == 'image'){
+            $(".wrapperImage").show();
+            $('.nav-tabs a[href="#tabimage"]').tab('show');
+        }
+    }
+}
+
+canvas.on('mouse:down', function(options) {
+    updateWrapper(options);
+});
+
+
+////
+////
+// $('#controllTextFillPicker').colorpicker().on('changeColor', function(e) {
+//     textControllUpdate();
+// });

app/script.js

@@ -0,0 +1,60 @@
+backgroundSetType('facebook');
+backgroundSetImage('img/background0.jpg');
+
+function template(id){
+    if(id ==1){
+        canvas.clear();
+        backgroundSetType('instagram');
+        backgroundSetImage('img/background1.jpg');
+        backgroundSetFilter('sepia');
+        backgroundRender();
+
+
+
+    }
+    if(id ==2) {
+        canvas.clear();
+        backgroundSetType('facebook');
+        backgroundSetImage('img/background0.jpg');
+        backgroundSetFilter('sepia2');
+
+        canvas.add(new fabric.Text("In order to succeed,\nwe must first\nbelieve that\nwe can.", {
+            left: 50 ,
+            top: 50 ,
+            fontSize: 50 ,
+            fill: '#ffff00',
+            fontFamily: 'Abril Fatface'
+        }));
+
+
+        canvas.add(new fabric.Text("Nikos Kazantzakis", {
+            left: 80 ,
+            top: 400 ,
+            fontSize: 30 ,
+            fill: '#ffff00',
+            fontFamily: 'Arial'
+        }));
+
+        backgroundRender();
+
+    }
+
+}
+
+template(2);
+
+
+document.getElementById('file').addEventListener("change", function (e) {
+    var file = e.target.files[0];
+    var reader = new FileReader();
+    reader.onload = function (f) {
+        var data = f.target.result;
+        fabric.Image.fromURL(data, function (img) {
+            var oImg = img.set({left: 0, top: 0, angle: 0,width:100, height:100}).scale(0.9);
+            canvas.add(oImg).renderAll();
+            canvas.setActiveObject(oImg);
+            canvas.toDataURL({format: 'png', quality: 0.8});
+        });
+    };
+    reader.readAsDataURL(file);
+});

bower.json

@@ -0,0 +1,25 @@
+{
+  "name": "meme_generator",
+  "version": "v1",
+  "dependencies": {
+    "bootstrap-sass": "~3.3.7",
+    "jquery": "~2.1.1",
+    "fabric": "~1.6.3",
+    "select2": "~4.0.3",
+    "mjolnic-bootstrap-colorpicker": "^2.3.3",
+    "FileSaver.js": "filesaver.js#^0.0.2"
+  },
+  "overrides": {
+    "bootstrap-sass": {
+      "main": [
+        "assets/javascripts/bootstrap.js",
+        "assets/stylesheets/_bootstrap.scss",
+        "assets/fonts/bootstrap/glyphicons-halflings-regular.eot",
+        "assets/fonts/bootstrap/glyphicons-halflings-regular.svg",
+        "assets/fonts/bootstrap/glyphicons-halflings-regular.ttf",
+        "assets/fonts/bootstrap/glyphicons-halflings-regular.woff",
+        "assets/fonts/bootstrap/glyphicons-halflings-regular.woff2"
+      ]
+    }
+  }
+}