Original SVG Chart
Rendered Canvas Chart
This is the code I am using to convert to canvas
svg = $('svg').parent().html()
canvg('canvas', svg)
canvas = document.getElementById("canvas")
img_PNG = "<img src='#{canvas.toDataURL()}' />"
$('.chart').html(img_PNG)
Kindly help in sorting out this issue.
Pass the canvas element to canvg
svg = $('svg').parent().html()
canvas = document.getElementById("canvas")
canvg(canvas, svg)
img_PNG = "<img src='#{canvas.toDataURL()}' />"
$('.chart').html(img_PNG)
The fact that only the bars are missing..i assume u have applied some animation to the bars..and svg is getting attached to the canvas before the animation..try to apply this code after animation and not before
img_PNG = " < img src='#{canvas.toDataURL()}' />"
Related
I am new to fabric.js, I want to create a circle using fabric and render it on canvas I have done the following code. But this code generates an Oval shaped figure which is not a perfect circle, Please let me know why is this happening.
this.canvasIns = new fabric.Canvas('mySampleCanvas');
var myCircle = new fabric.Circle({
radius:50,
borderColor: 'black',
fill:'#fff'
});
this.canvasIns.add(myCircle);
this.canvasIns.renderAll();
I found the problem due to which I was facing the issue. It was happening because I was dynamically changing the height, width of the canvas using the following code.
Due to which the issue was occurring.
var canvasElement = this.myCanvas.nativeElement;
canvasElement.style.height = canvasElement.nextElementSibling.style.height = this.canvas_css.height;
canvasElement.style.width = canvasElement.nextElementSibling.style.width = this.canvas_css.width;
canvasElement.style.left = canvasElement.nextElementSibling.style.left = this.canvas_css.left;
canvasElement.style.top = canvasElement.nextElementSibling.style.top = this.canvas_css.top;
I removed this code and gave static style to the canvas and its working fine.
Check that the height and width off your html attributes and css are the same. If you use CSS to set the size of the canvas the canvas will be stretched not resized to the CSS Values.
Example:
- Canvas Size: 500:500, your circle: 100:100
- CSS Size: 1000:500
- Canvas size on screen: 1000:500, your circle: 200:100
In my case I solved the problem by adding a <div> around the canvas generated by fabric.js to get the desired width and height values and then setting the canvas size with javascript on pageload:
Html:
<div id="drawingArea">
<canvas id="canvas" class="canvas-layer" height="500" width="500"></canvas>
</div>
Javascript:
var canvas = new fabric.Canvas('canvas');
$(window).on('load', function (e) {
canvas.setHeight($('#drawingArea').height());
canvas.setWidth($('#drawingArea').width());
});
I am using "html2canvas" + to change html chart to image. when bars are having black color style its gets converted fine. but when html bars having gradient CSS it does not converted. Attaching screenshots here.
html2canvas(elementDom, {[enter image description here][1]
onrendered: function (canvas) {
getCanvas = canvas;
var imgageData = getCanvas.toDataURL("image/png");
var newData = imgageData.replace('data:image/png;base64,','');
});
I would like to be able to create a div and give it a height, width, and class. Then add the div to a Cesium map as a billboard.
I can create billboards with images and labels and also found this link about how to use an svg, but I am having trouble figuring out how to make the billboard contain dynamically produced html. The project this is in uses class names to apply font icons to divs.
Is there a way to insert the html into a billboard? Or is there another class that would be better suited for this? I am new to Cesium and am open to suggestions.
Billboards are intended to display rasterized data such as images. If you want to render html to one you must create an canvas element, draw the dom elements to it, then pass that canvas to the billboard as it's image property.
If you actually only need to have an icon/image visible and then display some HTML when the user clicks on it, than you should use Entity API to create your Billboard. You are provided with additional properties such as 'description' when you use the Entity API. The description can be a static HTML string or a Callback Property which can be updated as often as necessary. Descriptions are shown when the user picks the entity, usually via mouse click, but can be done programmatically via the viewer.trackedEntity property.
You can run this in Sandcastle or Codepen
var viewer = new Cesium.Viewer('cesiumContainer');
var canvas = document.createElement('canvas');
canvas.width = 300;
canvas.height = 300;
var svgString = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">' +
'<foreignObject width="100%" height="100%">' +
'<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px; color: #FF0">' +
'<em>I</em> like' +
'<span style="color:white; text-shadow:0 0 2px blue;">' +
'Cupcakes</span>' +
'</div>' +
'</foreignObject>' +
'</svg>';
var image = new Image();
image.src = 'data:image/svg+xml;base64,' + window.btoa(svgString);
//Need to wait for image to load before proceeding to draw
image.onload = function() {
canvas.getContext('2d').drawImage(image, 0, 0);
viewer.entities.add({
id: 'Cupcake SVG',
position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
billboard: {
image: canvas
},
description: '<p>This is a cupcake that can be modified.</p>'
});
};
I am trying to load an SVG file in canvas using fabric.js:
svg_url2 = "http://localhost/fabric/bozza biglietto-03.svg";
canvas = new fabric.Canvas('canvas');
fabric.loadSVGFromURL(svg_url2, function(objects) {
canvas.add.apply(canvas, objects);
canvas.renderAll();
The SVG file has an inline image which is rescaled, but when it loads in canvas the image is rendered at its original size.
If I paste the same SVG in the kichensink demo, it's displayed with ist correct dimensions. Am I missing something?
The SVG:
SVG image
Try this:
fabric.loadSVGFromURL(svg_url2, function(objects, options) {
var obj = fabric.util.groupSVGElements(objects, options);
canvas.add(obj).renderAll();
});
I should work.
In my html I have an image already loaded:
<img usemap="#prototypeMap" src="../../projects/tcas/TCAS display.jpg" style="z-index: 2;">
Is it possibile create a canvas to modify that image, by javascript?
For example drawing a line in it, changing colours in it (for some pixels) and so on...
EDIT:
I have found a method on Internet but it doesn't works good for me:
var imgElement = document.getElementById('prototypeMap');
var canvas = document.createElement("canvas");
canvas.width = imgElement.offsetWidth;
canvas.height = imgElement.offsetHeight;
var ctx = canvas.getContext("2d");
ctx.drawImage(imgElement,0,0); //ERROR
The last line give me this error:
TypeError: Value could not be converted to any of: HTMLImageElement, HTMLCanvasElement, HTMLVideoElement.
You can try using SVG image tag:
https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_Image_Tag
And then use the other SVG elements to draw on top.