将 svg 转换为画布并获取 base64 字符串（canvg）答案

【问题标题】：Converting svg to canvas and get the base64 String (canvg)将 svg 转换为画布并获取 base64 字符串（canvg）
【发布时间】：2014-05-04 19:10:32
【问题描述】：

我们在 Java 中使用带有 canvg https://code.google.com/p/canvg/ 的本机方法将 SVG 字符串转换为画布到 png 图像。我们需要一个 renderCallback，因为 SVG 字符串中的图像需要时间来渲染，否则我们会得到一个错误的构造。我们的代码是：

private native String PNGExport(String SVGString)/*-{

    var canvas = $doc.createElement('canvas');
    canvas.id = "testcanvas";

    var img;
    $wnd.canvg(canvas, SVGString, {
        renderCallback : function() {
            img = canvas.toDataURL("image/png");
            var window = $wnd.open();
            window.document.write('<img src="' + img + '"/>');
        },
    });
    return img;

}-*/;

因此将在浏览器中打开一个包含正确 png 图像的选项卡。但是有没有可能得到这个 String img = canvas.toDataURL("image/png");在回调之外工作？我唯一能想到的就是在 function() 中调用一个 Java 方法，它将 img var 作为参数。希望有更好的解决方案。

【问题讨论】：

标签： java javascript svg callback canvg

【解决方案1】：

我们通过调用java方法解决了：

private native void PNGExport(String SVGString)/*-{

    var canvas = $doc.createElement('canvas');
    canvas.id = "testcanvas";
    var theInstance = this;

    var img;
    $wnd.canvg(canvas, SVGString, {
        renderCallback : function() {
            img = canvas.toDataURL("image/png");

            ( function b(p) {
    theInstance.@de.user.client.component.graphic.UsERGraphicEditor::saveMedium(Ljava/lang/String;)(p);
})(img);
        },
    });

}-*/;

您必须通过方法的路径调用该函数。希望对你有帮助。

【讨论】：