Controll FabricJS

[JS] Controll FabricJS

/**
 * Created by ENQ on 7/15/2015.
 */
 /*---------------------------------------------------------------------------------*/
 /*                                     CONFIGS                                     */
 /*---------------------------------------------------------------------------------*/
var maxItemAdd = 3;
var temp = 0; // for text
var tempImg = 0; //for image
var count_click = 0; //click
var max_click_img = 2;


/* ---------------------------------- Create Canvas -----------------------------------*/
var canvas = new fabric.Canvas('mix', {
    selection: true,
    hoverCursor: 'pointer'
});

// Opacity select
canvas.on({
    'object:moving': function (e) {
        e.target.opacity = 0.8;
        e.target.bringToFront();
    },
    'object:modified': function (e) {
        e.target.opacity = 1;
    }
});


/* ---------------------------------- BackgroundImage default -----------------------------------*/
/**
 * @PathImage :
 */
function setCanvasBg(PathImage) {
    canvas.setBackgroundImage(PathImage, canvas.renderAll.bind(canvas), {
        // Needed to position backgroundImage at 0/0
        width: canvas.width,
        height: canvas.height,
        originX: 'left',
        originY: 'top',
        transparentCorners: false
    });
};
setCanvasBg('bg123.png');


/* ---------------------------------- addImage fix -----------------------------------*/
/**
 * @PathName
 * @top
 * @left
 * @radius
 * addImage('1.jpg', 70, 100,80,200,200);
 */
function addImage(PathName, top, left, radius, wImg, hImg) {
    var oImg = new fabric.Image.fromURL(PathName, function (oImg) {
        oImg.set({
            left: left,
            top: top,
            padding: 1,
            width: wImg,
            height: hImg,
            // width: canvas.width,
            //height: canvas.height,
            transparentCorners: false,
            clipTo: function (ctx) {
                ctx.arc(0, 0, radius, 0, Math.PI * 2, true);
            }
        });
        canvas.add(oImg);
    });
};


/* ---------------------------------- add Text fix -----------------------------------*/
/**
 * @content
 * @color
 * @fontsize
 * @top
 * @left
 * @fontfamily
 */
function addTexts(content, color, fontsize, top, left, fontfamily) {
    var iText = new fabric.Text(content, {
        fontFamily: fontfamily,
        fontSize: fontsize,
        fontWeight: 'bold',
        //fontStyle: 'italic',
        // stroke: '#ff1318',
        // strokeWidth: 1,
        textAlign: 'center',
        lineHeight: 1,
        padding: 5,
        //width: canvas.width,
        //height: canvas.height,
        //textBackgroundColor: 'rgb(0,200,0)',
        //shadow: 'green -5px -5px 3px',
        left: left,
        top: top,
        fill: color,
        cursor: 'pointer',
        transparentCorners: false
    });
    canvas.add(iText);
};
addTexts('#mixdigital', 'red', 60, 10, 230, 'Trochut');
addTexts('#mixdigital', 'green', 100, 370, 130, 'azuki');


/* ---------------------------------- Export Image -----------------------------------*/
//SVG
function saveImageSVG() {
    window.open(
        'data:image/svg+xml;utf8,' +
        encodeURIComponent(canvas.toSVG()));
};

// JSON
function saveImageJSON() {
    console.log(JSON.stringify(canvas));
};

// View Image
function getImageData(formatImage, quality) {
    canvas.deactivateAll().renderAll();
    var dataURL = canvas.toDataURL({
        format: formatImage,
        width: canvas.width,
        height: canvas.height,
        quality: quality
        //left: 100,
        //top: 100,
        //width: 200,
        // height: 200
    });
    window.open(dataURL);
};

/* ---------------------------------- remove iteam select -----------------------------------*/
$('#board-tool-remove').click(function () {
    // activeObject canvas select
    var activeObject = canvas.getActiveObject(), activeGroup = canvas.getActiveGroup();
    if (activeGroup) {
        var objectsInGroup = activeGroup.getObjects();
        canvas.discardActiveGroup();
        objectsInGroup.forEach(function (object) {
            canvas.remove(object);
        });
    }

    if (activeObject) {
        canvas.remove(activeObject);
    }

    //reset controls
    $("#add-text").removeAttr('disabled');
    $('#image-req').removeAttr('disabled');

    if(temp < 0 || tempImg < 0 || count_click <0){
        temp =0;
        tempImg = 0;
        count_click = 0;
    }
    else{
        temp -= 1;
        tempImg -= 1;
        count_click -= 1;
    }
});

/* ---------------------------------- Set ImageBackground  -----------------------------------*/
$(".add_bg").click(function () {
    canvas.setBackgroundImage($(this).children('img').first().attr('src'), canvas.renderAll.bind(canvas), {
        // Needed to position backgroundImage at 0/0
        width: canvas.width,
        height: canvas.height,
        originX: 'left',
        originY: 'top',
        transparentCorners: false
    });
});


/* ---------------------------------- upload Image -----------------------------------*/
$('#btn-upload').click(function () {
    $("#image-req").click();
    return false;
});

$("#image-req").change(function () {
    //var $btn = $(this);
    var imgVal = $('#image-req');
    if (imgVal.val() != '') {
        tempImg++;
    }
    //limit image upload < maxItemAdd
    if (tempImg <= maxItemAdd) {
        var input = this;
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('<li><a href="#" id="custom-image"><img src="' + e.target.result + '" style="max-height: 130px;max-width: 300px;margin: 10px 5px;padding: 5px;"/></a></li>')
                    .insertAfter('#board-tool-image-holder')
                    .children().first().click(function () {
                        // limit image = click
                        if (count_click <= max_click_img) {
                            fabric.Image.fromURL($(this).children('img').first().attr('src'), function (oImg) {
                                oImg.set({
                                    left: 20,
                                    top: 20,
                                    padding: 2,
                                    width: 200,
                                    height: 200,
                                    transparentCorners: false
                                });
                                canvas.add(oImg);
                            });
                            count_click++;
                        }
                        //over
                        if (count_click > max_click_img) {
                            //alert("Số ảnh thêm vào tối đa là 3 !!");
                            $('#modal-id').modal('show');
                            $("#notice").text("Số ảnh thêm vào tối đa là 3 !!");
                        };
                        return false;
                    })
            }
            reader.readAsDataURL(input.files[0]);
        }
    }
    else {
        imgVal.attr('disabled', 'disabled');
        $('#modal-id').modal('show');
        $("#notice").text("Số ảnh upload đã đủ !!");
    }
});


/* ---------------------------------- insert Text -----------------------------------*/
$("#add-text").on("click", function () {
    var des = $("#mytext");
    //var $btn = $(this);
    if (des.val() != '') {
        temp++;
    }
    if (des.val() == '') {
        $('#modal-id').modal('show');
        $("#notice").text("Bạn chưa nhập gì cả !");
    }
    else if (temp <= maxItemAdd) { //limit text add
        changetext();
        des.val('');
    }
    else {
        //alert("Ban khong du dep trai de them nhieu lan hon !");
        $("#add-text").attr('disabled', 'disabled');
        $('#modal-id').modal('show');
        $("#notice").text("Số lần thêm mới nội dung đã đủ !!");
    }
});

function changetext() {
    var mytext = document.getElementById('mytext').value;
    var mycolor = document.getElementById('mycolor').value;
    var textObj = new fabric.IText(mytext, {
        fontFamily: 'azuki',
        fontSize: 50,
        fontWeight: 'bold',
        //fontStyle: 'italic',
        // stroke: '#ff1318',
        // strokeWidth: 1,
        textAlign: 'center',
        lineHeight: 1,
        padding: 5,
        //width: canvas.width,
        //height: canvas.height,
        //textBackgroundColor: 'rgb(0,200,0)',
        //shadow: 'green -5px -5px 3px',
        left: 100,
        top: 100,
        fill: mycolor,
        cursor: 'pointer',
        transparentCorners: false
    });
    canvas.add(textObj);
    mytext.value = '';
};

/* ---------------------------------- Clear all object -----------------------------------*/
$('#reset').click(function () {
    if (confirm('Bạn có chắc chắn xóa tất cả?')) {
        canvas.clear();
        $("#add-text").removeAttr('disabled');
        $('#image-req').removeAttr('disabled');
        temp = 0;
        tempImg = 0;
        count_click = 0;
        $("a").remove(".board-custom-image");
        // clear mytext
        var des = $("#mytext");
        des.val('');
    }
});

/* ---------------------------------- Download Image -----------------------------------*/
function downloadCanvas(link, canvasId, filename) {
    canvas.deactivateAll().renderAll();
    link.href = canvas.toDataURL();
    link.download = filename;
}
$("#download").click(function () {
    downloadCanvas(this, 'canvas', 'mixdigital.jpg');
});


/* ----------------------------------- Tooltip bs3 -------------------------------------*/
$(function () {
    $('[data-toggle="tooltip"]').tooltip()
});

/*---------------------------- Limiting MaLength for TextArea --------------------------*/
$('#mytext').limit('100', '#charsLeft');