我正在建立一个视频游戏数据库,每个数据库都包含游戏的名称,类型和图像。是否可以将图像放入db的json对象中?如果没有解决的办法?
我可以考虑通过两种方式做到这一点:
将文件存储在文件系统中的任何目录中(例如dir1)并重命名,以确保每个文件的名称都是唯一的(可能是时间戳记)(例如xyz123.jpg),然后将该名称存储在某些数据库中。然后,在生成JSON的同时,您提取此文件名并生成完整的URL(将为http://example.com/dir1/xyz123.png)并将其插入JSON中。
dir1
xyz123.jpg
http://example.com/dir1/xyz123.png
Base 64编码,基本上是一种以ASCII文本编码任意二进制数据的方式。每3个字节的数据需要4个字符,最后可能还要填充一点。基本上,输入的每6位均以64个字符的字母编码。“标准”字母使用AZ,az,0-9和+和/,并带有=作为填充字符。有URL安全变体。因此,这种方法将允许您将图像直接放入MongoDB中,同时将其存储在图像中并在获取图像时进行解码,但是它也有一些缺点:
资源
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
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 });