Develop Reference

Wait for the format change of an image

during a project I need to set up a cropper associated with a face detection. The face detection works well but the cropper modifies the format of the image with its object, the coordinates returned by the facedetector are false. Do you know how to apply the facedetector once the image has been modified with the cropper interface ?
var image = document.getElementById('img');
var cropper = new Cropper(image, {
/* aspectRatio: 9 / 16,*/
// autoCrop: true,
scalable: false,
cropBoxResizable: false,
guides: true,
dragMode: 'none',
preview: '.preview',
data:{
width: 250,
height: 325,
},
crop: function(e) {
$('#x').val(e.detail.x);
$('#y').val(e.detail.y);
$('#w').val(e.detail.width);
$('#h').val(e.detail.height);
},
});
$('#img').faceDetection({
complete: function (faces) {
console.log(faces)
initx = faces[0].x;
inity = faces[0].y;
cropper.data({x:120,y:init});
}
});

You probably need to first, get the coords, then initiate Cropper with those coordinates, like this:
const img = $('img');
img.faceDetection({
complete: function (faces) {
initCropper(faces[0]);
}
});
function initCropper(data) {
cropper = new Cropper(img[0], {
data
});
}
https://jsbin.com/keruzal/edit?js,output

Is it possible to make a dynamic mask/crop system via fabric.js that behaves like canva.com?

edit 2016, Oct 24
I've an idea about this feature by using 'pattern' which seems to be a good idea.
I tried to prove my thoughts with this pen, its still buggy but at least we can set the image(pattern) position and keep the original image when double click.
I'am not very good at javascript, So if you are interest in this please help to make this more useable, any discussions/thoughts or code correction is welcome.
http://codepen.io/wushan/pen/LRrQEL?editors=1010
// Create Canvas
var canvas = this.__canvas = new fabric.CanvasEx('c', {
preserveObjectStacking: true
});
fabric.Object.prototype.transparentCorners = false;
// Global Settings
var url = "http://fabricjs.com/assets/pug.jpg";
//Make the Pattern by url
function createMaskedImage(url) {
//Load Image
fabric.Image.fromURL(url, function(img) {
img.scaleToWidth(300);
//Make a Pattern
var patternSourceCanvas = new fabric.StaticCanvas();
patternSourceCanvas.add(img);
var pattern = new fabric.Pattern({
source: function() {
patternSourceCanvas.setDimensions({
width: img.getWidth(),
height: img.getHeight()
});
return patternSourceCanvas.getElement();
},
repeat: 'no-repeat'
});
console.log(pattern.offsetX)
console.log(pattern.offsetY)
console.log(img.getWidth()) // 縮小後 (*scale)
console.log(img.width) // 原尺寸
//Mask (can be any shape ex: Polygon, Circles....)
var rect = new fabric.Rect({
width: 200,
height: 200,
left: 150,
top: 100,
fill: pattern
})
//Bind Double Click Event from fabric.ext
//https://github.com/mazong1123/fabric.ext
rect.on('object:dblclick', function (options) {
//Pass pattern out
enterEditMode(rect, img);
});
canvas.add(rect);
canvas.setActiveObject(rect);
});
}
function enterEditMode(mask, image) {
image.left = mask.left;
image.top = mask.top;
// New Image
// Fake Crop Area (fixed)
var rect = new fabric.Rect({
width: mask.width,
height: mask.height,
left: mask.left,
top: mask.top,
fill: '#000000',
opacity: 0.8,
selectable: false
})
canvas.remove(mask);
canvas.add(image);
image.on('object:dblclick', function (options) {
//Flatten
flatten(rect, image);
});
canvas.add(rect);
// console.log(JSON.stringify(canvas));
}
function flatten(mask, image) {
//Make a Pattern
var patternSourceCanvas = new fabric.StaticCanvas();
patternSourceCanvas.add(image);
var pattern = new fabric.Pattern({
source: function() {
patternSourceCanvas.setDimensions({
width: image.getWidth(),
height: image.getHeight()
});
return patternSourceCanvas.getElement();
},
repeat: 'no-repeat'
});
//Offsets
pattern.offsetX = image.left - mask.left - image.left;
pattern.offsetY = image.top - mask.top - image.top;
var rect = new fabric.Rect({
width: mask.width,
height: mask.height,
left: mask.left,
top: mask.top,
fill: pattern
})
//Bind Double Click Event from fabric.ext
//https://github.com/mazong1123/fabric.ext
rect.on('object:dblclick', function (options) {
//Pass pattern out
enterEditMode(rect, image);
});
canvas.remove(mask);
canvas.remove(image);
canvas.add(rect);
canvas.setActiveObject(rect);
canvas.renderAll();
}
//Button Events
//Create
document.getElementById('createMaskedImage').addEventListener('click', function () {
createMaskedImage(url);
});
Test this :
click 'create'
double click on the image object
move/scale the image
double click the image to flatten the obejct.
Know issue:
when cutting the image without scale, the image position looks correct but there is a wired transparent space.
It generates a lot duplicate objects on the scene...
Original Post
I've been working with fabric.js for a few month, haven't seen any example or discussions about a mask/crop system which is behaves like canva.com ( which is way easy to understand for users. )
the object looks like this:
when double clicked on a group/mask, it shows the original image with an unselectable mask, you can move/scale the image whatever you need and click 'OK' to made the change without modifying the original image.
I'd like to know if there is any possible solutions about making this in fabricjs, or maybe some thoughts about this issue is welcome.
Thank you a lot !

App getting stuck after click on close button of window

I am creating one window in extjs 3. In window I have a panel in which I am including item with afterrender. I place some button on window including cancle. after clicking on window close button or cancel buttonMy app getting stuck. What will be the possible reason.
My Panel Code :
{
xtype: 'panel',
title : "Records",
bodyStyle: 'background: #dfe8f6;border:#dfe8f6;',
id:'AlteredRecord',
region: 'center',
layout:{
type: 'vbox',
pack: 'start',
align: 'stretch'
},
items:[],
listeners:{
afterrender: function(){
debugger;
var grid = Ext.getCmp('GRID');
var record = grid.getSelectionModel().getSelections();
var actionRecItemsLen = record.length;
var multirfchelper = Ext.getCmp('multirfchelper');
var rec = Ext.getCmp('AlteredRecord');
var recItem = rec.items.items;
var clsName = new Recordrfc(),
for(var i=0;i<actionRecItemsLen; i++){
var sub = record[i].data.USUB;
var clsName = new Recordrfc();
recItem.push(clsName);
this.doLayout();
}
}
},
}

c3.js tooltip - make static and style

I have a c3.js stacked barchart that updates when you hover over a Leaflet map, and I need the tooltip to be static as otherwise the user will hover over other areas of the map and change the data in the barchart, before actually reaching it. However, I'm new to coding and especially new to C3 and I can't get around how to make the tooltip static. Also, does anyone know how to style the tooltip later? I have only found very complex examples online, but it feels like I should be able to do it somewhere after I generate the chart.
Any help would be much appreciated!
Here is my code:
function getMiniChartData(properties) {
var values = [
['rape', rape[properties['gss_code']]],
['other sexual', other_sexual[properties['gss_code']]]];
console.log(values);
return values;
}
var chart;
function drawMiniChart(properties) {
console.log('drawing mini chart');
var data = getMiniChartData(properties);
chart = c3.generate({
bindto: '#minichart',
color: {
pattern: ['#E31A1C', '#BD0026']
},
point: {
show: false
},
tooltip: {
show: true
},
data: {
columns: data,
type: 'bar',
groups: [
['rape', 'other sexual']
]
},
axis: {
y: {
max:60,
min:0
}
},
grid: {
y: {
lines: [{
value: 0
}]
}
}
});
}
function updateMiniChartData(properties) {
console.log('updating mini chart');
var data = getMiniChartData(properties);
chart.load({
columns: data
});
}

Just edit the position in the tooltip :
position: function () {
var position = c3.chart.internal.fn.tooltipPosition.apply(this, arguments);
position.top = 0;
return position;
}
This will set the tooltip to always be at the top of the point. So it stays at the same y coordinate (top:0) but follows the points x value. You could go further and set it to stay at one position on the page.
Check this fiddle I have put together : http://jsfiddle.net/thatOneGuy/owhxgaqm/185/
This question will help you out : C3 charts - contents of tooltip clickable
If you want it visible all the time just add this code :
var originalHideTooltip = chart.internal.hideTooltip
chart.internal.hideTooltip = function () {
setTimeout(originalHideTooltip, 100)
};

How to add zoom in zoom out buttons in visjs using angularjs?

Need help in having a zoom in and zoom out button in visjs network graph using angularjs, I could not find any relevant options for this. Please help, I am also providing a plunker link as an example
Code
<vis-network data="data" options="options" height="100%"></vis-network>
$scope.options = {
autoResize: true,
height: '800',
width: '100%'
};

Take a look at the interaction, navigationButtons option. It has built in controls for zoom, pan and reset view.
You need to change your vis options to include navigationButtons: true and keyboard: true to have keboard shortcuts enabled
$scope.options = {
autoResize: true,
height: '600',
width: '100%',
interaction: {
navigationButtons: true,
keyboard: true
}
};
Check this plunker

I've never worked with plunker, so I can not integrated my solution into your example, but I've created a JSFiddle for it which is based on a simple network example from the visjs.org website.
Unfortunately there is no setScale(scale) method available right now, but you could extend the network until someone implements it.
var network;
var zoomstep = 0.3;
function zoomin() {
network.setScale(network.getScale() - zoomstep);
}
function zoomout() {
network.setScale(network.getScale() + zoomstep);
}
vis.Network.prototype.setScale = function (scale) {
var options = {
nodes: []
};
var range = this.view._getRange(options.nodes);
var center = this.view._findCenter(range);
var animationOptions = {
position: center,
scale: scale,
animation: options.animation
};
this.view.moveTo(animationOptions);
};
The vis.Network.setScale code was taken from the Network.js and View.js source code, based on what getScale() did. I had to redo some things which the methods View.fit, View._getRange and View._findCenter did but it's working good so far.

Updated solution for vis.js 4.21.0
vis.Network.prototype.zoom = function (scale) {
const animationOptions = {
scale: this.getScale() + scale,
animation: { duration: 300 }
};
this.view.moveTo(animationOptions);
};
Click handler code:
this.network.zoom(-0.5) // or 0.5 to zoom in