事情的起因是这样的,这周在工作时,调用了一个图片转灰度透明的接口,返回来的是一个image字段不是一个url地址,是一个base64编码的字符串,和后端沟通的时候,也明白了为什么返回base64编码,而不是一个url地址,因为后端处理完前端发送过的图片后,根本没存入数据库中,也就没有url地址了,调用的图片转灰度接口,只是一个工具接口而已,并不会产生服务器级别的操作,所以处理完后直接返回一个base64的编码
一般来说,图片在后端的存储方式分为两种:
- 可以将图片以独立文件的形式存储在服务器的指定文件夹中,再
将路径存入数据库字段中
; - 将图片
转换成二进制流或base64
,直接存储到数据库的 Image 类型字段中.
对于第一种存储方式,我们前端直接将存储路径赋值给 src 属性即可轻松显示。
对于第二种存储方式,我们前端需要将二进制流交由 blob 对象处理,然后通过 blob 的 API 生成临时 URL 赋值给 src 属性来显示。或者将base64直接赋值给src属性
我觉得没人会用第二种吧,毕竟采用第二种方式存储图片,需要的空间太大了,如果前端得到的是base64或者二进制串就得通过一些方法,把格式转换成能展示出图片的编码格式了,一不做二不休,干脆总结一下常用的格式转换方法把
一般来说前端展示图片会通过三种方式: url、base64、blob
url: 一般来说,图片的显示还是建议使用url的方式比较好。
let base64Str = "http://xxxxxx"
$("#img").attr("src",base64Str)
base64: 如果图片较大,图片的色彩层次比较丰富,则不适合使用这种方式,因为其Base64编码后的字符串非常大,会明显增大HTML页面,影响加载速度。如果图片像loading或者小图标,小图片这样的,大小极小,但又占据了一次HTTP请求,而很多地方都会使用。则非常适用“base64:URL图片”技术进行优化了!
let base64Str = "data:image/png;base64,iVBORw0KG.....AAAAElFTkSuQmCC"
$("#img").attr("src",base64Str)
blob: 当后端返回特定的图片二进制流的时候,前端用blob
容器接收二进制流,再通过 URL.createObjectURL
生成一个临时blob展示地址
let blob = new Blob([图片二的进制流],{
type:'image/jpeg'})
let url = URL.createObjectURL(blob) //创建URL,
$("#img").attr("src",url)
字符串、url、base64、blob(File)的相互转换
总结出一张我自己画的图:
后续发现新东西会持续补充
如果想要更加详细的关系,可参考这张图
url 转 base64
原理: 利用canvas.toDataURL
的API
转化成base64
function urlToBase64(url) {
return new Promise ((resolve,reject) => {
let image = new Image();
image.onload = function() {
let canvas = document