We are attempting to convert an SVG image to PNG using canvg.js, but upon clicking the button labeled "Take a screenshot", an error is displayed in the console stating "vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in v-on handler: "ReferenceError: SVG2PNG is not defined"". The button triggers the function "tipka()", following the example provided at .
<input id='downloadBtn' @click="tipka()" type='button' style="margin-top:500px; position:absolute" value='Download'/>
Below 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.
});
},
},
};