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

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?

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

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.

Verwenden Sie das Daten-URL-Schema: https://en.wikipedia.org/wiki/Data_URI_scheme

In diesem Fall verwenden Sie diese Zeichenfolge direkt in HTML: <img src="data:image/png;base64,iVBOR....">

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.

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!";
}

?>