一尘不染

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

json

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


阅读 1789

收藏
2020-07-27

共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/pngimage/jpegimage/jpgimage/gifimage/bmpimage/tiffimage/x-iconimage/svg+xmlimage/webpimage/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
});
2020-07-27