使用 Canvas 在 GWT 中将 SVG 转换为 PNG

Question

如何使用 Canvas (gwt-canvas-0.4.0.jar)

在 GWT 中将内联 SVG 图像转换为 PNG 图像

Answer 1

import com.google.gwt.canvas.client.Canvas;
import com.google.gwt.canvas.dom.client.Context2d;
import com.google.gwt.dom.client.ImageElement;
import com.google.gwt.event.dom.client.LoadEvent;
import com.google.gwt.event.dom.client.LoadHandler;
import com.google.gwt.user.client.ui.Image;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.rcharts.client.category.CategoryDataTable;
import com.rcharts.client.category.line.LineChart;

public class ConvertSvgToPngRaphelChart {

public LineChart drawChart() {

    CategoryDataTable<Double> dataTable = new CategoryDataTable<Double>();

    /**Making some random data **/
    double[] aus = { 20, 10, 10, 20, 30, 40 };
    double[] bul = { 15, 25, 15, 45, 55, 45 };
    double[] den = { 25, 35, 25, 35, 60, 35 };
    double[] gre = { 30, 5, 33, 33, 35, 60 };

    double[][] data = { aus, bul, den, gre };
    String[] cat = { "2001", "2002", "2003", "2004", "2005", "2006" };
    String[] ser = { "Austria", "Bulgaria", "Denmark", "Greece" };
    /**Random Data Made**/

    for (int i = 0; i < cat.length; i++) {
        for (int j = 0; j < ser.length; j++) {

            dataTable.add(data[j][i], cat[i], ser[j]);
        }
    }

    LineChart chart = new LineChart(950, 400);
    chart.setDataTable(dataTable);
    return chart;
}

public void onModuleLoad() {
    LineChart lineChart = drawChart();

    String svgInnerHTML = lineChart.getElement().getInnerHTML();
    String urlSVGMore = "data:image/svg+xml;base64," + base64encode(svgInnerHTML);

    final Image svgBase64EncodedImage = new Image(urlSVGMore);
    svgBase64EncodedImage.setWidth("900");
    svgBase64EncodedImage.setHeight("350");

    svgBase64EncodedImage.addLoadHandler(new LoadHandler() {

        @Override
        public void onLoad(LoadEvent event) {

            Canvas canvas = Canvas.createIfSupported();

            if (canvas == null) {
                RootPanel.get().add(new Label("Sorry, your browser doesn't support the HTML5 Canvas element"));
                return;
            }
            canvas.setWidth("900px");
            canvas.setCoordinateSpaceWidth(900);
            canvas.setHeight("350px");
            canvas.setCoordinateSpaceHeight(350);

            Context2d context = canvas.getContext2d();

            ImageElement imageElement = ImageElement.as(svgBase64EncodedImage.getElement());
            imageElement.setWidth(900);
            imageElement.setHeight(350);
            context.drawImage(imageElement, 0, 0, imageElement.getWidth(), imageElement.getHeight(), 0, 0, imageElement.getWidth(), imageElement.getHeight());
            String pngURI = canvas.toDataUrl();

            Image pngImage = new Image(pngURI);
            RootPanel.get().add(pngImage);
        }
    });

}

private static native String base64encode(String str) /*-{
    return $wnd.btoa(str);
}-*/;
}

使用 Canvas 在 GWT 中将 SVG 转换为 PNG

Convert SVG to PNG in GWT using Canvas

gwt

svg

canvas

rcharts