将svg转换为画布并获得base64字符串(画布)

Converting svg to canvas and get the base64 String (canvg)

本文关键字：base64 字符串 画布 转换 svg      更新时间：2023-09-26

我们在Java中使用canvas 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图像的选项卡。但是是否有可能得到这个字符串img = canvas.toDataURL("image/png");在回调之外工作?我能想到的唯一方法是在函数()中调用Java方法，它将img var作为参数。我希望有更好的解决办法。

我们通过调用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);
        },
    });
}-*/;

必须通过方法的路径调用函数。

相关文章：