I'm trying to send a canvas as an image to my server and I want to send as base64.
Fabricjs offers using canvas.toSVG() or canvas.toDataURL({format: 'image/png'}) to convert the canvas to an image however the output on my log appears to be a Klass object (first time seeing that) and upon sending that object to the server and logging what's received on the server I get an empty object or a path i.e:
{ version: '2.0.0-rc.3', objects: [] }
{ version: '2.0.0-rc.3',
objects:
[ { type: 'path',
version: '2.0.0-rc.3',
originX: 'left',
originY: 'top',
left: 156.21249771118164,
top: 221.20000457763672,
width: 132,
height: 53,
fill: null,
stroke: 'Red',
strokeWidth: 10,
strokeDashArray: null,
strokeLineCap: 'round',
strokeLineJoin: 'round',
strokeMiterLimit: 10,
scaleX: 1,
scaleY: 1,
angle: 0,
flipX: false,
flipY: false,
opacity: 1,
shadow: null,
visible: true,
clipTo: null,
backgroundColor: '',
fillRule: 'nonzero',
paintFirst: 'fill',
globalCompositeOperation: 'source-over',
transformMatrix: null,
skewX: 0,
skewY: 0,
path: [Object] } ] }
Klass object console image:
My code:
var canvas = new fabric.Canvas();
canvas.loadFromJSON(val[i].story); //val has saved canvas
canvas.toSVG(); //or to dataURL()
I tried this and still the same klass object, need to convert the canvas to base64 image (png preferred) and send to the server where I'll be converting to an image file, thanks.
I was missing the id of the canvas when creating the canvas hence
var canvas = new fabric.Canvas('canvasID');
Related
I am using highcharts and a phantomjs server to render charts and labels but the useHTML flag while rendering the labels does not seem to be working. I started the server as mentioned in the docs
phantomjs highcharts-convert.js -host 127.0.0.1 -port 3003
and then I am sending post requests with the following as the infile
{
chart: {
events: {
load: function() {
var label = this.renderer.label('Hello World', useHTML=true)
.css({
color: '#FF11FF',
fontSize: '12px'
})
.attr({
fill: 'rgba(0, 0, 100, 0.75)',
padding: 8,
r: 5,
zIndex: 6
})
.add()
box = label.getBBox();
label.align(Highcharts.extend(box, {
align: 'center',
verticalAlign: 'top',
x: 0,
y: 20
}),
null, 'spacingBox');
var label2 = this.renderer.label('Goodbye World')
.css({
color: '#222222'
})
.add()
label2.align(Highcharts.extend(label2.getBBox(), {
align: 'left',
verticalAlign: 'top',
x: 0,
y: box.height + 40
}),
null, 'spacingBox');
}
},
height: 800,
width: 500
},
title: {
text: ''
}
};
I am then exporting this as an svg, but the text for the label gets printed as it is. I also tried
var label = this.renderer.label('Hello World',null, null, 'rect', null, null, true)
but this leads to the first text not being displayed at all, the blue background gets added and so does the second text but not the first text. The first one is not even working on export.highcharts.com but the second one works fine over there. What am I doing wrong here ?
Renderer.label takes more arguments than you provided, docs:
http://api.highcharts.com/highcharts/Renderer.label
Example:
this.renderer.label('Hello World',null,null,null,null,null,true)
Your fiddle with proper use of Renderer.label:
https://jsfiddle.net/6atnc2xj/
im use this http://projects.calebevans.me/jcanvas/
and im have simple example
<input type="button" class="bt" value="draw"/><br>
<canvas id="picture" width=1350 height=1350></canvas>
and js
var canvas = document.getElementById("picture");
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = "tank_usa.jpg";
img.onload = function(){
ctx.drawImage(img, 0, 0);
}
$(".bt").on("click",function(){
// Draw a resizable image
$('#picture').addLayer({
type: 'image',
draggable: true,
source: 'facesSmall.png',
fillStyle: '#fff',
strokeStyle: '#c33',
strokeWidth: 2,
x: 180, y: 150,
width: 200, height: 125,
handle: {
type: 'arc',
fillStyle: '#fff',
strokeStyle: '#c33',
strokeWidth: 2,
radius: 10
}
})
.drawLayer();
})
if im click on button bt,and hover canvas div, my background disappears
how i can do what new image draw over background
Your background gets erased because you are using ctx.drawImage, which does not create a jCanvas layer. jCanvas layers and non-layers cannot exist on the same canvas, because when jCanvas redraws the canvas (manually via drawLayers() or automatically when events are triggered), non-layers will be erased.
To fix this, simply draw "tank_usa.jpg" like you drew 'facesSmall.png': using addLayer with type: 'image' set.
$('#picture').addLayer({
type: 'image',
source: 'tank_usa.jpg',
x: 0, y: 0,
fromCenter: false
});
$(".bt").on("click",function(){
// Draw a resizable image
$('#picture').addLayer({
type: 'image',
draggable: true,
source: 'facesSmall.png',
fillStyle: '#fff',
strokeStyle: '#c33',
strokeWidth: 2,
x: 180, y: 150,
width: 200, height: 125,
handle: {
type: 'arc',
fillStyle: '#fff',
strokeStyle: '#c33',
strokeWidth: 2,
radius: 10
}
})
.drawLayer();
});
i need an input type range in canvas for some purposes, i need to use that to change my fontsize. I already make the shape and also drag able, but the circle controller go beyond the line.
Just preview the bin to see what i mean. Jsbin
i want to limit the draging area to the line only like the input range works.
This is the documentation of KonvaJs library.
this is working, coded by Lavrton
Source
var width = window.innerWidth;
var height = window.innerHeight;
var stage = new Konva.Stage({
container: 'container',
width: width,
height: height
});
var layer = new Konva.Layer();
var Track = new Konva.Line({
x: 44,
y: 55,
points: [60, 0, 0, 0, 0, 0, 0, 0],
stroke: '#BDC3C7',
strokeWidth: 6,
visible: true,
name: 'TrackLine',
lineCap: 'sqare',
lineJoin: 'sqare'
});
var TrackBall = new Konva.Circle({
x: 44,
y: 55,
stroke: '#D35400',
fill: '#ddd',
strokeWidth: 2,
name: 'TrackControl',
radius: 8,
draggable: true,
dragOnTop: false,
visible: true,
dragBoundFunc: function(pos) {
console.log(pos.x, Math.min(44, pos.x))
return {
x: Math.min(104, Math.max(44, pos.x)),
y: this.getAbsolutePosition().y
};
}
});
layer.add(Track);
layer.add(TrackBall);
stage.add(layer);
<script src="https://cdn.rawgit.com/konvajs/konva/0.10.0/konva.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container" class="CanCont"></div>
Having issues with the Knockout-Kendo radial gauge in my application.
I'm trying to initialize it via the data-bind property, but it does not appear to be resizing itself correctly.
<div id="speedGauge" data-bind="kendoRadialGauge: $parent.speedGaugeOptions"></div>
...
self.speedGaugeOptions = {
renderAs: 'svg',
value: 0,
gaugeArea: {
background: 'transparent'
},
pointer: {
color: 'lightgray',
animation: {
speed: 100
}
},
scale: {
minorUnit: 75,
majorUnit: 150,
startAngle: -40,
endAngle: 220,
max: 300,
min: -300,
labels: {
position: 'inside',
font: '10px Arial,Helvetica,sans-serif'
},
ranges: [
{
from: -300,
to: -200,
color: "darkgray"
},
{
from: 300,
to: 200,
color: "darkgray"
}
],
rangeSize: 5,
rangeDistance: -5,
rangePlaceholderColor: '#f2f2f2'
}
Here comes the fun part;
When the page has activated (using durandal), the gauges are drawn like this:
In order for the gauge to scale correctly and fit inside the gray circle, I have to redraw it like this (either from the browser console, or in the .js file):
$("#speedGauge").data("kendoRadialGauge").redraw()
When doing so, my gauge looks the way it's suppose to;
Now, I've tried creating it using the regular Kendo implementation - and that works just fine resulting in the gauge to be drawn correctly like in the image above;
<div id="speedGauge"></div>
...
self.activate = function () {
createGauge();
}
...
function createGauge() {
$("#speedGauge").kendoRadialGauge({
renderAs: 'svg',
value: 0,
gaugeArea: {
background: 'transparent'
},
pointer: {
color: 'lightgray',
animation: {
speed: 100
}
},
scale: {
minorUnit: 75,
majorUnit: 150,
startAngle: -40,
endAngle: 220,
max: 300,
min: -300,
labels: {
position: 'inside',
font: '10px Arial,Helvetica,sans-serif'
},
ranges: [
{
from: -300,
to: -200,
color: "darkgray"
},
{
from: 300,
to: 200,
color: "darkgray"
}
],
rangeSize: 5,
rangeDistance: -5,
rangePlaceholderColor: '#f2f2f2'
}
});
}
Does anyone have an idea of what might be wrong here?
A colleague suggested to do a forced redraw of the gauges on durandals attached event, which solved the problem for now. The actual resizing of the gauge is not visible with this solution.
self.attached = function(element) {
$(element).find("[data-role='radialgauge']").each(function () { $(this).data("kendoRadialGauge").redraw(); });
};
I've reported the issue here.
I have a sprite which has name property.
I want to find that sprite during run time and then change the animation of that.
I tried this :-
myKineticGroup.find('.myspriteName').setAnimation('set_new_animation');
I got following error : (Object [object Object] has no method 'setAnimation').
I typed this myKineticGroup.find('.myspriteName') in my console, there i am getting the sprite object.
If your "myspriteName" element is an shape or blob, give it an ID and you can access it after. Like this:
var rect = new Kinetic.Rect({
x: 300,
y: 90,
width: 100,
height: 50,
fill: 'green',
strokeWidth: 3,
offset: {
x: 50,
y: 25
},
draggable: true,
id: 'myspriteName'
});
stage.find('#myspriteName')[0].setAnimation('set_new_animation');
To access the sprite by its name we can use this:
stage.find('.myspriteName')[0].setAnimation('set_new_animation');