using GWTCanvas with ImageResource

I want to use the clientBundle capability of GWT to load only 1 image, which is composed of many sprites, with GWTCanvas. My initial take was to just convert the ImageResource into an ImageElement, but apparently that doesn't seem to work:

public interface Bundle implements ClientBundle{
   public static Bundle INSTANCE = GWT.create(Bundle .class);
   @Source("/img/tile1.png")
   public ImageResource tile1()
}

final GWTCanvas canvas = new GWTCanvas(400,400);
canvas.drawImage(ImageElement.as(new Image(Bundle.INSTANCE.tile1()).getElement()), 0, 0);

i tried adding the Image to RootPanel first (to for开发者_StackOverflow中文版ce a load), but that doesn't seem to work too. Perhaps the timings are incorrect. Does anyone have a clue as to how I can draw an imageResource using GWTCanvas?

This works: (GWT 2.4)

    // load:
    SafeUri uri= imageResource.getSafeUri();        
    ImageElement imgElement= ImageElement.as((new Image(uri)).getElement());

    // render
    context.drawImage(imgElement, 0, 0);

You can get the image from a bundle using a data URI, but you'll need to manage the asynchrony as you would with a remote image.

final Image image = new Image(resources.imageResource().getURL());
RootPanel.get().add(image);
image.setVisible(false);
fetchedImage.addLoadHandler(new LoadHandler() {
  public void onLoad(LoadEvent event) {
    context.drawImage(ImageElement.as(image.getElement()), 0, 0);
  }
});

Using ClientBundled image in the way you want isn't possible. Images combined to one big image are displayed as background images which is based on the feature of the browser to show only part of an image. GWT calls this 'clipped' mode. So when you try to get the element of that image, the actual src tag is empty as the image is a background image. If you want to display images on the Canvas it must be an actual link to an image.

You might try using the ImageResource's getURL() method when you create the image:

canvas.drawImage(ImageElement.as(new Image(Bundle.INSTANCE.tile1().getUrl()).getElement(), 0, 0);

I was having the same problem when using a ClientBundle with GWT 2.2.0's Canvas type and this fixed it for me.

They are correct, just use getSafeUri() instead of getURL()

The solution of Tom Fishman didn't work for me, because the images weren't loaded at the time when i called canvas.drawImage(). This solution works (also for big images):

    // Create Image
    SafeUri uri = resource.getSafeUri();
    Utils.console("URI: "+ uri);
    final Image img = new Image(uri);

    // Add the image to the RootPanel to force the image to be loaded.
    RootPanel.get().add(img);

    // The image has to be added to the canvas after the image has been loaded.
    // Otherwise the bounding box of the image is 0,0,0,0 and nothing will be drawn.
    img.addLoadHandler(new LoadHandler() {
        @Override
        public void onLoad(LoadEvent event) {
            // Create the image element.
            ImageElement imgElement = ImageElement.as(img.getElement());

            // Render the image on the canvas.
            context2d.drawImage(imgElement, offsetX, offsetY);

            // Delete the image from the root panel.
            RootPanel.get().remove(img);
        }
    });