using GWTCanvas with ImageResource

Question

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 force 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?

Answer 1

This works: (GWT 2.4)

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

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

Answer 2

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