How to use canvg - 7 common examples

To help you get started, we’ve selected a few canvg examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github alexadam / printable-mockups / client / svg-pdf.js View on Github external
const addSVG = (doc, paperData, svgData, pixelToMMFactor) => {
    let canvasElem = document.createElement('canvas')
    canvasElem.width  = svgData.size.width;
    canvasElem.height = svgData.size.height;

    canvg(canvasElem, svgData.svgAsText, {
        // ignoreClear: true,
        // ignoreDimensions: true,
        // scaleWidth: canvasElem.width  ,
        // scaleHeight: canvasElem.height  ,
        // forceRedraw: () => true
    });
    let imgData = canvasElem.toDataURL("image/jpeg", 1);

    doc.addImage(imgData, 'PNG',
        (svgData.size.left - paperData.containerOffsetX) * pixelToMMFactor,
        (svgData.size.top - paperData.containerOffsetY) * pixelToMMFactor,
        svgData.size.width  * pixelToMMFactor,
        svgData.size.height * pixelToMMFactor
    );
}
github sutaking / electron-draw-sequence-diagram / app / app.jsx View on Github external
downloadImage() {
        console.log('-- downloadImage --');
        
        let svgText = ReactDOM.findDOMNode(this.svgDom).childNodes[0].outerHTML;
        canvg('canvas', svgText);
        let buffer = canvasBuffer(canvas, 'image/png');
        let imageName = path.join(downloadsFolder(), '/image.png');
        
        fs.writeFile(imageName, buffer, () => {
            console.log(imageName);

            this.setState({
                infoText: `Download file: ${imageName} successful.`
            });            
        });

    }
github TargetProcess / tauCharts / plugins / export-to.js View on Github external
var style = createStyleElement(res);
                        var div = document.createElement('div');
                        chart.fire('beforeExportSVGNode');
                        var svg = chart.getSVG().cloneNode(true);
                        chart.fire('afterExportSVGNode');
                        div.appendChild(fixSVGForCanvgCompatibility(svg));
                        d3.select(svg)
                            .attr('version', 1.1)
                            .attr('xmlns', 'http://www.w3.org/2000/svg');
                        svg.insertBefore(style, svg.firstChild);
                        this._renderAdditionalInfo(svg, chart);
                        this._addBackground(svg, this._backgroundColor);
                        var canvas = document.createElement('canvas');
                        canvas.height = svg.getAttribute('height');
                        canvas.width = svg.getAttribute('width');
                            canvg(
                                canvas,
                                svg.parentNode.innerHTML,
                                {
                                    renderCallback: function (dom) {
                                        var domStr = (new XMLSerializer()).serializeToString(dom);
                                        var isError = (domStr.substring(0, 5).toLowerCase() === '<html');
                                        if (isError) {
                                            Taucharts.api.globalSettings.log('[export plugin]: canvg error', 'error');
                                            Taucharts.api.globalSettings.log(domStr, 'error');
                                        }
                                        callback(null, canvas.toDataURL('image/png'));
                                    }
                                });
                    } catch (err) {
                        callback(err, null);
                    }
github WISE-Community / WISE / src / main / webapp / wise5 / components / graph / graphController.js View on Github external
snipGraph($event) {
    const chart = this.getChartById(this.chartId);
    const svgString = chart.getSVG();
    const hiddenCanvas = document.getElementById(this.hiddenCanvasId);
    canvg(hiddenCanvas, svgString, { renderCallback: () => {
        const base64Image = hiddenCanvas.toDataURL('image/png');
        const imageObject = this.UtilService.getImageObjectFromBase64String(base64Image);
        this.NotebookService.addNote($event, imageObject);
      }
    });
  }
github WISE-Community / WISE / src / main / webapp / wise5 / components / graph / graphController.es6 View on Github external
snipGraph($event) {
    const chart = $('#' + this.chartId).highcharts();
    const svgString = chart.getSVG();
    const hiddenCanvas = document.getElementById(this.hiddenCanvasId);
    canvg(hiddenCanvas, svgString, { renderCallback: () => {
        const base64Image = hiddenCanvas.toDataURL('image/png');
        const imageObject = this.UtilService.getImageObjectFromBase64String(base64Image);
        this.NotebookService.addNote($event, imageObject);
      }
    });
  }
github kwokwilliam / react-resume-pdf / src / App.js View on Github external
arr.forEach((d, i) => {
                let htmlString = ReactDOMServer.renderToStaticMarkup(
                    <FontAwesomeIcon icon={d.icon} size={"3x"} style={{ color: '#005696', height: '500px', width: '500px' }} />
                );
                canvg(canv, htmlString);
                d.icon = canv.toDataURL("image/png");
            });
            this.setState({});
github apache / incubator-dolphinscheduler / dolphinscheduler-ui / src / js / conf / home / pages / dag / _source / plugIn / downChart.js View on Github external
svgElem.each((index, node) => {
      let parentNode = node.parentNode
      let svg = node.outerHTML.trim()
      let canvas = document.createElement('canvas')
      canvg(canvas, svg)
      if (node.style.position) {
        canvas.style.position += node.style.position
        canvas.style.left += node.style.left
        canvas.style.top += node.style.top
      }
      nodesToRecover.push({
        parent: parentNode,
        child: node
      })
      parentNode.removeChild(node)
      nodesToRemove.push({
        parent: parentNode,
        child: canvas
      })
      parentNode.appendChild(canvas)
    })

canvg

JavaScript SVG parser and renderer on Canvas.

MIT
Latest version published 5 months ago

Package Health Score

84 / 100
Full package analysis

Popular canvg functions