Wie füge ich eine Bilddatei in ein JSON-Objekt ein?

74

Ich erstelle eine Datenbank für Videospiele, die jeweils Elemente wie Name, Genre und Bild des Spiels enthält. Ist es möglich, Bilder in ein JSON-Objekt für die Datenbank einzufügen? Wenn nicht, gibt es einen Weg, dies zu umgehen?

javascript  arrays  json  mongodb 
— Dyll Bro
quelle
8
— WhiteHat
@WhiteHat wie funktioniert Base 64?
— Dyll Bro
1
bedeutet nur, das Bild in eine base64Zeichenfolge zu konvertieren, die wieder in ein Bild konvertiert werden kann -> Beispiel
— WhiteHat
@ WhiteHat super danke Mann!
— Dyll Bro
10
Nichts Unklares an dieser Frage, stimmte für die Wiedereröffnung.
— user000001

Antworten:

69

Ich kann mir zwei Möglichkeiten vorstellen:

1.

Speichern der Datei im Dateisystem in einem beliebigen Verzeichnis (z. B. dir1) und Umbenennen, um sicherzustellen, dass der Name für jede Datei eindeutig ist (möglicherweise ein Zeitstempel) (z. B. xyz123.jpg), und Speichern dieses Namens in einer Datenbank. Während Sie den JSON generieren, ziehen Sie diesen Dateinamen und generieren eine vollständige URL (die wird http://example.com/dir1/xyz123.png) und fügen sie in den JSON ein.

2.

Base 64-Codierung: Dies ist im Grunde eine Möglichkeit, beliebige Binärdaten in ASCII-Text zu codieren. Es werden 4 Zeichen pro 3 Datenbytes benötigt, plus möglicherweise ein wenig Auffüllen am Ende. Im Wesentlichen sind alle 6 Bits der Eingabe in einem 64-stelligen Alphabet codiert. Das "Standard" -Alphabet verwendet AZ, az, 0-9 und + und / mit = als Füllzeichen. Es gibt URL-sichere Varianten. Mit diesem Ansatz können Sie Ihr Bild direkt in die MongoDB einfügen, während Sie es speichern. Codieren Sie das Bild und dekodieren Sie es beim Abrufen. Es hat einige seiner eigenen Nachteile:

  • Durch die Base64-Codierung sind die Dateigrößen etwa 33% größer als die ursprünglichen binären Darstellungen, was bedeutet, dass mehr Daten übertragen werden (dies kann in Mobilfunknetzen außerordentlich schmerzhaft sein).
  • Daten-URIs werden in IE6 oder IE7 nicht unterstützt.
  • Die Verarbeitung von Base64-codierten Daten kann möglicherweise länger dauern als die von Binärdaten.

Quelle

Bild in DATA URI konvertieren

Eine Leinwand

Laden Sie das Bild in ein Bildobjekt, malen Sie es auf eine Leinwand und konvertieren Sie die Leinwand zurück in eine dataURL.

function convertToDataURLviaCanvas(url, callback, outputFormat){
    var img = new Image();
    img.crossOrigin = 'Anonymous';
    img.onload = function(){
        var canvas = document.createElement('CANVAS');
        var ctx = canvas.getContext('2d');
        var dataURL;
        canvas.height = this.height;
        canvas.width = this.width;
        ctx.drawImage(this, 0, 0);
        dataURL = canvas.toDataURL(outputFormat);
        callback(dataURL);
        canvas = null; 
    };
    img.src = url;
}

Verwendung

convertToDataURLviaCanvas('http://bit.ly/18g0VNp', function(base64Img){
    // Base64DataURL
});

Unterstützte Eingabeformate image/png ,image/jpeg,image/jpg,image/gif,image/bmp,image/tiff,image/x-icon,image/svg+xml,image/webp,image/xxx

B.) FileReader

Laden Sie das Bild als Blob über XMLHttpRequest und konvertieren Sie es mithilfe der FileReader-API in eine Daten-URL.

function convertFileToBase64viaFileReader(url, callback){
    var xhr = new XMLHttpRequest();
    xhr.responseType = 'blob';
    xhr.onload = function() {
      var reader  = new FileReader();
      reader.onloadend = function () {
          callback(reader.result);
      }
      reader.readAsDataURL(xhr.response);
    };
    xhr.open('GET', url);
    xhr.send();
}

Dieser Ansatz

  • mangelnde Browserunterstützung
  • hat eine bessere Komprimierung
  • funktioniert auch für andere Dateitypen.

Verwendung

convertFileToBase64viaFileReader('http://bit.ly/18g0VNp', function(base64Img){
    // Base64DataURL
});

Quelle

— Leere
quelle
Super, vielen Dank, Mann, nur eine Frage. Wenn ich viele Bilder hochladen würde, aber der Benutzer immer nur ein Paar gleichzeitig sehen würde, wäre Base 64 die beste Option für mich? es scheint einfacher zu sein als die Alternative.
— Dyll Bro
Können Sie mit Ihrer ersten Option etwas tiefer gehen? vielleicht ein beispiel json objekt liefern, das wäre toll!
— Dyll Bro
"Base64-Codierung macht Dateigrößen um ungefähr 33% größer", aber gzip ist Ihr Freund, wenn Sie Lösung 2 verwenden.
— Wilt
Ich habe einige Bilder in diesem Format gespeichert. Irgendeine Idee, wie man sie konvertiert? [{"id": 1, "format_id": 1, "body": "| 147,71,142,69,116,67,113,66,109,66,106,65,103,65,99,64,96,64,92,63,89, 63,86,63,83,63,81,63,79,63,77,63,75,63,74,63,72,63 | 107,61,105,63,105,66,105,68,104,72,104,76,103,81,103, 87,103,94,103,101,103,108,103,115,103,122,103,129,103,135,103,141,104,147,105,152,106,156,107,160 | 170,69,170,73,170,76,170,80,170,85,170,89,169,94,169,98,169,104,169,109,169,115,169,122,169,129,169,134,169,140,169,145,169 "}]
— Astrit Spanca
30

Das JSON- Format kann nur die folgenden Werttypen enthalten:

  • Zeichenfolge
  • Nummer
  • Objekt
  • Array
  • wahr
  • falsch
  • Null

Ein Bild ist vom Typ "binär", was keines davon ist. Sie können also kein Bild direkt in JSON einfügen. Sie können das Bild in eine Textdarstellung konvertieren, die dann als normale Zeichenfolge verwendet werden kann.

Dies wird am häufigsten mit base64 erreicht . Anstatt es als 1und 0s zu codieren, werden im Grunde genommen 64 Zeichen verwendet, wodurch die Textdarstellung kompakter wird. So wird zum Beispiel die Zahl '64' in Binärform als dargestellt 1000000, während es in base64 einfach ein Zeichen ist : =.

Es gibt viele Möglichkeiten, Ihr Bild in base64 zu codieren, je nachdem, ob Sie es im Browser ausführen möchten oder nicht.

Beachten Sie, dass es bei der Entwicklung einer Webanwendung wesentlich effizienter ist, Bilder separat in binärer Form zu speichern und Pfade zu diesen Bildern in Ihrem JSON oder anderswo zu speichern. Dadurch kann der Browser Ihres Kunden die Bilder auch zwischenspeichern.

— lleaff
quelle
danke, ich wusste nicht einmal wirklich, wo ich anfangen sollte, weil Bilder nicht unter diese Kategorien fielen, aber jetzt verstehe ich.
— Dyll Bro
1

Um Dateien direkt in Mongo DB hochzuladen, können Sie Grid FS verwenden. Obwohl ich Ihnen vorschlagen werde, die Datei an einer beliebigen Stelle im Dateisystem hochzuladen und die URL des Bildes für jeden Eintrag in das JSON-Objekt einzufügen. Wenn Sie dann die Daten für ein bestimmtes Objekt aufrufen, können Sie das Bild über die URL aufrufen.

Sagen Sie mir, welche Backend-Technologie Sie verwenden? Darauf aufbauend kann ich weitere Vorschläge machen.

— Gandalf der Weiße
quelle
Ich verwende ein Java-Skript-Framework namens Meteor, das die gesamte bereits installierte Back-End-Technologie enthält. Es enthält mongo db, so dass Ihr Vorschlag wahrscheinlich funktionieren könnte. Ich werde es ausprobieren, vielen Dank!
— Dyll Bro
-2 
public class UploadToServer extends Activity {

TextView messageText;
Button uploadButton;
int serverResponseCode = 0;
ProgressDialog dialog = null;

String upLoadServerUri = null;

/********** File Path *************/
final String uploadFilePath = "/mnt/sdcard/";
final String uploadFileName = "Quotes.jpg";

@Override
public void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_upload_to_server);

    uploadButton = (Button) findViewById(R.id.uploadButton);
    messageText = (TextView) findViewById(R.id.messageText);

    messageText.setText("Uploading file path :- '/mnt/sdcard/"
            + uploadFileName + "'");

    /************* Php script path ****************/
    upLoadServerUri = "http://192.1.1.11/hhhh/UploadToServer.php";

    uploadButton.setOnClickListener(new OnClickListener() {
        @Override
        public void onClick(View v) {

            dialog = ProgressDialog.show(UploadToServer.this, "",
                    "Uploading file...", true);

            new Thread(new Runnable() {
                public void run() {
                    runOnUiThread(new Runnable() {
                        public void run() {
                            messageText.setText("uploading started.....");
                        }
                    });

                    uploadFile(uploadFilePath + "" + uploadFileName);

                }
            }).start();
        }
    });
}

public int uploadFile(String sourceFileUri) {

    String fileName = sourceFileUri;

    HttpURLConnection connection = null;
    DataOutputStream dos = null;
    String lineEnd = "\r\n";
    String twoHyphens = "--";
    String boundary = "*****";
    int bytesRead, bytesAvailable, bufferSize;
    byte[] buffer;
    int maxBufferSize = 1 * 1024 * 1024;
    File sourceFile = new File(sourceFileUri);

    if (!sourceFile.isFile()) {

        dialog.dismiss();

        Log.e("uploadFile", "Source File not exist :" + uploadFilePath + ""
                + uploadFileName);

        runOnUiThread(new Runnable() {
            public void run() {
                messageText.setText("Source File not exist :"
                        + uploadFilePath + "" + uploadFileName);
            }
        });

        return 0;

    } else {
        try {

            // open a URL connection to the Servlet
            FileInputStream fileInputStream = new FileInputStream(
                    sourceFile);
            URL url = new URL(upLoadServerUri);

            // Open a HTTP connection to the URL
            connection = (HttpURLConnection) url.openConnection();
            connection.setDoInput(true); // Allow Inputs
            connection.setDoOutput(true); // Allow Outputs
            connection.setUseCaches(false); // Don't use a Cached Copy
            connection.setRequestMethod("POST");
            connection.setRequestProperty("Connection", "Keep-Alive");
            connection.setRequestProperty("ENCTYPE", "multipart/form-data");
            connection.setRequestProperty("Content-Type",
                    "multipart/form-data;boundary=" + boundary);
            connection.setRequestProperty("uploaded_file", fileName);

            dos = new DataOutputStream(connection.getOutputStream());

            dos.writeBytes(twoHyphens + boundary + lineEnd);
            // dos.writeBytes("Content-Disposition: form-data; name=\"uploaded_file\";filename=\""
            // + fileName + "\"" + lineEnd);
            dos.writeBytes("Content-Disposition: post-data; name=uploadedfile;filename="
                    + URLEncoder.encode(fileName, "UTF-8") + lineEnd);

            dos.writeBytes(lineEnd);

            // create a buffer of maximum size
            bytesAvailable = fileInputStream.available();

            bufferSize = Math.min(bytesAvailable, maxBufferSize);
            buffer = new byte[bufferSize];

            // read file and write it into form...
            bytesRead = fileInputStream.read(buffer, 0, bufferSize);

            while (bytesRead > 0) {

                dos.write(buffer, 0, bufferSize);
                bytesAvailable = fileInputStream.available();
                bufferSize = Math.min(bytesAvailable, maxBufferSize);
                bytesRead = fileInputStream.read(buffer, 0, bufferSize);

            }

            // send multipart form data necesssary after file data...
            dos.writeBytes(lineEnd);
            dos.writeBytes(twoHyphens + boundary + twoHyphens + lineEnd);

            // Responses from the server (code and message)
            int serverResponseCode = connection.getResponseCode();
            String serverResponseMessage = connection.getResponseMessage();

            Log.i("uploadFile", "HTTP Response is : "
                    + serverResponseMessage + ": " + serverResponseCode);

            if (serverResponseCode == 200) {

                runOnUiThread(new Runnable() {
                    public void run() {

                        String msg = "File Upload Completed.\n\n See uploaded file here : \n\n"
                                + " http://www.androidexample.com/media/uploads/"
                                + uploadFileName;

                        messageText.setText(msg);
                        Toast.makeText(UploadToServer.this,
                                "File Upload Complete.", Toast.LENGTH_SHORT)
                                .show();
                    }
                });
            }

            // close the streams //
            fileInputStream.close();
            dos.flush();
            dos.close();

        } catch (MalformedURLException ex) {

            dialog.dismiss();
            ex.printStackTrace();

            runOnUiThread(new Runnable() {
                public void run() {
                    messageText
                            .setText("MalformedURLException Exception : check script url.");
                    Toast.makeText(UploadToServer.this,
                            "MalformedURLException", Toast.LENGTH_SHORT)
                            .show();
                }
            });

            Log.e("Upload file to server", "error: " + ex.getMessage(), ex);
        } catch (Exception e) {

            dialog.dismiss();
            e.printStackTrace();

            runOnUiThread(new Runnable() {
                public void run() {
                    messageText.setText("Got Exception : see logcat ");
                    Toast.makeText(UploadToServer.this,
                            "Got Exception : see logcat ",
                            Toast.LENGTH_SHORT).show();
                }
            });
            Log.e("Upload file to server Exception",
                    "Exception : " + e.getMessage(), e);
        }
        dialog.dismiss();
        return serverResponseCode;

    } // End else block
}

PHP-Datei

<?php
$target_path  = "./Upload/";
$target_path = $target_path . basename( $_FILES['uploadedfile']['name']);

if(move_uploaded_file($_FILES['uploadedfile']['tmp_name'], $target_path)) {
    echo "The file ".  basename( $_FILES['uploadedfile']['name']).    " has been uploaded";
} else {
    echo "There was an error uploading the file, please try again!";
}

?>
Ich bin nicht wirklich sicher, was in Ihrem Code los ist ... können Sie bitte erklären
— Dyll Bro
Grundsätzlich das Bild in JSON mit PHP und Java @Dyll Bro
Ok, ich verstehe, könnte dieser Code universell funktionieren? Wie in könnte ich dies kopieren und einfügen und meine auf die gleiche Weise arbeiten lassen
— Dyll Bro
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.