javascript - 如何将图像文件放入 json 对象中？

Question

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

Answer 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.) Canvas

将图像加载到 Image-Object 中，将其绘制到 Canvas 上并将 Canvas 转换回 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, 图像/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