Download Array of Images as Byte Array and Convert to Images

Uploading & Downloading an image as a byte array

You're not converting it to base64, that's the problem. You're telling it it's a base64 string but it's not. Instead of just using e.target.result you need to first encode it in base64, e.g.

btoa(e.target.result)

https://jsfiddle.net/drkz2fth/

Play Framework download image from byte array

I personally would need some more information to debug this, however, perhaps you can gain the information you need to continue based on an example of how I would store and retrieve images in PostgreSQL using Ebean.

The model would look something like this:

public class User extends Model {

    public static Finder<LInteger, User> find = new Finder<Integer,User>(User.class);

    @Id
    public Integer id;

    public String name;

    @Constraints.Required
    @Constraints.Email
    public String email;

    public String password;

    @Lob
    public byte[] photo;

    public static User findByEmail(String email) {
        return find.where().eq("email", email).findUnique();
    }

}

The controller would look something like this:

public class Application extends Controller {

    public static Result userPhoto(Integer userId) {
        User user = User.find.ById(userId);

        if (user == null) {
            return notFound();

        }

        if (user.photo == null) {
            return ok(Play.application().getFile("/public/images/default-user.jpg"), true).as("image/jpeg");
        }

        return ok(new ByteArrayInputStream(user.photo)).as("image/jpeg");
    }

}

I hope this helps!

How do I display a byte array image from a backend that uses AWS S3, in a React component?

This approach downloads the image, gets the byte array, converts it to a Blob and stuffs the binary data into a magic url you can use for the image source.

const IMAGE_URL = "https://placekitten.com/200/300";

const fetchImage = async (url) => {
  try {
    const response = await fetch(url);
    const imageBytes = await response.arrayBuffer();
    var blob = new Blob([imageBytes], { type: "image/jpeg" });
    var imageUrl = URL.createObjectURL(blob);
    return imageUrl;
  } catch (error) {
    console.log("ERROR:", error);
  }
};

(async () => {
  const imageSrc = await fetchImage(IMAGE_URL);
  console.log(imageSrc);
  document.getElementById("kittenImage").src = imageSrc;
})();

document.getElementById("app").innerHTML = `
<h1>Kitty!</h1>
<image id='kittenImage'>
`;

<!DOCTYPE html>
<html>

<head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
</head>

<body>
    <div id="app"></div>

    <script src="src/index.js">
    </script>
</body>

</html>

Download Array of Images as Byte Array and Convert to Images

Uploading & Downloading an image as a byte array

Play Framework download image from byte array

How do I display a byte array image from a backend that uses AWS S3, in a React component?

Related Topics

Leave a reply