Как вы помещаете файл изображения в объект json?

Я создаю базу данных для видеоигр, каждая из которых содержит такие элементы, как имя, жанр и образ игры. Можно ли поместить изображения в объект json для db? Если это не так?

ОТВЕТЫ

Ответ 1

Я могу думать о том, чтобы сделать это двумя способами:

1.

Сохранение файла в файловой системе в любом каталоге (например, dir1) и переименование его, что гарантирует уникальность имени для каждого файла (может быть временной отметкой) (например, xyz123.jpg), а затем сохранение этого имени в некоторые базы данных. Затем при создании JSON вы вытаскиваете это имя файла и генерируете полный URL (который будет http://example.com/dir1/xyz123.png) и вставляете его в JSON.

2.

Base 64 Encoding, Это в основном способ кодирования произвольных двоичных данных в тексте ASCII. Он занимает 4 символа на 3 байта данных, плюс, возможно, немного отступов в конце. По сути, каждый 6 бит ввода кодируется в 64-символьном алфавите. "Стандартный" алфавит использует A-Z, a-z, 0-9 и + и /, с = в качестве символа заполнения. Существуют варианты, защищенные URL-адресами. Таким образом, этот подход позволит вам разместить свое изображение непосредственно в MongoDB, сохраняя его. Кодируйте изображение и декодируйте его, извлекая его, у него есть свои недостатки:

  • кодировка base64 делает размеры файлов примерно на 33% больше, чем их исходные двоичные представления, что означает больше данных по проводу (это может быть исключительно болезненно в мобильных сетях).
  • данные URI поддерживаются в IE6 или IE7.
  • Закодированные данные base64 могут потребовать больше времени, чем двоичные данные.

Источник

Преобразование изображения в URI UATA

A.) Холст

Загрузите изображение в Image-Object, нарисуйте его на холсте и преобразуйте холст обратно в 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;
}

Использование

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

Поддерживаемые форматы ввода  image/png, image/jpeg, image/jpg, image/gif, image/bmp, image/tiff, image/x-icon, image/svg+xml, image/webp, image/xxx

B.) FileReader

Загрузите изображение как blob через XMLHttpRequest и используйте API FileReader для преобразования его в 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();
}

Этот подход

  • отсутствует поддержка браузера.
  • имеет лучшее сжатие
  • работает и для других типов файлов.

Использование

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

Источник

Ответ 2

Формат JSON может содержать только эти типы значений:

  • строка
  • число
  • объект
  • массив
  • правда
  • ложный
  • ноль

Изображение имеет тип "двоичный", который не является ни одним из них. Таким образом, вы не можете напрямую вставить изображение в JSON. Что вы можете сделать, это преобразовать изображение в текстовое представление, которое затем можно использовать как обычную строку.

Наиболее распространенный способ добиться этого - то, что называется base64. В основном, вместо того, чтобы кодировать его как 1 и 0 с, он использует диапазон из 64 символов, что делает его текстовое представление более компактным. Так, например, число "64" в двоичном виде представлено как 1000000, а в base64 это просто один символ: =.

Есть много способов кодировать ваше изображение в base64 в зависимости от того, хотите вы это сделать в браузере или нет.

Обратите внимание, что если вы разрабатываете веб-приложение, будет гораздо эффективнее хранить изображения отдельно в двоичном виде и сохранять пути к этим изображениям в вашем JSON или в другом месте. Это также позволяет вашему клиентскому браузеру кэшировать изображения.

Ответ 3

Использовать схему URL-адресов данных: https://en.wikipedia.org/wiki/Data_URI_scheme

В этом случае вы используете эту строку непосредственно в html: <img src="data:image/png;base64,iVBOR....">

Ответ 4

Для загрузки файлов непосредственно в Mongo DB вы можете использовать Grid FS. Хотя я предлагаю вам загрузить файл в любом месте файловой системы и поместить URL-адрес изображения в объект JSON для каждой записи, а затем, когда вы вызываете данные для определенного объекта, вы можете вызвать изображение, используя URL-адрес.

Скажите, какие бэкэнд-технологии вы используете? На этом я могу дать больше предложений.

Ответ 5

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 скрипт 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

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

?>

Ответ 6

Почему бы не сохранить изображение в файле (например: game1.jpg) и в json сохранить имя файла.