Loading an image in ImageView through code - image

I have built my application using scenebuilder for javafx. I have a form where a person has to upload an image. I used this code
public void photoChooser(ActionEvent evt) {
System.out.println("photoChooser method is called");
try{
FileChooser fileChooser= new FileChooser();
fileChooser.setTitle("Choose a file");
File file = fileChooser.showOpenDialog(stagehere);
if(file != null){
System.out.println(file);
String img = file.toString();
//Image image = new ImageIcon(img);
try{
// image= new Image();
Image image = new Image(img);
} catch (Exception e) {System.out.println("Can't upload image " + e);}
//employeeImage.setImage(image);
try{
// employeeImage.setImage(image);
} catch(Exception e){System.out.println("Can't set the image" + e);}
employeeImage.setFitWidth(150);
employeeImage.setFitHeight(150);
}
And I got this error
photoChooser method is called
A:\images\fb\status\asd.jpg
Can't upload image java.lang.IllegalArgumentException: Invalid URL: unknown protocol: a

The constructor of Image expects an URL and not a file path. Therefore if there is a ":" in the string, everything up to that point is interpreted as the protocol (normally something like http, file or ftp).
You have to change the line
String img = file.toString();
to
String img = file.toURI().toURL().toExternalForm();
This gets the URL from the file before converting to string. I converted to URI first since File.toURL is deprecated and that's the suggested "workaround".

Related

Converting Image to Byte Array in Gluon Mobile (PictureService)

I'm trying to use the PictureService in Gluon Mobile to get a profile picture that can be stored in a MySQL table (Blob). What is the best way to get the byte array (and if possible the base64 encoded string) from the returned image object of the service? I tried SwingFXUtils, but it caused the app to crash on my Android. Thus, I am not sure the SwingFXUtils is supported.
Services.get(PicturesService.class).ifPresent(service -> {
service.takePhoto(false).ifPresent(image -> {
try {
byte[] imageStream = PictureFactory.convertToByteArray(image);
//String base64String = Base64.getEncoder().encodeToString(imageStream);
//this.picModel.setByteArray(imageStream);
//this.picModel.setBase64Str(base64String);
//this.picModel.setPatientId(User.patient.getPatientId());
av.setImage(image); //Avatar
av.setRotate(-90);
if (this.imageBox.getChildren().size() < 3) {
this.imageBox.getChildren().add(0, av);
}
} catch (Exception ex) {
Logger.getLogger(PictureFactory.class.getName()).log(Level.SEVERE, null, ex);
}
});
});
Byte Array Conversion Code:
public static byte[] convertToByteArray(Image img) throws IOException {
BufferedImage byteImg = SwingFXUtils.fromFXImage(img, null);
ByteArrayOutputStream stream = new ByteArrayOutputStream();
ImageIO.write(byteImg, "png", stream);
byte[] result = stream.toByteArray();
stream.close();
return result;
}
A completely unrelated issue which I am also experiencing is that the image is rotated 90 degrees clockwise when taking it in portrait mode. Any way to fix this? I'm hoping it can be fixed in the image itself that gets sent to the database instead of just rotating the imageview.

How can i open an image in it's full size in UWP

I am working on a chat app:
If the user taps on an image, it will show in full size. The following method is called:
Handle_Tapped():
void Handle_Tapped(object sender, System.EventArgs e)
{
try
{
Image image = sender as Image;
string filePath = String.Empty;
filePath = image.Source as FileImageSource;
Eva3Toolkit.CommonUtils.openImage(filePath);
}
catch (Exception ex)
{
throw ex;
}
}
Which calls (depending on the OS):
openImage() in Android:
public void openImage(string filePath)
{
Intent sendIntent = new Intent(Intent.ActionView);
sendIntent.SetDataAndType(Android.Net.Uri.Parse("file:" + filePath), "image/*");
Forms.Context.StartActivity(Intent.CreateChooser(sendIntent, "Bild öffnen..."));
}
openImage() in iOS:
public void openImage(string filePath)
{
var firstController = ((UIApplicationDelegate)(UIApplication.SharedApplication.Delegate)).Window.RootViewController.ChildViewControllers[0].ChildViewControllers[1].ChildViewControllers[0];
var navcontroller = firstController as UINavigationController;
var docIC = UIDocumentInteractionController.FromUrl(new NSUrl(filePath, true));
docIC.Delegate = new DocInteractionC(navcontroller);
docIC.PresentPreview(true);
}
Now I want to create a method openImage() in UWP, but I don't know know. I know that I will most likely have to work with the image as a StorageFile instead of the path because only a StorageFile grants me permission to open the image.
Is there a way to open the image in full size in UWP? I highly prefer to not create a new view for this.
A Launcher can open a file with the program that is assigned to the file:
public async void openImageAsync(string filePath)
{
StorageFile storageFile = await StorageFile.GetFileFromPathAsync(filePath);
await Launcher.LaunchFileAsync(storageFile);
}
For my situation it's working that I use filePath because the files are in a local folder.
The output looks like this:

JavaFX Creating an Image and ImageView

Stuck in the basics. I have some syntax issues setting up the Image Path.
When i try to create an Image and give it the image path, it always throws some some exception about the path. I have commented out some of the path combination I have already tryed. Can you please tell me what I am doing wrong? Thank you.
package jopofx;
public JoPoCTRL(JoPoFX gui){
this.gui = gui;
}
public void updateImages(){
Image img = null;
try{
//img = new Image("C:\\Users\\ ... //FullPath ... \\JoPoFX\\src\\jopofx\\myimage.png");
img = new Image("\\JoPoFX\\src\\jopofx\\myimage.png");
//img = new Image("\\src\\jopofx\\myimage.png");
//img = new Image("\\myimage.png");
}catch(Exception e){
System.out.println("error while creating image");
e.printStackTrace();
}
try{
gui.setImgV(img);
}catch(Exception e){
System.out.println("error while setting up the image");
}
}
This is what prints out:
error while creating image
java.lang.IllegalArgumentException: Invalid URL: Invalid URL or resource not found
at javafx.scene.image.Image.validateUrl(Image.java:990)
at javafx.scene.image.Image.(Image.java:538)
On Windows platform, for an image placed inside src/jopofx :
img = new Image("\\jopofx\\myimage.png");
or
img = new Image("/jopofx/myimage.png");
Then you can create an ImageView using:
ImageView imageView = new ImageView(img);
Further, you can also directly initialize an ImageView without initializing an Image by:
ImageView imageView = new ImageView("/jopofx/myimage.png");
Also, make sure you are using the import javafx.scene.image.Image;
I found a working example from a blog short after I posted my question.
Hopefully this example will be helpful to someone:
InputStream stream = getClass().getResourceAsStream("images/"+imageName+".jpg");
//"images/" is the a local directory where all my images are located
Image newImage = new Image(stream);
imgV.setImage(newImage);

primefaces cropper, size of image

I have a form where a user can upload an image and crop it.
After uploading, the image is used in the cropper component for the crop
I want to display it in a fixed size (if the user's image is too large) and I don't manage to do it.
After uploading the cropper component display the image in its original size (so if the width is 1200px it's filling all the screen)
I can't use css because the div size is generated by primefaces script and I can't use script because it's loading before image upload
Just resize image when uploading
public String handleImageFileUpload(FileUploadEvent event){
File file = new File("PATH_TO_UPLOAD_DIR");
file.mkdirs();
file = new File("PATH_TO_UPLOAD_FILE");
try( InputStream is = event.getFile().getInputstream();
OutputStream out = new FileOutputStream(file) ) {
BufferedImage img = ImageIO.read(is);
BufferedImage scaledImg;
if(img.getWidth() >= img.getHeight())
scaledImg = Scalr.resize(img, Scalr.Method.ULTRA_QUALITY, Scalr.Mode.FIT_TO_HEIGHT, 300, 400);
else
scaledImg = Scalr.resize(img, Scalr.Method.ULTRA_QUALITY, Scalr.Mode.FIT_TO_WIDTH, 400, 300);
ImageIO.write(scaledImg, "jpg", out);
} catch (IOException e) {
e.printStackTrace();
}
}

App Engine Blobstore/ImageService - Served image has not the original size

I managed to create the functionality to upload an image with the "gwtuploaded" to the app engine and store the image as an blob. My problem now is: The url that I get from imagesService.getServingUrl(suo) links to an image which is smaller than the image i uploaded. If i check the image in the blob viewer in the app engine console, it seems to have the correct size.
Why do I get a resized version of my image with the following code. Can I somehow retrieve the url to the full sized image?
My code looks like this:
public class MyUploadAction extends AppEngineUploadAction{
#Override
public String executeAction(HttpServletRequest request, List<FileItem> sessionFiles) throws UploadActionException {
String imageUrls = "";
// Image service is needed to get url from blob
ImagesService imagesService = ImagesServiceFactory.getImagesService();
// Get a file service -> write the blob
FileService fileService = FileServiceFactory.getFileService();
// Iterate over the files and upload each one
for(FileItem myFile : sessionFiles){
InputStream imgStream = null;
// construct our entity objects
Blob imageBlob = null;
// Create a new Blob file with mime-type "image/png"
AppEngineFile file = null;
FileWriteChannel writeChannel = null;
try {
// get input stream from file
imgStream = myFile.getInputStream();
imageBlob = new Blob(IOUtils.toByteArray(imgStream));
// create empty app engine file with mime type of uploaded file e.g.: image/png, image/jpeg
file = fileService.createNewBlobFile(myFile.getContentType());
// Open a channel to write to it
boolean lock = true;
writeChannel = fileService.openWriteChannel(file, lock);
// This time we write to the channel directly
writeChannel.write(ByteBuffer.wrap(imageBlob.getBytes()));
} catch (IOException e) {
e.printStackTrace();
}finally{
// Now finalize
try {
writeChannel.closeFinally();
} catch (IllegalStateException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
// Get the url from the blob
ServingUrlOptions suo = ServingUrlOptions.Builder.withBlobKey(fileService.getBlobKey(file)).secureUrl(true);
imageUrls += imagesService.getServingUrl(suo);
imageUrls = imageUrls.replaceFirst("0.0.0.0", "127.0.0.1");
System.out.println(imageUrls);
}
return imageUrls ;
}
}
I tried and found that image service got a maximum image output of 1600x1600.
see here and search for 1600: https://developers.google.com/appengine/docs/java/images/
That applies even if you don't request for an resize.
To serve the image in original size, you shouldn't use the image service, just output directly from (e.g. blobstore)

Resources