如何将图像文件放入 json 对象中？
Posted
技术标签:
【中文标题】如何将图像文件放入 json 对象中？【英文标题】：How do you put an image file in a json object? 【发布时间】：2016-04-01 19:47:30 【问题描述】：我正在为视频游戏创建一个数据库，每个数据库都包含游戏名称、类型和图像等元素。是否可以将图像放入数据库的 json 对象中？如果没有，有没有办法解决这个问题？
【问题讨论】：
你可以convert it to base64 @WhiteHat base 64 是如何工作的？ 只是表示，将图片转成base64字符串，可以转回图片-->example
@WhiteHat 太棒了，谢谢！
对这个问题没什么不清楚的，投票重新打开。
【参考方案1】：
我可以考虑两种方式：
1.
将文件存储在文件系统中的任何目录（比如dir1）并重命名它以确保每个文件的名称都是唯一的（可能是时间戳）（比如xyz123.jpg），然后将此名称存储在一些数据库。然后在生成 JSON 时，您提取此文件名并生成一个完整的 URL（将是 http://example.com/dir1/xyz123.png ）并将其插入 JSON。
2.
Base 64 Encoding，它基本上是一种在 ASCII 文本中编码任意二进制数据的方法。每 3 个字节的数据需要 4 个字符，最后可能还有一些填充。本质上，输入的每 6 位都以 64 个字符的字母表编码。 “标准”字母表使用 A-Z、a-z、0-9 和 + 和 /，其中 = 作为填充字符。有 URL 安全的变体。所以这种方法可以让你把你的图片直接放到MongoDB里面，存储的时候对图片进行编码，获取的时候解码，它有一些自己的缺点：
base64 编码使文件大小比其原始二进制表示大约大 33%，这意味着更多的数据通过网络传输（这在移动网络上可能特别痛苦） IE6 或 IE7 不支持数据 URI。 base64 编码数据的处理时间可能比二进制数据长。Source
将图像转换为 DATA URI
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.) 文件阅读器
通过 XMLHttpRequest 将图像加载为 blob，并使用 FileReader API 将其转换为数据 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
);
Source
【讨论】：
太棒了，非常感谢，不过只有一个问题。如果我要上传很多图片，但用户一次只能看到几张图片，那么 base 64 对我来说是最佳选择吗？它似乎比替代方案更简单。 您能否更深入地了解您的第一个选项？也许提供一个示例 json 对象，那就太好了！ “base64 编码使文件大小大约增加 33%” 但gzip 是您使用解决方案 2 时的朋友。 我有一些以这种格式存储的图像。知道如何转换它们吗？ [ "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，“] 跨度> 【参考方案2】：JSON 格式只能包含那些类型的值：
字符串 号码 对象 数组 是的 错误 空图像属于“二进制”类型，而这些都不是。 因此，您不能直接将图像插入 JSON。您可以做的是将图像转换为文本表示，然后可以将其用作普通字符串。
实现这一目标的最常见方法是使用所谓的base64。基本上，它不是将其编码为1 和0s，而是使用64 个字符的范围，这使得它的文本表示更加紧凑。例如，二进制中的数字“64”表示为1000000，而在base64中它只是一个字符：=。
有很多方法可以用 base64 对图像进行编码，具体取决于您是否愿意 in the browser。
请注意，如果您正在开发 Web 应用程序，以二进制形式单独存储图像并将这些图像的路径存储在 JSON 或其他位置会更有效。这也允许您的客户端的浏览器缓存图像。
【讨论】：
谢谢，我什至不知道从哪里开始，因为图片不属于这些类别，但现在我明白了。 数字64不仅仅是一个字符，它是：NjQ=特殊字符“=”表示填充【参考方案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 调用图像。
告诉我您使用的是哪种后端技术？我可以在此基础上提出更多建议。
【讨论】：
我正在使用一个名为 meteor 的 java 脚本框架，它已经安装了所有后端技术。它包括 mongo db，因此您的建议可能会奏效。我会检查一下非常感谢！【参考方案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 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 文件
<?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!";
?>
【讨论】：
我不太确定您的代码中发生了什么...请您解释一下 基本上使用 PHP 和 Java @Dyll Bro 将图像放入 JSON 中 好的，我明白了，这段代码可以通用吗？就像我可以复制并粘贴它并让我的工作方式一样以上是关于如何将图像文件放入 json 对象中？的主要内容，如果未能解决你的问题，请参考以下文章
如何将图像和纹理添加到 Three.js JSON 对象文件