spring mvc display base64 as image

Question

I am using CKEditor WYSWIG as my text editor on my site. When User paste an image on the editor it is sent in post as <img src="data:image/png;base64,iVBORw0KGgoAAAANsd..." />

I would like to get this base64 string, save it in database and then create endpoint like /image/{id} which will show this image so in post I would not have to put whole base64 string in image source but just url like shown above.

this is how I save the base64 as byte[] :

@RequestMapping(value = {"/main/createpost"}, method = RequestMethod.POST)
    public String postPost(Model model, Principal principal,@RequestParam(name="editor-content") String postPayload) throws IOException {


        postPayload = checkAndSavePhotos(postPayload);
        model.addAttribute("editor",postPayload);
        return "createpost";
    }

checkAndSavePhotos is checking if editor contains any images and if so it stores it in database:

private String checkAndSavePhotos(String postPayload) throws IOException {
        int i =1;
        Pattern pattern = Pattern.compile(".*<img src=\".*;base64,(.*?)\".*/>");

        Matcher matcher = pattern.matcher(postPayload);
        while (matcher.find()) {
            PostPhoto postPhoto = new PostPhoto();
            byte[] bytes = Base64.getDecoder().decode(matcher.group(i).getBytes());
            MultipartFile mf =null;
            try {
                BufferedImage originalImage = ImageIO.read(new ByteArrayInputStream(bytes));
                ByteArrayOutputStream baos = new ByteArrayOutputStream();
                ImageIO.write(originalImage, "png", baos);
                baos.flush();
                mf = new MockMultipartFile("test", baos.toByteArray());
            } catch (IOException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
            postPhoto.setContent(mf.getBytes());
            postPhoto = postPhotoService.save(postPhoto);
        }

        return null;
    }

I have made it this way because on my other form with <input type='file' /> when I was using FileBucket it was enough for me to show fileBucket.getFile().getBytes(); in order to show image. I was trying to create MultipartFile from byte[] and made it the same way.

My Endpoint to show image:

@RequestMapping(value = "/main/postphoto/{imageId}")
    @ResponseBody
    public byte[] getImage(@PathVariable Long imageId) throws IOException  {
        PostPhoto image = postPhotoService.findById(imageId);

        return image.getContent();
    }

Now when I am looking at database content column looks like: \\x89504e470d0a1a0a0000000d49484452000000280000002808060000008cfeb86d0000033f4944415478daed9(...)

while file from filebucket \\377\\330\\377\\341\\000\\030Exif\\000\\000II*\\000\\010\\000\\000\\000\\000\\000\\000\\000\\000\\000\\000\\000\\377\\354\\000\\021Ducky\\000\\001\\000\\004\\000\\000\\000A\\000\\000\\377\\341\\003ohttp://ns.adobe.com/xap/1.0/\\000<?xpacket begin="\\357\\273\\277" id="W5M0MpCehiHzreSzNTczkc9d"?> (...)

Can anyone give me a hint how to made it works?

Answer 1

It looks like it was a stupid mistake.

My database column content was type of text so I was storing byte[] as a text, so it's not wierd that the file was not decoded correctly by browser.

Changing database column type to bytea solved problem.