web-dev-qa-db-fra.com

Comment mettez-vous un fichier image dans un objet JSON?

Je crée une base de données pour les jeux vidéo, chacune contenant des éléments tels que le nom, le genre et l'image du jeu. Est-il possible de mettre des images dans un objet JSON pour la base de données? Si non, y a-t-il un moyen de contourner cela?

javascriptarraysjsonmongodb
40
Dyll Bro

Je peux penser à le faire de deux manières:

1.

Stocker le fichier dans le système de fichiers dans n'importe quel répertoire (par exemple, dir1) et le renommer, ce qui garantit que le nom est unique pour chaque fichier (peut être un horodatage) (par exemple, xyz123.jpg), puis en enregistrant ce nom. dans une base de données. Ensuite, lors de la génération du fichier JSON, vous extrayez ce nom de fichier et générez une URL complète (qui sera http://example.com/dir1/xyz123.png]), puis insérez-le dans le fichier JSON.

2.

Encodage en base 64, c’est un moyen de coder des données binaires arbitraires en ASCII texte. Il faut 4 caractères par 3 octets de données, plus éventuellement un peu de bourrage à la fin. Chaque 6 bits de l'entrée sont essentiellement codés dans un alphabet de 64 caractères. L'alphabet "standard" utilise A à Z, a à z, 0 à 9 et + et /, avec = comme caractère de remplissage. Il existe des variantes sécurisées pour les URL. Cette approche vous permettra donc de placer votre image directement dans MongoDB, tout en la stockant Encoder l'image et la décoder en la récupérant, elle présente certains de ses propres inconvénients:

  • l'encodage base64 augmente la taille des fichiers d'environ 33% par rapport à leur représentation binaire d'origine, ce qui signifie davantage de données en aval (cela peut être exceptionnellement douloureux sur les réseaux mobiles).
  • les URI de données ne sont pas supportés sur IE6 ou IE7.
  • le traitement des données codées en base64 peut prendre plus de temps que des données binaires.

Source

Conversion d'image en DATA URI

A.) Toile

Chargez l'image dans un objet image, peignez-la dans un canevas et reconvertissez le canevas en 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;
}

Utilisation 

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

Formats d'entrée pris en charge image/png, image/jpeg, image/jpg , image/gif, image/bmp, image/tiff, image/x-icon, image/svg+xml, image/webp, image/xxx

B.) FileReader

Chargez l'image en tant que blob via XMLHttpRequest et utilisez l'API FileReader pour la convertir en URL de données.

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();
}

Cette approche

  • manque de support du navigateur
  • a une meilleure compression
  • fonctionne également pour d'autres types de fichiers.

Utilisation 

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

Source

38
void

Le format JSON ne peut contenir que les types de valeur suivants:

  • chaîne
  • nombre
  • objet
  • tableau
  • true
  • false
  • null

Une image est du type "binaire" qui n'en est aucune. Donc, vous ne pouvez pas directement insérer une image dans JSON. Ce que vous pouvez faire est de convertir l'image en une représentation textuelle qui peut ensuite être utilisée comme une chaîne normale.

Le moyen le plus courant pour y parvenir est avec ce qu'on appelle base64 . Fondamentalement, au lieu de l'encoder sous la forme 1 et 0s, il utilise une plage de 64 caractères, ce qui en rend la représentation textuelle plus compacte. Ainsi, par exemple, le nombre '64' en binaire est représenté par 1000000, alors qu'en base64, il s'agit simplement d'un caractère: =.

Il existe de nombreuses manières d’encoder votre image en base64 selon que vous voulez le faire dans le navigateur ou non.

Notez que si vous développez une application Web, il sera beaucoup plus efficace de stocker les images séparément sous forme binaire et de stocker les chemins d'accès à ces images dans votre JSON ou ailleurs. Cela permet également au navigateur de votre client de mettre en cache les images.

12
lleaff

Utiliser un schéma d'URL de données: https://en.wikipedia.org/wiki/Data_URI_scheme

Dans ce cas, vous utilisez cette chaîne directement en HTML: <img src="data:image/png;base64,iVBOR....">

5
c-smile

Pour télécharger des fichiers directement sur Mongo DB, vous pouvez utiliser Grid FS. Bien que je vous suggère d’envoyer le fichier n’importe où dans le système de fichiers et de placer l’URL de l’image dans l’objet JSON pour chaque entrée, vous pouvez appeler l’image en utilisant un URL pour un objet spécifique.

Dites-moi quelle technologie backend utilisez-vous? Je peux donner plus de suggestions sur cette base.

1
Gandalf the White
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
}

Fichier PHP 

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

?>
1
user5613751