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,','');
});
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 need to convert amChart into an image using canvas. By using the following code:
$(function() {
$("#btnSave").click(function() {
html2canvas($("#widget"), {
onrendered: function(canvas) {
theCanvas = canvas;
document.body.appendChild(canvas);
// Convert and download as image
Canvas2Image.saveAsPNG(canvas);
$("#img-out").append(canvas);
// Clean up
//document.body.removeChild(canvas);
}
});
});
});
But there is problem in the generated image, see the following svg chart in html page
while the generated image:
I am using html5 and javascript. I want to remove the transparency background from a png image, Which is form of imagedata base 64 code. I want only the text from the transparent image.
Screen Shot:
Javascript code:
$contextDialog.find('.fpd-change-text').click(function () {
console.log("after click");
thisClass.setElementParameters(currentElement, {text: this.value});
var a = this.value + 1;
var canvas = document.getElementById('canvas22');
// canvas.fillText(this.value, 0, 10);
canvas.fillText = this.value;
var text = canvas.toDataURL("image/png");
window.imgTextVarun = canvas.toDataURL("image/png");
});
Html Code:
<canvas id="canvas22"></canvas>
In the Javascript code I have a text variable containing the base64 code of the image.
I asked a similar question earlier:
https://stackoverflow.com/questions/34587252/canvas-convert-into-transparent-image-but-text-should-not-transparent
I only want the same text from image. Please give me some idea.
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.
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()}' />"