canvg

canvg and highcharts how to include chart legend and keep the chart size?

由 佐手、 提交于 2020-01-25 06:29:09
问题 I'm trying to use canvg to draw a highchart inside a canvas. the problem I have is that the chart legends dont appear in the canvas and also the size and quality is reduced. $('#container').highcharts({ credits: { enabled: false }, xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, series: [{ data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] }] }); function exportChart() { var svg = canvg(document

Convert Inline svg to canvas using canvg script

由 送分小仙女□ 提交于 2020-01-04 05:10:16
问题 I have this website: http://materialground.com/icon-maker I have this code above my body <symbol id="fa-flaticon-3" viewBox="0 0 512 512"> <path d="m512 247c0 118-87 216-200 233 1-5 2-11 1-16 0 0-1-6-2-14 41-6 77-25 105-51-1-2-3-3-5-6-7-11 3-22 3-32 0-9-20-9-20-15-3-22 13-22 22-30 8-9-9-28-20-27-11 1-41-5-39-28 4-29-36-27-42-40-8-19 6-43 24-49 25-7 51-28 49-52-3-26-14-50-34-64-21-8-43-13-66-14-20 0-38 5-37 14 2 23 67 29 56 51-6 11-49 27-41 44 6 11 19 1 14 22-2 10-11 28-24 29-13 1-24-34-60-35

leaflet+canvg+html2canvas = MyImage.png

由 给你一囗甜甜゛ 提交于 2019-12-24 16:39:50
问题 Good day my dear friends. I want to create png file from lealfet map. I use html2canvas library, and leaflet map tiles and other elemets converts to png greatfully, but not svg-elements(offsets). I know, that there is some code to redraw all svg elements to canvas( var canvas = L.canvas(); var map = new L.Map('map', {layers: [osm], preferCanvas: true}); but this is bad way for me, because, when I change extend all svg element flickers... So...How can I using CANVG convert leaflet svg polygons

When using canvg to convert Highchart SVG into PNG, all text appears twice - how to solve?

由 ☆樱花仙子☆ 提交于 2019-12-24 04:26:09
问题 Here's my (truncated) example SVG image (made with Highcharts, http://www.highcharts.com/ ) - when I render that onto a canvas (with canvg (https://github.com/gabelerner/canvg and code adapted from here: https://stackoverflow.com/a/8997520/2067690) all text in the resulting PNG is duplicated, meaning that it's output double, one piece of text immediately followed by the same text once again. How can I ensure it appears once only? <svg height="400" width="1170" version="1.1" xmlns="http://www

C3.js SVG visualization to Canvas with canvg - Line charts filled with black rectangles , “ERROR: Element 'parsererror' not yet implemented”

由 ぃ、小莉子 提交于 2019-12-23 09:12:23
问题 I am attempting to convert a SVG to Canvas using Canvg. Here is the jsfiddle. I get an error saying, "ERROR: Element 'parsererror' not yet implemented". I can understand that the canvg library is not able to parse the SVG element. But, Is there a solution to this problem ? I need to create a canvas element from svg element. <head> <link href="lib/c3.css" rel="stylesheet" type="text/css"> <script src="lib/jquery-2.1.4.min.js"></script> <script src="lib/d3.min.js" charset="utf-8"></script>

How to show multiple external svg graphics in a html5 canvas

由 青春壹個敷衍的年華 提交于 2019-12-13 04:37:02
问题 I have created a html 5 canvas and added some shapes using ctx.fillRect(X,Y,W,H); and some other javascript functions. Now i want to add a svg graphic in multiple places of that canvas. The reason i want to use a svg is the sharpness & quality of the image. I tried using drawImage method in HTML5 but the image i want to draw is doesn't give a very quality output when it's added to the canvas using drawImage method.No matter how high resolution image i use it makes a very low quality image.

Drawing a SVG file on a HTML5 canvas at a specific time

由 随声附和 提交于 2019-12-13 00:57:49
问题 I found the topic Drawing an SVG file on a HTML5 canvas about rendering SVG. Is there a way to draw SVG animated file at specific moment of time? I mean, how to change the code var img = new Image(); img.onload = function() { ctx.drawImage(img, 0, 0); // define time at here: time="1.3sec" } img.src = "myfile.svg"; such that img contains svg at specific time? The file myfile.svg contains the following: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" id="svg2"> <g transform=

Canvg not supporting css

由 拟墨画扇 提交于 2019-12-12 18:12:26
问题 I have inline svg with is loaded dynamically from server. I want that svg to be manupulated or modifed using inline css. I have searched for converting that modified svg into png or base64 image. After long search i have decided to stick with Canvg. Now the problem is that it renders the inline style attributes like background and border radius. This is my svg. <svg height="550" width="550" viewBox="0 0 512 512" id="svg"> <path d="m309 139c0-111-32-139-53-139-21 0-53 28-53 139l-173 122c-2 1-4

SVG to Image export performance issues (using canvg / XMLSerializer / getComputedStyle)

由 ￣綄美尐妖づ 提交于 2019-12-11 18:26:13
问题 I am using canvg to convert a chart svg to an image. We have the issue that by default not all CSS attributes are applied to the image so we ended up using getComputedStyle in a loop. This is a total mess under performance aspects if we have 10 or even 20 charts to be exported at once. var labels = ['2018-10-01', '2018-10-02', '2018-10-03', '2018-10-04', '2018-10-05', '2018-10-06', '2018-10-07', '2018-10-08', '2018-10-09', '2018-10-10', '2018-10-11', '2018-10-12', '2018-10-13', '2018-10-14',

Appending a div containing canvas is not working

由 南楼画角 提交于 2019-12-11 16:58:53
问题 I am making use of canvg to convert svg present in div into canvas(upto this it's working fine) and then copying the innerHTML of div to another div, but it's not working. Canvas is coming but nothing will be present in that canvas. Thanks in advance <div id="k"> <svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> Sorry, your browser does not support inline SVG. </svg> </div> <div id="kk"> <p>Watch me</p> </div> var svgTag = document
订阅 canvg