Develop Reference

How to export SVG as PNG using canvg.js and Canvas

We are trying to export SVG picture as PNG using canvg.js but when we click the button "Take a screenshot" the console shows error "vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in v-on handler: "ReferenceError: SVG2PNG is not defined"". Here is the button that calls function "tipka()", I followed this example: "https://jsgao0.wordpress.com/2016/06/02/export-svg-as-png-using-canvg-js-and-canvas/".
<input id='downloadBtn' #click="tipka()" type='button' style="margin-top:500px; position:absolute" value='Download'/>
Here is the script file:
import Canvg from "canvg";
export default {
methods: {
SVG2PNG(svg, callback) {
var canvas = document.createElement("canvas"); // Create a Canvas element.
var ctx = canvas.getContext("2d"); // For Canvas returns 2D graphic.
var data = svg.outerHTML; // Get SVG element as HTML code.
canvg(canvas, data); // Render SVG on Canvas.
callback(canvas); // Execute callback function.
},
generateLink(fileName, data) {
var link = document.createElement("a");
link.download = fileName;
link.href = data;
return link;
},
tipka() {
var element = document.getElementById("svg-01"); // Get SVG element.
SVG2PNG(element, function (canvas) {
// Arguments: SVG element, callback function.
var base64 = canvas.toDataURL("image/png"); // toDataURL return DataURI as Base64 format.
generateLink("SVG2PNG-01.png", base64).click(); // Trigger the Link is made by Link Generator and download.
});
},
},
};

You don't need to put SVG2PNG in the exported methods object (and indeed you shouldn't, in this case, to be able to access it with just SVG2PNG()).
The same goes for generateLink.
Instead, you should be fine with just
import Canvg from "canvg";
function SVG2PNG(svg, callback) {
var canvas = document.createElement("canvas"); // Create a Canvas element.
var ctx = canvas.getContext("2d"); // For Canvas returns 2D graphic.
var data = svg.outerHTML; // Get SVG element as HTML code.
Canvg(canvas, data); // Render SVG on Canvas.
callback(canvas); // Execute callback function.
}
function generateLink(fileName, data) {
var link = document.createElement("a");
link.download = fileName;
link.href = data;
return link;
}
export default {
methods: {
tipka() {
var element = document.getElementById("svg-01"); // Get SVG element.
SVG2PNG(element, function (canvas) {
// Arguments: SVG element, callback function.
var base64 = canvas.toDataURL("image/png"); // toDataURL return DataURI as Base64 format.
generateLink("SVG2PNG-01.png", base64).click(); // Trigger the Link is made by Link Generator and download.
});
},
},
};

Double title of chart in html2canvas

Html2canvas is really cool but:
The function is "simple":
$scope.generateScreenshot = function () {
html2canvas($("#screen-shot"), {
onrendered: function(canvas) {
// canvas is the final rendered <canvas> element
var myImage = canvas.toDataURL("image/png");
window.open(myImage);
}
});
}
Any ideas why there is an issue with rendering title ?

html2canvas not work in ie9

I want to convert div to canvas and in chrome it works good but in IE9 it convert it but not good- its cut the div content and change the order of div elements.
witch js should i download that work well in IE9 too?
Someone have any idea how can I resolve this resolution problem?
my js code:
$scope.canvastoimage = function () {
html2canvas($("#mytryapp"), {
proxy: "server.js",
useCORS: true,
onrendered: function(canvas) {
document.body.appendChild(canvas);
$("#img-out").append(canvas);
$("#mytryapp").hide();
printthispage();
}
});
}
The result is attached:
Thanks!

This code works well in all browsers
html2canvas([document.getElementById(mytryapp)], {
onrendered: function (canvas) {
var imageData = canvas.toDataURL('image/png',1.0);
document.getElementById('img-out')[0].innerHTML = imageData;
}
});
Test it and see how it goes. The index 0 is used with jQuery objects to get "real" document element so if you are not using jquery change to this:
html2canvas([document.getElementById(mytryapp)], {
onrendered: function (canvas) {
var imageData = canvas.toDataURL('image/png',1.0);
document.getElementById('img-out').innerHTML = imageData;
}
});

Duplicate text in svg with html2canvas

I have the plunkr http://plnkr.co/edit/jdAYlcfO5GDru0MMa2fM?p=preview
$.fn.canvas = function(options){
var hids = $(this).find(':hidden');
source = $(this).get(0);
html2canvas(source, {
onrendered: function(canvas) {
document.body.appendChild(canvas);
}
});
};
After click on save, text inside svg get printed twice.
Thats not what desired.
How to fix it?

Use
document.body.replaceChild(document.body,canvas);

Image animate function not working in fabric js?

I am using fabric js for canvas animation and I am created canvas with id 'canvas' then put image in it and set left position to zero. It's working fine but animate function is not working.
Please help me.
My code:
HTML:
<canvas id="canvas" width="990" height="285">
This text is displayed if your browser
does not support HTML5 Canvas.
</canvas>
javascript:
var canvas = new fabric.Canvas('canvas');
var image = new Image();
image.src = 'images/body.png';
var bugBody = fabric.Image.fromURL(image.src, function (oImg) {
canvas.add(oImg);
oImg.set('left',0)
});
bugBody.animate('left', 200, {
onChange: canvas.renderAll.bind(canvas)
});
Thanking You.

I think that this happen because your image is not complete loaded.
So, you can put your animation code inside your callback function.
Check this jsfiddle: http://jsfiddle.net/9x9Qc/
Like this:
var srcImg = "http://fabricjs.com/lib/pug.jpg";
// canvas
var canvas = new fabric.Canvas('c');
fabric.Image.fromURL(srcImg, function (oImg) {
canvas.add(oImg);
oImg.set('left',0);
oImg.set('top', 100);
oImg.scale(.25);
canvas.renderAll();
// and then, we can animate the image
oImg.animate('left', 200, {
onChange: canvas.renderAll.bind(canvas)
});
});