Example usage for com.google.gwt.dom.client CanvasElement toDataUrl

Introduction

In this page you can find the example usage for com.google.gwt.dom.client CanvasElement toDataUrl.

Prototype

public final native String toDataUrl() ;

Source Link

Document

Returns a data URL for the current content of the canvas element.

Usage

From source file:org.cleanlogic.cesiumjs4gwt.showcase.examples.LoadImages.java

License:Apache License

@Override
public void buildPanel() {
    csVPanel = new ViewerPanel();

    AbsolutePanel aPanel = new AbsolutePanel();
    aPanel.add(csVPanel);//from   w  ww  .  java2 s. co m

    org.cesiumjs.cs.core.PinBuilder pinBuilder = new org.cesiumjs.cs.core.PinBuilder();
    pinBuilder.fromUrlPromise(GWT.getModuleBaseURL() + "images/Cesium_Logo_Color_Overlay.png",
            Color.WHITE().withAlpha(0.0f), 256).then(new Fulfill<CanvasElement>() {
                @Override
                public void onFulfilled(CanvasElement value) {
                    BillboardGraphicsOptions billboardOptions = new BillboardGraphicsOptions();
                    billboardOptions.image = new ConstantProperty<>(value.toDataUrl());
                    EntityOptions entityOptions = new EntityOptions();
                    entityOptions.name = "Pin billboard through fromUrl";
                    entityOptions.billboard = new BillboardGraphics(billboardOptions);
                    entityOptions.position = new ConstantPositionProperty(Cartesian3.fromDegrees(35, 35));
                    csVPanel.getViewer().entities().add(new Entity(entityOptions));
                }
            });

    Resource.fetchImage((ResourceImageOptions) ResourceImageOptions
            .create(GWT.getModuleBaseURL() + "images/Cesium_Logo_Color_Overlay.png"))
            .then(new Fulfill<JsImage>() {
                @Override
                public void onFulfilled(JsImage value) {
                    Canvas canvas = Canvas.createIfSupported();
                    canvas.setWidth(value.width + "px");
                    canvas.setHeight(value.height + "px");
                    Context2d context = canvas.getContext2d();
                    context.scale(0.1, 0.1);
                    context.drawImage((ImageElement) (Object) value, 0, 0);

                    BillboardGraphicsOptions billboardOptions = new BillboardGraphicsOptions();
                    billboardOptions.image = new ConstantProperty<>(canvas.toDataUrl());
                    EntityOptions entityOptions = new EntityOptions();
                    entityOptions.name = "Pin billboard through canvas";
                    entityOptions.billboard = new BillboardGraphics(billboardOptions);
                    entityOptions.position = new ConstantPositionProperty(Cartesian3.fromDegrees(45, 45));
                    csVPanel.getViewer().entities().add(new Entity(entityOptions));
                }
            });

    // CORS not loaded
    Resource.fetchImage((ResourceImageOptions) ResourceImageOptions
            .create("https://www.linux.org.ru/tango/img/games-logo.png")).then(new Fulfill<JsImage>() {
                @Override
                public void onFulfilled(JsImage value) {
                    Canvas canvas = Canvas.createIfSupported();
                    canvas.setWidth(value.width + "px");
                    canvas.setHeight(value.height + "px");
                    Context2d context = canvas.getContext2d();
                    context.scale(0.1, 0.1);
                    context.drawImage((ImageElement) (Object) value, 0, 0);

                    BillboardGraphicsOptions billboardOptions = new BillboardGraphicsOptions();
                    billboardOptions.image = new ConstantProperty<>(canvas.toDataUrl());
                    EntityOptions entityOptions = new EntityOptions();
                    entityOptions.name = "Pin billboard CORS";
                    entityOptions.billboard = new BillboardGraphics(billboardOptions);
                    entityOptions.position = new ConstantPositionProperty(Cartesian3.fromDegrees(55, 55));
                    csVPanel.getViewer().entities().add(new Entity(entityOptions));
                }
            });

    // Cors not loaded!
    final JsImage imageAmz = new JsImage();
    imageAmz.crossOrigin = "*";
    imageAmz.onload = new JsImage.Listener() {
        @Override
        public void function() {
            Cesium.log(imageAmz);
            /*Canvas canvas = Canvas.createIfSupported();
            canvas.setWidth(imageAmz.width + "px");
            canvas.setHeight(imageAmz.height + "px");
            Context2d context = canvas.getContext2d();
            context.scale(0.1, 0.1);
            context.drawImage((ImageElement) (Object) imageAmz, 0, 0);*/
            BillboardGraphicsOptions billboardOptions = new BillboardGraphicsOptions();
            billboardOptions.image = new ConstantProperty<>(imageAmz);
            //billboardOptions.image = new ConstantProperty<>(canvas.toDataUrl("image/png"));
            EntityOptions entityOptions = new EntityOptions();
            entityOptions.name = "Pin billboard CORS";
            entityOptions.billboard = new BillboardGraphics(billboardOptions);
            entityOptions.position = new ConstantPositionProperty(Cartesian3.fromDegrees(65, 65));
            csVPanel.getViewer().entities().add(new Entity(entityOptions));
        }
    };
    imageAmz.src = "https://d1.awsstatic.com/products/cloudfront/cloudfront-100_PoP_600x400.4a1edd6022833c54c41370ad9f615ae818350a23.png";

    // Worked, have Access-Control-Allow-Origin: *
    final JsImage imageWiki = new JsImage();
    imageWiki.crossOrigin = "*";
    imageWiki.onload = new JsImage.Listener() {
        @Override
        public void function() {
            Cesium.log(imageWiki);
            Canvas canvas = Canvas.createIfSupported();
            canvas.setWidth(imageWiki.width + "px");
            canvas.setHeight(imageWiki.height + "px");
            Context2d context = canvas.getContext2d();
            context.drawImage((ImageElement) (Object) imageWiki, 0, 0);
            BillboardGraphicsOptions billboardOptions = new BillboardGraphicsOptions();
            billboardOptions.image = new ConstantProperty<>(canvas.toDataUrl("image/png"));
            EntityOptions entityOptions = new EntityOptions();
            entityOptions.name = "Pin billboard CORS";
            entityOptions.billboard = new BillboardGraphics(billboardOptions);
            entityOptions.position = new ConstantPositionProperty(Cartesian3.fromDegrees(75, 75));
            csVPanel.getViewer().entities().add(new Entity(entityOptions));
        }
    };
    imageWiki.src = "https://ru.wikipedia.org/static/images/project-logos/ruwiki-2x.png";

    contentPanel.add(new HTML("<p>Cluster labels, billboards and points.</p>"));
    contentPanel.add(aPanel);

    initWidget(contentPanel);
}

---