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

Question

我正在制作一个视频游戏数据库,每个数据库都包含游戏的名称,类型和图像等元素.是否可以将图像放入数据库的json对象？如果没有办法解决这个问题？

Answer 1

我可以想到以两种方式做到这一点:

1.

将文件存储在任何目录(例如dir1)中的文件系统中并重命名,以确保该名称对于每个文件(可能是时间戳)(例如xyz123.jpg)是唯一的,然后将此名称存储在某个DataBase中.然后在生成JSON时,您将获取此文件名并生成完整的URL(将是http://example.com/dir1/xyz123.png)并将其插入JSON中.

2.

Base 64 Encoding,它基本上是一种用ASCII文本编码任意二进制数据的方法.每3字节数据需要4个字符,最后可能还有一些填充.基本上每6位输入都用64个字符的字母表编码."标准"字母表使用AZ,az,0-9和+和/,=作为填充字符.有URL安全的变种.因此,这种方法将允许您将图像直接放在MongoDB中,同时存储它对图像进行编码并在获取图像时进行解码,它有一些自身的缺点:

• base64编码使文件大小比原始二进制表示大约大33%,这意味着更多的数据(在移动网络上可能会非常痛苦)
• IE6或IE7不支持数据URI.
• base64编码的数据可能比二进制数据需要更长的时间来处理.

资源

将图像转换为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.)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
});

资源

Answer 2

该JSON格式可以只包含那些类型的数值:

• 串
• 数
• 宾语
• 排列
• 真正
• 假
• 空值

图像的类型为"二进制",它们都不是.所以你不能直接将图像插入JSON.你可以做的是将图像转换为文本表示,然后可以将其用作普通字符串.

实现这一目标的最常见方式是使用所谓的base64.基本上,它不使用1和0s 编码,而是使用64个字符的范围,这使得它的文本表示更紧凑.例如,二进制数字'64'表示为1000000,而在base64中,它只是一个字符:=.

有多种方法可以在base64中对图像进行编码,具体取决于您是否要在浏览器中执行此操作.

请注意,如果您正在开发Web应用程序,以二进制形式单独存储图像,并在JSON或其他地方存储这些图像的路径会更有效.这也允许客户端的浏览器缓存图像.

Answer 3

使用数据URL方案：https : //en.wikipedia.org/wiki/Data_URI_scheme

在这种情况下，您可以直接在html中使用该字符串： <img src="data:image/png;base64,iVBOR....">