Using GWTCanvas with ImageResource

Question

I want to use the clientBundle function for GWT to load only 1 image, consisting of many sprites, using GWTCanvas. My initial solution was to simply convert ImageResource to ImageElement, but it 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 to add the image to the RootPanel first (to force the download), but this does not work either. Perhaps the timings are incorrect. Does anyone know how I can draw imageResource using GWTCanvas?

Answer 1

Using the ClientBundled image as you want is not possible. Images combined with one large image are displayed as background images that are based on the browser function to display only part of the image. GWT calls this "cropped" mode. Therefore, when you try to get an element of this image, the actual src tag is empty, since the image is a background image. If you want to display images on a canvas, this must be the actual link to the image.

Answer 2

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 3

You can get the image from the package using the data URI, but you need to manage asynchronization, as 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); } }); 

Answer 4

When creating an image, you can try using the imageResource getURL () method:

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

I had the same issue when using ClientBundle with a GWT 2.2.0 Canvas and this fixed it for me.

Answer 5

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

Answer 6

Tom Fishman's solution did not work for me because the images were not loaded at the time I called canvas.drawImage (). This solution works (also for large 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); } });