canvg不工作与svg已经放置在身体？ [英] canvg doesn't work with svg already placed in body?

问题描述

我想将 SVG 转换为 CANVAS ，然后将其另存为图片。我有svg已经genereated通过javascript在我的页面。我使用这个代码：

I want to converty my SVG into CANVAS and then save it as image. I have svg already genereated by javascript in my page. I use this code:

$("#menu-save-image").click(function () {
    var svg = document.getElementsByTagName('svg');
    var canvas = document.getElementById("test");
    canvg(canvas, svg);

    // or second way
    var c = document.getElementById('test');
    var ctx = c.getContext('2d');
    ctx.drawSvg(svg, 0, 0, 500, 500);


});

两种方法都不起作用。为什么？

Both ways doesn't work. Why?

推荐答案

canvg方法需要SVG源字符串（或url或XMLDocument），因此您应该将svg元素转换为svg源使用像这样的XMLSerializer。

canvg method needs SVG source string (or url or XMLDocument), so you should convert the svg element to svg source by using XMLSerializer like this.

var svg = document.querySelector('svg');
var serializer = new XMLSerializer();
var svgString = serializer.serializeToString(svg);
var canvas = document.getElementById("test");
canvg(canvas, svgString);

请参阅 https://code.google.com/p/canvg/source/browse/trunk/canvg.js

这篇关于canvg不工作与svg已经放置在身体？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！