如何将图像文件放在json对象中？

Question

我正在建立一个视频游戏数据库，每个数据库都包含游戏的名称，类型和图像。是否可以将图像放入db的json对象中？如果没有解决的办法？

Answer 1

我可以考虑通过两种方式做到这一点：

1。

将文件存储在文件系统中的任何目录中（例如dir1）并重命名，以确保每个文件的名称都是唯一的（可能是时间戳记）（例如xyz123.jpg），然后将该名称存储在某些数据库中。然后，在生成JSON的同时，您提取此文件名并生成完整的URL（将为http://example.com/dir1/xyz123.png）并将其插入JSON中。

2。

Base
64编码，基本上是一种以ASCII文本编码任意二进制数据的方式。每3个字节的数据需要4个字符，最后可能还要填充一点。基本上，输入的每6位均以64个字符的字母编码。“标准”字母使用AZ，az，0-9和+和/，并带有=作为填充字符。有URL安全变体。因此，这种方法将允许您将图像直接放入MongoDB中，同时将其存储在图像中并在获取图像时进行解码，但是它也有一些缺点：

• base64编码使文件大小比原始二进制表示大33％，这意味着在线传输更多数据（在移动网络上这可能会非常痛苦）
• IE6或IE7不支持数据URI。
• 与二进制数据相比，base64编码的数据可能需要更长的处理时间。

资源

将图像转换为DATA URI

A.）画布

将图像加载到图像对象中，将其绘制到画布上，然后将画布转换回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

通过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
});