I have used this code (kind of tutorial) at http://code.google.com/p/gwt-examples/wiki/gwt_hmtl5 ... In this code, I used the "Image Scale / Resize" code and I found something that I cannot explain. I mean, instead of using :
final Image img = new Image("/img/test.jpg");
I have used the client bundle and so the following code:
final Image img = new Image(NormalResources.NORMAL_RES_INSTANCE.axl1());
And I do not have any error, but the image did not appears. Finally I found the solution with :
final Image img = new Image(NormalResources.NORMAL_RES_INSTANCE.axl1().getSafeUri());
Do you know the reason why ".getSafeUri()" solves the problem ?
See ImageResource in ClientBundle as real <img> element
An Image created with an ImageResource will unconditionally use a clipped image, where the image is set as a CSS background image (and the <img>'s src is a 1×1px transparent GIF). Because the image actually is a blank GIF, painting it to the canvas does nothing noticeable; canvas does not take CSS styles into account.
Using getSafeUri() you'll have the data: URL of the image, which will be used as the src of the <img>. No blank.gif here, so the image is correctly painted on the canvas.
Note however that getSafeUri() won't work in IE6 and IE7 by default. If you need to support them, you'll have to annotate your ImageResources with either #ImageOptions(preventInlining = true) or #ImageOptions(repeatStyle = RepeatStyle.Both). Alternately, you could use DataResources instead of ImageResources.
Related
I am using Lazarus.
I have put 2 images on a form and synchronized their positions and sizes.
I can textout to both images, and after I made the ontop image transparent I can see the combined content of both images.
I can add further text to the bottom image and see it, but I can't see text I try to add to the transparent image.
I used the following code to make the top image transparent
image2.picture.Bitmap.TransparentColor:=clWhite;
image2.transparent:=true;
I guess I need to play with the image bitmap, but I can't find a solution that is not using other software.
Can someone help me with this please?
I'm working on a new UI-element in an vb6 programm. I need to place pictures dynamically on 2 diffenent colored background lines:
I tried out two different ideas but none of them is working:
Idea 1
I used image control and assigned an image to the control. Then I set left, top, with and hight properties to values where I want to place the image. Image was places at correct position but not in foregound on a frame but in background (behind coloured frame).
Can anyone tell me how I can place an image control in foreground (on green coloured frame)? I need to place these image controlls dynamically from code in running program.
Idea 2
In second sulution I tried to use picturebox instead of image control. Picturebox can be placed on colored background (frame) without any problems.
Here the problem is that loaded picture has to be scaled to size of picturebox picture property. Picture is loaded to picturebox by following code: Picture.Picture = LoadPicture("F:\img.JPG")
Does anyone know how I can scale this img to size of picturebox?
Can anyone help me to follow up one of the solutions. In principle I would prefere to use Image controls if it is polible to place them in foreground on frame.
I'm going to guess that after creating the image control, you are moving it onto the Frame. If so, this is why the control is behind the Frame. You really want the image to be inside the frame. The key to do this is to set the Container property.
Dim img As Image
Set img = Me.Controls.Add("VB.Image", "Image1")
If Not img Is Nothing Then
img.Move 200, 200, 400, 400
img.Stretch = True
img.Picture = LoadPicture("your image.jpg")
Set img.Container = Frame1
img.Visible = True
End If
My website displays thumbnail images. When the user clicks on an image, the image is displayed in a larger size. The images themselves exist in two sizes, the thumbnail size for fast rendering and then the larger size.
Initially the thumbnail size is downloaded and displayed. What I want is for the larger images to be downloaded (but be hidden) once the page has rendered/loaded. That way, the initial rendering is fast, but, when the user clicks on the thumbnail, the image is already downloaded.
At first I did this by
<div name = "big_path" style= "display:hidden" src == "" path = "big/path"></div>
In js/jquery, after loading, I then set the src attribute to path, causing the image to be downloaded. I do not use this div element for anything except to download the image.
This works in IE, but Chrome does not download hidden images. Therefore, the image is first downloaded when the user clicks on the thumbnail. Maybe this is fast enough, but I'd prefer to already have the image downloaded.
What to do?
What I ended up doing was to make the div visible, but make it 1px by 1px. And then I made it a span, not div:
<span name = "big_path" style = "width:1px; height:1px" src == "" path = "big/path"></span>
And then I still set src = path once the initial rendering is complete.
You may want to do something like this:
$(document).ready(function(){
//load images
//append images
});
Basically, you are loading the large images after the document has loaded. After that, you are appending the images like this:
$('.thumbnail').append('<img src="img/lol.jpeg" />');
You may want to put this in a for loop for lots of thumbnails.
Another solution is to use progressive jpegs.
Okay this solution seems to not be findable.
I have a border type image on stage (circular) and I am dynamically loading an image from xml in my document class. I have a place holder image inside the border. Can I replace that image with the one that is dynamically loaded?
Or do I have to addChild and then scale and transform it all through code?
I would just remove the place holder image and add the new image into the same container and scale/position it. It is simple to do with code.
container.removeChild(placeHolderImage);
container.addChild(newLoadedImage);
newLoadedImage.scaleX = newLoadedImage.scaleY = 1.5;
newLoadedImage.x = 100;
newLoadedImage.y = 100;
You can possibly draw into the bitmap data of the image already on screen but I don't see any downsides with just removing the old one and adding the new image.
I have worked for Image binding for listbox. For that I have binded the Image Url to Image Source. My proplem is someURL not valid does not contain image. Normally I have loaded defalut image for no url contains items.
That not valid url, binded the image as empty pixel. In this i want to show default image. If no pixel in image means, binding not needed.
string Url="Some URl.jpg";
Binded this "URL" to the Image.
Pls Help me
For this try to give a background image in your image content which is equal dimensions of ur image content..by default it shows the background image when no image in the URL.
Use Stackpanel at background, so when image is loading , it will show by default color of stackpanel, and when image is loaded it will show Image, thereby hiding the background color
StackPanel background = new StackPanel();
background.Background = new SolidColorBrush(Colors.LightGray);
Image img1 = new Image();
img1.Height = 250;
img1.Stretch = Stretch.UniformToFill;
LowProfileImageLoader.SetUriSource(img1, new Uri(n.Image, UriKind.RelativeOrAbsolute));
background.Children.Add(img1);