web-dev-qa-db-de.com

Konvertieren Sie die base64-Zeichenfolge in ein Bild

Ich versuche, das Benutzerprofil mit dem Jquery-Plugin zuzuschneiden bzw. dessen Größe zu ändern, nämlich crop.js, das das Benutzerbild als base64 über ajax an meinen Controller als sendet 

$.ajax({
         type: "post",
         dataType: "json",
         url: "${g.createLink(controller: 'personalDetail', action:'uploadUserImage')}",
         data: { avatar: canvas.toDataURL() }

        });

aber ich kann diese base64 nicht entschlüsseln

'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPAAAADwCAYAAAA+VemSAAAgAEl...==' 

string als Image, Können Sie mir helfen, wie ich meine base64-Zeichenfolge als Image auf meinem Server speichern kann?.

26
Abs

Dies setzt einige Dinge voraus, dass Sie wissen, wie der Name der Ausgabedatei lautet, und dass Ihre Daten als Zeichenfolge vorliegen. Ich bin mir sicher, dass Sie Folgendes ändern können, um Ihre Bedürfnisse zu erfüllen:

// Needed Imports
import Java.io.ByteArrayInputStream;
import Sun.misc.BASE64Decoder;


def sourceData = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPAAAADwCAYAAAA+VemSAAAgAEl...==';

// tokenize the data
def parts = sourceData.tokenize(",");
def imageString = parts[1];

// create a buffered image
BufferedImage image = null;
byte[] imageByte;

BASE64Decoder decoder = new BASE64Decoder();
imageByte = decoder.decodeBuffer(imageString);
ByteArrayInputStream bis = new ByteArrayInputStream(imageByte);
image = ImageIO.read(bis);
bis.close();

// write the image to a file
File outputfile = new File("image.png");
ImageIO.write(image, "png", outputfile);

Bitte beachten Sie, dass dies nur ein Beispiel ist, um welche Teile es sich handelt. Ich habe diesen Code überhaupt nicht optimiert und er wurde mir aus dem Kopf geschrieben.

38
Joshua Moore

Führen Sie auf dem Server Folgendes aus:

Annehmen

String data = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPAAAADwCAYAAAA+VemSAAAgAEl...=='

Dann:

String base64Image = data.split(",")[1];
byte[] imageBytes = javax.xml.bind.DatatypeConverter.parseBase64Binary(base64Image);

Dann können Sie mit den Bytes machen, was Sie möchten:

BufferedImage img = ImageIO.read(new ByteArrayInputStream(imageBytes));
48
geo

ImageIO.write() komprimiert das Bild standardmäßig - das komprimierte Bild ist kleiner, sieht aber manchmal merkwürdig aus. Ich verwende BufferedOutputStream, um die Daten des Byte-Arrays zu speichern - dadurch bleibt die ursprüngliche Bildgröße erhalten.

Hier ist der Code:

import javax.xml.bind.DatatypeConverter;
import Java.io.*;

public class ImageTest {
    public static void main(String[] args) {
        String base64String = "data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAHkAAAB5C...";
        String[] strings = base64String.split(",");
        String extension;
        switch (strings[0]) {//check image's extension
            case "data:image/jpeg;base64":
                extension = "jpeg";
                break;
            case "data:image/png;base64":
                extension = "png";
                break;
            default://should write cases for more images types
                extension = "jpg";
                break;
        }
        //convert base64 string to binary data
        byte[] data = DatatypeConverter.parseBase64Binary(strings[1]);
        String path = "C:\\Users\\Ene\\Desktop\\test_image." + extension;
        File file = new File(path);
        try (OutputStream outputStream = new BufferedOutputStream(new FileOutputStream(file))) {
            outputStream.write(data);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}
6
Ayano

Serverseitige Codierungsdateien/Images an base64String bereit für die Verwendung auf Client-Seite

public Optional<String> InputStreamToBase64(Optional<InputStream> inputStream) throws IOException{
    if (inputStream.isPresent()) {
        ByteArrayOutputStream output = new ByteArrayOutputStream();
        FileCopyUtils.copy(inputStream.get(), output);
        //TODO retrieve content type from file, & replace png below with it
        return Optional.ofNullable("data:image/png;base64," + DatatypeConverter.printBase64Binary(output.toByteArray()));
    }

    return Optional.empty();
}

Serverseitige base64 Image/File-Decoder

public Optional<InputStream> Base64InputStream(Optional<String> base64String)throws IOException {
    if (base64String.isPresent()) {
        return Optional.ofNullable(new ByteArrayInputStream(DatatypeConverter.parseBase64Binary(base64String.get())));
    }

    return Optional.empty();
}
3
iamiddy
  public Optional<String> InputStreamToBase64(Optional<InputStream> inputStream) throws IOException{
    if (inputStream.isPresent()) {
        ByteArrayOutputStream outpString base64Image = data.split(",")[1];
byte[] imageBytes = javax.xml.bind.DatatypeConverter.parseBase64Binary(base64Image);

Dann können Sie mit den Bytes machen, was Sie möchten:

BufferedImage img = ImageIO.read(new ByteArrayInputStream(imageBytes));ut = new ByteArrayOutputStream();
        FileCopyUtils.copy(inputStream.get(), output);
        //TODO retrieve content type from file, & replace png below with it
        return Optional.ofNullable("data:image/png;base64," + DatatypeConverter.printBase64Binary(output.toByteArray()));
    }

    return Optional.empty();
2
mero

Hallo das ist meine Lösung 

Javascript-Code

    var base64before = document.querySelector('img').src;
    var base64 = base64before.replace(/^data:image\/(png|jpg);base64,/, "");
    var httpPost = new XMLHttpRequest();
    var path = "your url";
    var data = JSON.stringify(base64);

    httpPost.open("POST", path, false);
    // Set the content type of the request to json since that's what's being sent
    httpPost.setRequestHeader('Content-Type', 'application/json');
    httpPost.send(data);

Dies ist mein Java-Code.

    public void saveImage(InputStream imageStream){
    InputStream inStream = imageStream;

    try {
        String dataString = convertStreamToString(inStream);

        byte[] imageBytes = javax.xml.bind.DatatypeConverter.parseBase64Binary(dataString);
        BufferedImage image = ImageIO.read(new ByteArrayInputStream(imageBytes));
        // write the image to a file
        File outputfile = new File("/Users/paul/Desktop/testkey/myImage.png");
        ImageIO.write(image, "png", outputfile);

        }catch(Exception e) {
            System.out.println(e.getStackTrace());
        }
    }



  static String convertStreamToString(Java.io.InputStream is) {
    Java.util.Scanner s = new Java.util.Scanner(is).useDelimiter("\\A");
    return s.hasNext() ? s.next() : "";
  }
0
paulrda