Develop Reference

javafxports image pixelated when zoomed in imageview

This is my code:
Image image1 = new Image(url);
Dialog mainDialog = new Dialog(true);
ImageView imageView = new ImageView();
imageView.setImage(image1);
imageView.setPreserveRatio(true);
imageView.setCache(true);
imageView.setSmooth(true);
imageView.setPickOnBounds(true);
imageView.setOnZoom(evt->{
imageView.setScaleX(imageView.getScaleX()*evt.getZoomFactor());
imageView.setScaleY(imageView.getScaleY()*evt.getZoomFactor());
});
mainDialog.setContent(imageView);
Platform.runLater(() -> mainDialog.showAndWait());

You don't provide much information about the image quality, and what do you mean by pixelated, at what scale it happens, or if it is only on mobile and not on desktop.
Anyway, here are a few hints to improve the results.
Add a hint to the cache, in this case CacheHint.SCALE.
Add clipping to the imageView. If the scale is too big, the image will be big on memory. This will prevent a possible memory issue. Bind the size of the rectangle to the view dimensions.
This works fine for me, even with scale factors of 20+:
Image image1 = new Image(url);
Dialog mainDialog = new Dialog(true);
ImageView imageView = new ImageView();
imageView.setImage(image1);
imageView.setPreserveRatio(true);
imageView.setCache(true);
imageView.setCacheHint(CacheHint.SCALE); // <-- hint
imageView.setSmooth(true);
imageView.setPickOnBounds(true);
imageView.setOnZoom(evt -> {
imageView.setScaleX(imageView.getScaleX() * evt.getZoomFactor());
imageView.setScaleY(imageView.getScaleY() * evt.getZoomFactor());
});
Rectangle r = new Rectangle();
imageView.setClip(r); // <-- clip
r.widthProperty().bind(view.widthProperty());
r.heightProperty().bind(view.heightProperty());
mainDialog.setContent(imageView);
mainDialog.showAndWait(); // <-- No need of runLater

Image view not showing

I have a code which adds buttons and images dynamically to a fragment. The buttons are getting added but the images are not being added.
Here is my code :
for(String f1 : f){
// For Each File Add a View or a button or something
LogUtil.d(TAG,"ocr override" + f1);
Button b = new Button (getActivity());
b.setId (i);
b.setLayoutParams(params2);
b.setText (f1);
b.setOnClickListener(this);
ImageView img_view = new ImageView(getContext());
img_view.setImageBitmap(getBitmapFromAsset("OcrSampleImages"+System.getProperty("file.separator")+f1));
img_view.setLayoutParams(params);
linearLayout.addView(b);
linearLayout.addView(img_view,params);
i++;
}
params and params2 are defined as follows :
LayoutParams params = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
LayoutParams params2 = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
Here is the output on the emulator :
Here is my assets folder :

Better to use iterative strategy..
first, new ImageView(getContext()); -> new ImageView(**getActivity()**);
Secondly, if you don't know where is the problem, then better reading default drawable image
img_view.setImageResource(R.drawable.<any_dummy_image_from_drawable>);
instead of
setImageBitmap()
if your dummy image load properly that means your View is perfect and having problem while reading from assets,
If so, then you can concentrate more on asset reading thing.

Blend Mode doesn't work for ImageView

I have two image that is
and this:
I need to place that image (stacked) in a single ImageView. I tried to use blend mode, but doesn't work for ImageView like
Group group = new Group();
group.setBlendMode(BlendMode.SRC_OVER);
// tempImage is array of buffered Images
for(int i=0; i < tempImage.length ;i++){
if(tempImage[i] != null){
ImageView view = new ImageView();
Image im = SwingFXUtils.toFXImage(tempImage[i],
null );
view.setImage(im);
group.getChildren().add(view);
}
}

Just a little trick, instead of using BlendModeuse a HBox, add the images inside the HBox and set the HBox inside the Group
Group group = new Group();
HBox box = new HBox
// tempImage is array of buffered Images
for(int i=0; i < tempImage.length ;i++){
if(tempImage[i] != null){
ImageView view = new ImageView();
Image im = SwingFXUtils.toFXImage(tempImage[i],
null );
view.setImage(im);
box.getChildren().add(view);
}
}
group.getChildren.add(box);
But this wont help you to get the new image, guess you don't even need it !

Display Image using html in JLabel

I used the following way to convert an ImageIcon into a thumbnail :
ImageIcon im = new ImageIcon(url);
Image image = im.getImage().getScaledInstance(80,100,Image.SCALE_DEFAULT);
Now I'm having problems when I try to display the Image in JLabel using html. Before converting the ImageIcon into Image, the following code was working fine:
JLabel label = new JLabel("<html>" + im);
But now when I try to do the same using the Image, it doesn't work. Any idea of how to display the resulting Image using html in a JLabel?

What's wrong with:
JLabel label = new JLabel("<html><img height='" + height + "' width='" + width
+ "' src='" + url + "'></html>");
For example:
JLabel label = new JLabel("<html><img height='80' width='100' src='https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png' /></html>");
Note: Don't add px to the height or width values
Some documentation here:
http://docs.oracle.com/javase/7/docs/api/javax/swing/text/html/ImageView.html

You cannot display HTML code inside a JLabel. You are going to need to use an htmlPanel. You can set the perferred size of it later, here is what you need to add.
JPanel htmlPanel = new HtmlPanel("<html><body><img src="file path goes here"></body></html>");
Here is the complete code I whipped up.
JPanel htmlPanel = new HtmlPanel("<html><body><img src="images/file.png"></body></html>");
htmlPanel.setPreferredSize(new Dimension(TheWidthGoesHere, TheHeightGoesHere));
Then you can just add the htmlPanel to your frame like you would with any other component.
frame.add(htmlPanel);

Set size of Layered Drawable?

I am making a icon for my app.. The app is basically a friend finder. I am creating a overlay that looks much like the icons from Google Latitude. I have an image that changes due to the user and I have the boarder. I've been able to do the layered drawable and overlay fine, but the problem is, the image stretches to the size of the border. This is a problem because, if you've never seen the Google Lat icons, it has a point on the bottom with open space between it.
What I need to do is, somehow restrict the size of the changing image to the bounds of the square portion of the border. Any Help would be much appreciated. Here is my snippet:
BitmapFactory.Options options = new BitmapFactory.Options();
options.inSampleSize = 25;
Bitmap bit = BitmapFactory.decodeFile(photo, options);
draw = new BitmapDrawable(bit);
Resources r = getResources();
Drawable[] layers = new Drawable[2];
layers[0] = draw;
layers[1] = r.getDrawable(R.drawable.border);
LayerDrawable layerDrawable = new LayerDrawable(layers);
draw = layerDrawable;
}else{
draw = this.getResources().getDrawable(R.drawable.androidmarker);
}
HelloItemizedOverlay itemizedoverlay = new HelloItemizedOverlay(draw, this);
GeoPoint point = new GeoPoint(lat,lon);
OverlayItem overlayitem = new OverlayItem(point, username, avail + " : " + status + " : Position updated at : " + update_at);
items.add(overlayitem);
itemizedoverlay.addOverlay(overlayitem);
mapOverlays.add(itemizedoverlay);

Funny that shorty after I posted this, I found the answer. I was looking in all of the wrong places to resize the image. I tried the bitmap, the drawable, the layers inside of the layerdrawable. But, what I never tried was the layerdrawable itself. The solution is below:
Resources r = getResources();
Drawable[] layers = new Drawable[2];
layers[0] = draw;
layers[1] = r.getDrawable(R.drawable.border);
LayerDrawable layerDrawable = new LayerDrawable(layers);
layerDrawable.setLayerInset(0, 0, 0, 0, 12);
draw = layerDrawable;
The layerDrawable inset method is as follows:
layerDrawable.setLayerInset(*index of layer*, *left inset*, *top*, *right*, *bottom*);
Thanks guys!