WebFontConfig = {
google: { families: [ 'Ceviche+One::latin,latin-ext','Mr+Dafoe::latin','Shadows+Into+Light+Two::latin,latin-ext'] }
};
(function() {
var wf = document.createElement('script');
wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
var canvas = new fabric.Canvas('c');
console.log('Click Edit');
// clear canvas
canvas.clear();
var jjson='{"objects":[{"type":"circle","originX":"center","originY":"center","left":473,"top":830,"width":1000,"height":1000,"fill":{"type":"linear","coords":{"x1":0,"y1":-100,"x2":0,"y2":1000},"colorStops":[{"offset":"0","color":"rgb(66,36,36)","opacity":1},{"offset":"1","color":"rgb(66,36,36)","opacity":1}],"offsetX":0,"offsetY":0},"stroke":"white","strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"radius":500,"startAngle":0,"endAngle":6.283185307179586,"name":"trololo"},{"type":"image","originX":"left","originY":"top","left":120,"top":615,"width":365,"height":310,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"src":"https://localhost/packiger/editor/images/stand1/2.png","filters":[],"crossOrigin":"","alignX":"none","alignY":"none","meetOrSlice":"meet","name":"layout"},{"type":"image","originX":"left","originY":"top","left":35,"top":917,"width":174,"height":70,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":0.5,"scaleY":0.5,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"src":"https://localhost/packiger/editor/images/stand1/100.png","filters":[],"crossOrigin":"","alignX":"none","alignY":"none","meetOrSlice":"meet"},{"type":"image","originX":"left","originY":"top","left":135,"top":895,"width":135,"height":133,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":0.5,"scaleY":0.5,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"src":"https://localhost/packiger/editor/images/stand1/ui.png","filters":[],"crossOrigin":"","alignX":"none","alignY":"none","meetOrSlice":"meet"},{"type":"text","originX":"left","originY":"top","left":143,"top":461,"width":440,"height":157.3,"fill":"#FFCD18","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":360,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"text":"CHOCK","fontSize":"120","fontWeight":"bold","fontFamily":"arial","fontStyle":"","lineHeight":1.16,"textDecoration":"","textAlign":"left","textBackgroundColor":""},{"type":"text","originX":"left","originY":"top","left":153,"top":575,"width":434.1,"height":41.95,"fill":"white","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"text":"Kacang Cokelat Asli Indonesia","fontSize":32,"fontWeight":"normal","fontFamily":"arial","fontStyle":"","lineHeight":1.16,"textDecoration":"","textAlign":"left","textBackgroundColor":""},{"type":"text","originX":"left","originY":"top","left":380,"top":900,"width":216.8,"height":39.32,"fill":"white","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"text":"PD. Jaya Karya","fontSize":30,"fontWeight":"bold","fontFamily":"arial","fontStyle":"","lineHeight":1.16,"textDecoration":"","textAlign":"left","textBackgroundColor":""},{"type":"text","originX":"left","originY":"top","left":362,"top":939,"width":255.22,"height":23.59,"fill":"white","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"text":"DINKES P-IRT 2398783423987","fontSize":18,"fontWeight":"bold","fontFamily":"arial","fontStyle":"","lineHeight":1.16,"textDecoration":"","textAlign":"left","textBackgroundColor":""},{"type":"text","originX":"left","originY":"top","left":403,"top":963,"width":175.73,"height":23.59,"fill":"white","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"text":"BERAT BERSIH 150g","fontSize":18,"fontWeight":"normal","fontFamily":"arial","fontStyle":"","lineHeight":1.16,"textDecoration":"","textAlign":"left","textBackgroundColor":""}],"background":""}';
//LOAD JSON DATA
canvas.loadFromJSON(JSON.parse(jjson), function(obj) {
canvas.renderAll();
console.log(' this is a callback. invoked when canvas is loaded!xxx ');
console.log(canvas.item(0).name);
canvas.forEachObject(function(obj){
console.log(obj.name);
// if(obj.name === 'trololo'){
// obj.set({
// left: 100,
// top:200,
// height: 700,
// width: 700,
// scaleX: .35,
// scaleY:.35,
// lockScalingY: .35
// });
// canvas_.add(obj);
// }
});
});
if( window.devicePixelRatio !== 1 ){
var c = canvas.getElement(), w = c.width, h = c.height;
// Scale the canvas up by two for retina
c.setAttribute('width', w*window.devicePixelRatio);
c.setAttribute('height', h*window.devicePixelRatio);
// finally set the scale of the context
c.getContext('2d').scale(window.devicePixelRatio, window.devicePixelRatio);
}
var btn2 = document.getElementById('inline-btn'),btnHeight = 18;
// canvas.backgroundColor = 'transparent';
// var recx2 = new fabric.Rect({
// lockMovementX: true,
// lockMovementY: true,
// selectable:false,
// top: 325,
// left: 789,
// fill: '#FEF3EE',
// width: 420,
// height: 711
// });
// recx2.set({
// clipFor: 'pig'
// });
// canvas.add(recx2);
// var recx3 = new fabric.Rect({
// lockMovementX: true,
// lockMovementY: true,
// selectable:false,
// originX: 'left',
// originY: 'top',
// top: 327,
// left: 77,
// width: 423,
// fill: 'transparent',
// height: 708,
// strokeWidth: 0
// });
// recx3.set({
// clipFor: 'pug'
// });
// canvas.add(recx3);
// background
// var imgElement5 = document.getElementById('layer1');
// var imgInstance5 = new fabric.Image(imgElement5, {
// left: 0,
// top: 0,
// lockMovementX: true,
// lockMovementY: true,
// selectable:false,
// angle: 0,
// opacity: 1
// });
// canvas.add(imgInstance5);
var circle = new fabric.Circle({
left: '473',
top: '830',
radius: 500,
strokeWidth: 0,
stroke: 'white',
originX: 'center',
originY: 'center',
});
circle.toObject = (function(toObject) {
return function() {
return fabric.util.object.extend(toObject.call(this), {
name: this.name
});
};
})(circle.toObject);
circle.setGradient('fill', {
x1: '0',
y1: -circle.height/10,
x2: '0',
y2: circle.height,
colorStops: { '0': '#422424', '1': '#422424'}
});
canvas.add(circle);
circle.name = 'troolo';
console.log('Gradient', circle.fill);
console.log(JSON.stringify(canvas));
canvas.sendToBack(circle);
//Image3
var imgElement3 = document.getElementById('layer3');
var imgInstance3 = new fabric.Image(imgElement3, {
name: 'baar',
left: 120,
top: 615,
width:365,
height: 310,
angle: 0,
opacity: 1
});
imgInstance3.toObject = (function(toObject) {
return function() {
return fabric.util.object.extend(toObject.call(this), {
name: this.name
});
};
})(circle.toObject);
canvas.add(imgInstance3);
//100% indonesia
var imgElement5 = document.getElementById('layer5');
var imgInstance5 = new fabric.Image(imgElement5, {
left: 35,
scaleX:0.5,
scaleY:0.5,
top: 917,
angle: 0,
opacity: 1
});
canvas.add(imgInstance5);
//logo nui
var imgElement6 = document.getElementById('layer6');
var imgInstance6 = new fabric.Image(imgElement6, {
left: 135,
top: 895,
scaleX:0.5,
scaleY:0.5,
angle: 0,
opacity: 1
});
canvas.add(imgInstance6);
var text1 = new fabric.Text('CHOCK', {
left: 143,
top: 461,
fill: '#FFCD18',
zindex: 2,
fontSize: 120,
fontFamily: 'arial',
fontWeight: 'bold',
name: text1
});
canvas.add(text1);
var text2 = new fabric.Text('Kacang Cokelat Asli Indonesia', {
left: 153,
top: 575,
fill: 'white',
zindex: 2,
fontSize: 32,
fontFamily: 'arial',
});
canvas.add(text2);
var text3 = new fabric.Text('PD. Jaya Karya', {
left: 380,
top: 900,
fill: 'white',
zindex: 2,
fontSize: 30,
fontFamily: 'arial',
fontWeight: 'bold'
});
canvas.add(text3);
var dinkes = new fabric.Text('DINKES P-IRT 2398783423987', {
left: 362,
top: 939,
fill: 'white',
zindex: 2,
fontSize: 18,
fontFamily: 'arial',
fontWeight: 'bold'
});
canvas.add(dinkes);
var berat = new fabric.Text('BERAT BERSIH 150g', {
left: 403,
top: 963,
fill: 'white',
fontSize: 18,
fontFamily: 'arial'
});
canvas.add(berat);
// var recx = new fabric.Rect({
// lockMovementX: true,
// lockMovementY: true,
// selectable:false,
// top: 0,
// left: 0,
// zindex:0,
// width: 638,
// height: 1004 });
// recx.setGradient('fill', {
// x1: '0',
// y1: -recx.height/10,
// x2: '0',
// y2: recx.height,
// colorStops: { '0': '#5C5C4A', '1': '#383838'}
// });
// canvas.add(recx);
// console.log('Gradient', recx.fill);
// canvas.sendToBack(recx);
//update warna
function update(jscolor) {
var obj = canvas.getActiveObject();
if (!obj) return;
// 'jscolor' instance can be used as a string
obj.setFill('#' + jscolor);
canvas.setActiveObject(obj);
}
function setName(obj,name){
obj.toObject = (function(toObject) {
return function() {
return fabric.util.object.extend(toObject.call(this), {
name: this.name
});
};
})(obj.toObject);
obj.name = ''+name;
}
setName(imgInstance3,'layout');
$('#btn_save').click(function(){
var trsvg = canvas.toSVG();
$('#svg-tag').html(trsvg);
var locfile = new Blob([trsvg], {type: "image/svg+xml;charset=utf-8"});
var locfilesrc = URL.createObjectURL(locfile);//mylocfile);
var dwn = document.getElementById('download');
dwn.innerHTML = "Download";
});
// delete object
function handleRemove() {
if(canvas.getActiveGroup()){
canvas.getActiveGroup().forEachObject(function(o){ canvas.remove(o) });
canvas.discardActiveGroup().renderAll();
} else {
canvas.remove(canvas.getActiveObject());
canvas.renderAll();
}
}
canvas.on('object:selected', function(o) {
if (o.target.isType('image')) {
$('#inline-btn').show();
$('#panel-text').hide();
$('#panel_edit_1').hide();
$('#panel_edit_2').hide();
$('#panel_edit_3').hide();
}else if (o.target.isType('text')) {
$('#panel-text').show();
$('#inline-btn').hide();
}else if (o.target.isType('group')){
$('#inline-btn').show();
$('#panel-text').hide();
}else{
$('#inline-btn').hide();
$('#panel-text').hide();
};
});
canvas.on('selection:cleared', function() {
$('#inline-btn').hide();
$('#panel-text').hide();
});
/*fabric.Image.fromURL('buah4.png', function(img) {
canvas.add(img.set({ left: 0, top: 0}).scale(0.25));
img.on('moving', function() { positionBtn(img) });
positionBtn(img);
});*/
$('input[name="my-radio"]').on('change', function(e) {
var hit=e.target.value;
if (hit==null || hit=='0'){
$('#panel_edit_1').hide();
hit=0;
}else if (hit=='1'){
$('#panel_edit_1').show();
$('#panel_edit_2').hide();
$('#panel_edit_3').hide();
document.getElementById(eval("'judul2'")).disabled = true;
document.getElementById(eval("'judul3'")).disabled = true;
}else if (hit=='2'){
$('#panel_edit_1').hide();
$('#panel_edit_2').show();
$('#panel_edit_3').hide();
document.getElementById(eval("'judul1'")).disabled = true;
document.getElementById(eval("'judul3'")).disabled = true;
hit=e.target.value;
}else if (hit=='3'){
$('#panel_edit_1').hide();
$('#panel_edit_2').hide();
$('#panel_edit_3').show();
document.getElementById(eval("'judul2'")).disabled = true;
document.getElementById(eval("'judul1'")).disabled = true;
hit=e.target.value;
}
//Judul
document.getElementById(eval("'judul'+hit")).disabled = false;
document.getElementById(eval("'judul'+hit")).addEventListener('input', function (e) {
eval("text"+hit).setText(e.target.value);
canvas.setActiveObject(eval("text" + hit));
canvas.renderAll();
});
document.getElementById(eval("'judul_size'+hit")).addEventListener('input', function (e) {
eval("text" + hit).set('fontSize',e.target.value);
canvas.setActiveObject(eval("text" + hit));
eval("text" + hit + hit).set('fontSize',e.target.value);
eval("text" + hit + hit + hit).set('fontSize',e.target.value);
canvas.renderAll();
});
document.getElementById(eval("'judul_rotasi'+hit")).addEventListener('input', function (e) {
eval("text" + hit).set('angle',e.target.value);
canvas.setActiveObject(eval("text" + hit));
eval("text" + hit + hit).setCoords();
eval("text" + hit + hit).set('angle',e.target.value);
eval("text" + hit + hit + hit).set('angle',e.target.value);
canvas.renderAll();
});
document.getElementById(eval("'judul_font'+hit")).addEventListener('input', function (e) {
eval("text" + hit).set('fontFamily',e.target.value);
canvas.setActiveObject(eval("text" + hit));
eval("text" + hit + hit).set('fontFamily',e.target.value);
eval("text" + hit + hit + hit).set('fontFamily',e.target.value);
canvas.renderAll();
});
document.getElementById(eval("'warni'+hit")).addEventListener('change', function (e) {
eval("text" + hit).setFill('#' + e.target.value);
canvas.setActiveObject(eval("text" + hit));
eval("text" + hit + hit).setFill('#' + e.target.value);
eval("text" + hit + hit + hit).setFill('#' + e.target.value);
canvas.setActiveObject(eval("text" + hit));
});
//bold
document.getElementById(eval("'bolder'+hit")).addEventListener('click', function (e) {
eval("text" + hit).set('fontWeight','bold');
eval("text" + hit + hit).set('fontWeight','bold');
eval("text" + hit + hit + hit).set('fontWeight','bold');
canvas.renderAll();
});
//italic
document.getElementById(eval("'italicer'+hit")).addEventListener('click', function (e) {
eval("text" + hit).set('fontStyle','italic');
eval("text" + hit + hit).set('fontStyle','italic');
eval("text" + hit + hit + hit).set('fontStyle','italic');
canvas.renderAll();
});
//underline
document.getElementById(eval("'underliner'+hit")).addEventListener('click', function (e) {
eval("text" + hit).set('textDecoration','underline');
eval("text" + hit + hit).set('textDecoration','underline');
eval("text" + hit + hit + hit).set('textDecoration','underline');
canvas.renderAll();
});
});
//Akhir OnChange
//dinkes
document.getElementById('dinkes').addEventListener('input', function (e) {
dinkes.setText('DINKES P-IRT '+e.target.value);
canvas.renderAll();
});
//berat
document.getElementById('berat').addEventListener('input', function (e) {
berat.setText('BERAT BERSIH WEIGH '+e.target.value);
canvas.renderAll();
});
//LOGO HALAL
function halal(){
if (document.getElementById('halal').checked)
{
canvas.add(imgInstance6);
canvas.setActiveObject(imgInstance6);
canvas.renderAll;
} else {
canvas.remove(imgInstance6);
canvas.renderAll;
};
};
//LOGO 100% Indonesia
function logo_indo(){
if (document.getElementById('logo_indo').checked)
{
canvas.add(imgInstance5);
canvas.setActiveObject(imgInstance5);
canvas.renderAll;
} else {
canvas.remove(imgInstance5);
canvas.renderAll;
};
};
document.getElementById('gradient1').addEventListener('change', function (e) {
circle.setGradient('fill', {
x1: '0',
y1: -circle.height/10,
x2: '0',
y2: circle.height,
colorStops: { '0': '#' + e.target.value, '1': $("#gradient2").val()}
});
console.log('Gradient', circle.fill);
canvas.renderAll();
});
document.getElementById('gradient2').addEventListener('change', function (e) {
circle.setGradient('fill', {
x1: '0',
y1: -circle.height/10,
x2: '0',
y2: circle.height,
colorStops: { '1': '#' + e.target.value, '0': $("#gradient1").val()}
});
console.log('Gradient', circle.fill);
canvas.renderAll();
});
document.getElementById('flat_background').addEventListener('change', function (e) {
circle.setFill('#' + e.target.value);
canvas.renderAll();
});
// Size Objek
document.getElementById('ukuran').addEventListener('input', function (e) {
var obj = canvas.getActiveObject();
if (!obj) return;
obj.set('fontSize',e.target.value);
canvas.renderAll();
});
//Rotasi Objek
document.getElementById('rotasi').addEventListener('input', function (e) {
var obj = canvas.getActiveObject();
if (!obj) return;
obj.set('angle',e.target.value);
canvas.renderAll();
});
//Rotasi Text
document.getElementById('rotasi2').addEventListener('input', function (e) {
var obj = canvas.getActiveObject();
if (!obj) return;
obj.set('angle',e.target.value);
canvas.renderAll();
});
// Bring to Back Text
document.getElementById('posisi2').addEventListener('click', function (e) {
var obj = canvas.getActiveObject();
if (!obj) return;
obj.bringToFront();
canvas.renderAll();
});
// Bring to Back
document.getElementById('posisi').addEventListener('click', function (e) {
var obj = canvas.getActiveObject();
if (!obj) return;
obj.bringToFront();
canvas.renderAll();
});
// ganti logo
document.getElementById('file').addEventListener("change", function (e) {
var file = e.target.files[0];
var reader = new FileReader();
console.log("reader " + reader);
reader.onload = function (f) {
var data = f.target.result;
var element5 = document.getElementById("layer3");
element5.src = data;
canvas.setActiveObject(imgInstance3);
};
reader.readAsDataURL(file);
});
//tambah s
document.getElementById('file_costum').addEventListener("change", function (e) {
var file = e.target.files[0];
var reader = new FileReader();
console.log("reader " + reader);
reader.onload = function (f) {
var data = f.target.result;
fabric.Image.fromURL(data, function (img) {
var oImg = img.set({left: 70, top: 100, scaleToWidth:1,scaleToHeight:1, angle: 0}).scale(0.5);
canvas.add(oImg).renderAll();
img.on('moving'/*, function() { positionBtn(img) }*/);
/*positionBtn(img);*/
canvas.setActiveObject(oImg);
});
};
reader.readAsDataURL(file);
});
$("#canvas2png").click(function(){
if(!window.localStorage){alert("This function is not supported by your browser."); return;}
// to PNG
// window.open(canvas.toDataURL('png'));
var cvs_png = canvas.toDataURL('png');
var dwn = document.getElementById('download');
dwn.innerHTML = "Download";
});
// // Save JSON
// function savejson(){
// var json_data = JSON.stringify(canvas.toDatalessJSON());
// console.log(json_data);
// var url = 'data:text/json;charset=utf8,' + encodeURIComponent(json_data);
// window.location.href = 'profil.php?json='+url;
// return url;
// };
$('#btn_save_json').click(function(){
var json_data = JSON.stringify(canvas.toDatalessObject());
console.log(json_data);
var url = 'data:text/json;charset=utf8,' + encodeURIComponent(json_data);
// var dwn = document.getElementById('downloadjson');
// dwn.innerHTML = "Download JSON";
window.open(url);
});
//Load JSON
$('#btn_load_json').click(function(){
var canvas_ = new fabric.Canvas('ca');
console.log('Click Edit');
var jjson='{"objects":[{"type":"circle","originX":"center","originY":"center","left":473,"top":830,"width":1000,"height":1000,"fill":{"type":"linear","coords":{"x1":0,"y1":-100,"x2":0,"y2":1000},"colorStops":[{"offset":"0","color":"rgb(138,253,51)","opacity":1},{"offset":"1","color":"rgb(255,87,15)","opacity":1}],"offsetX":0,"offsetY":0},"stroke":"white","strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"radius":500,"startAngle":0,"endAngle":6.283185307179586},{"type":"image","originX":"left","originY":"top","left":120,"top":615,"width":365,"height":310,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"src":"https://localhost/packiger/editor/images/stand1/2.png","filters":[],"crossOrigin":"","alignX":"none","alignY":"none","meetOrSlice":"meet","name":"layout"},{"type":"text","originX":"left","originY":"top","left":147.25,"top":478.55,"width":462.19,"height":104.86,"fill":"#FFC32C","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"text":"Rangginang","fontSize":"80","fontWeight":"bold","fontFamily":"arial","fontStyle":"","lineHeight":1.16,"textDecoration":"","textAlign":"left","textBackgroundColor":""},{"type":"text","originX":"left","originY":"top","left":148.75,"top":567.2,"width":457.67,"height":36.7,"fill":"#FFFFFF","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"text":"Makanan Khas Sunda Asal Bandung","fontSize":"28","fontWeight":"normal","fontFamily":"arial","fontStyle":"","lineHeight":1.16,"textDecoration":"","textAlign":"left","textBackgroundColor":""},{"type":"text","originX":"left","originY":"top","left":375.75,"top":907.25,"width":227.83,"height":39.32,"fill":"white","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"text":"PD. Tigaroet OS","fontSize":30,"fontWeight":"bold","fontFamily":"arial","fontStyle":"","lineHeight":1.16,"textDecoration":"","textAlign":"left","textBackgroundColor":""},{"type":"text","originX":"left","originY":"top","left":362,"top":939,"width":255.15,"height":23.59,"fill":"white","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"text":"DINKES P-IRT 2398783423987","fontSize":18,"fontWeight":"bold","fontFamily":"arial","fontStyle":"","lineHeight":1.16,"textDecoration":"","textAlign":"left","textBackgroundColor":""},{"type":"text","originX":"left","originY":"top","left":403,"top":963,"width":175.74,"height":23.59,"fill":"white","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"text":"BERAT BERSIH 150g","fontSize":18,"fontWeight":"normal","fontFamily":"arial","fontStyle":"","lineHeight":1.16,"textDecoration":"","textAlign":"left","textBackgroundColor":""},{"type":"image","originX":"left","originY":"top","left":35.05,"top":908.65,"width":135,"height":133,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":0.5,"scaleY":0.5,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"src":"https://localhost/packiger/editor/images/stand1/ui.png","filters":[],"crossOrigin":"","alignX":"none","alignY":"none","meetOrSlice":"meet"}],"background":""}';
//LOAD JSON DATA
canvas_.loadFromJSON(JSON.parse(jjson), function(obj) {
canvas_.renderAll();
console.log(' this is a callback. invoked when canvas is loaded!xxx ');
canvas_.forEachObject(function(obj){
console.log(obj.name);
// if(obj.name === 'recta'){
// obj.set({
// left: 100,
// top:200,
// height: 700,
// width: 700,
// scaleX: .35,
// scaleY:.35,
// lockScalingY: .35
// });
// canvas_.add(obj);
// }
});
});
});
// Akhir Save Json
this.__canvases.puhs(canvas);
function getPOS() {
var pos = canvas.getActiveObject().get('left');
var pos2= canvas.getActiveObject().get('top');
var pos3= canvas.getActiveObject().getHeight('height');
var pos4 = canvas.getActiveObject().getWidth('width');
var pos5 = canvas.getActiveObject().get('angle');
alert("Position of rect from left:" + pos + "top "+ pos2+"height "+pos3+"width "+pos4+"Angle "+pos5);
}