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

Question

We use in Java a native method with canvg https://code.google.com/p/canvg/ to convert a SVG String to canvas to a png image. By that we need a renderCallback, because Images in the SVG String need time to be rendered, otherwise we get a wrong construct. Our code is:

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;

}-*/;

So a tab containing the correct png image will be opened in the browser. But is there any possibility to get this String img = canvas.toDataURL("image/png"); working outside of the callback? The only thing I can imagine is to call a Java method inside of the function(), which gets the img var as parameter. I hope there is a better solution.

score 0 · Answer 1 · answered Apr 01 '14 at 21:03

We solved it by calling the java method:

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);
        },
    });

}-*/;

You have to call the function by the path of your method. I hope it helps.

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

1 Answers1