前端图片处理的基本知识补充篇（url,blog,base64之间的关系）

最新推荐文章于 2024-01-29 11:49:29 发布

如何在5年薪百万

最新推荐文章于 2024-01-29 11:49:29 发布

阅读量1.4k

点赞数

分类专栏：前端技术

本文链接：https://blog.csdn.net/kouryoushine/article/details/102913856

版权

前端技术专栏收录该内容

14 篇文章

订阅专栏

本文深入探讨了图片处理中的核心概念，包括blog、url、base64的定义及其相互关系，阐述了如何通过不同方法获取和转换图片对象，以及在实际应用中如何利用FileReader和URL API获取图片的url和base64编码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景

上篇博客讲述了一些基础概念，世界工作中发现还是有很多困惑的地方。究其原因在于不理解图片到底是什么，有多少种变种。今天整理一下，通过了解这些只是可以帮助我们快速理解各种图片处理的代码和过程。
https://blog.csdn.net/kouryoushine/article/details/97628481

知识点

1，blog,url,base64是什么？

blog对象

Blob 对象表示一个不可变、原始数据的类文件对象。
file是基于blog扩展后，文件系统上的file对象。
imge就是文件的一种了类型，图片累的对象。
我们称图片的blog对象是扩大的说法，也可以说是图片的file对象，也是图片对象。概念上，三者是一致的。
三者从属关系上如下，
image对象 => file 对象 =》 blog对象

当有人提起图片的blog对象,file对象的时候，要清楚指的都是图片对象本身。这个对象包含了图片本身数据，基于这些数据图片才能显示出来。这个对象就是你手里拿的那张照片，而不是照片的大小，位置等。

url 连接

url大家建的很多了，在这里也是一个意思。url是一个字符串对象，指向图片对象所在的路径。通过url可能找到对象，但不代表对象本身。如果把本地的url放到网络中，由于找不到图片对象，所以无法加载。

base64

Base64是网络上最常见的用于传输8Bit字节码的编码方式之一，Base64就是一种基于64个可打印字符来表示二进制数据的方法。Base64编码是从二进制到字符的过程，可用于在HTTP环境下传递较长的标识信息。采用Base64编码具有不可读性，需要解码后才能阅读。

blog是2进制文件用户文件传输，基于url的base64可以用于文件的字符表示。

简单说：base64其实和file对象一样的，都是一种数据的存储形式，但是base64可以直接被设定到img的src中，可以用来显示图片。

总结：

文件的显示，需要通过url，或者base64
文件的上传和传输必须是blog或者base64

2 如何获取file(blog)对象

https://blog.csdn.net/kouryoushine/article/details/102916180

2.1 input按钮

<input type="file" id="input">
当我们点击file标签的时候一定会弹出文件选择的界面，当我们选择一个图片或者文件时，浏览器dom中会产生一个fileList对象。file对象的数组

2.2 DOM API

const selectedFile = document.getElementById('input').files[0];
选择1个文件的时候，可以获取数组的第一个元素。

2.3 base64转换为blog

这里省略，自行百度

2.4 其他方式返回的blog对象

比如压缩后返回的blog,cavas返回的blog对象，这些都是blog对象，符合blog对象的定义

3 如何获取对象的url 和base64

3.1 FileReader API (readAsDataURL)

返回data:URL格式的字符串（base64编码）以表示所读取文件的内容。其实就是base64

instanceOfFileReader.readAsDataURL(blob);

function handleFiles(files) {

 # 获取每一个图片对象
  for (var i = 0; i < files.length; i++) {
    var file = files[i];
    # 重点，读取图片的file（blog)对象，并且将返回的url设定到img的src属性中
    var reader = new FileReader();
    reader.onload = (function(aImg) { do sth }; })(img);
    reader.readAsDataURL(file);
  }
}

3.2 objectURL = URL.createObjectURL(object);

返回的是个url

function handleFiles(files) {

    for (let i = 0; i < files.length; i++) {
      const li = document.createElement("li");
      list.appendChild(li);
      
      const img = document.createElement("img");
      img.src = window.URL.createObjectURL(files[i]);
      img.height = 60;
      img.onload = function() {
        window.URL.revokeObjectURL(this.src);
      }
      li.appendChild(img);
      const info = document.createElement("span");
      info.innerHTML = files[i].name + ": " + files[i].size + " bytes";
      li.appendChild(info);
    }
  }

URL.createObjectURL()与FileReader.readAsDataURL() 区别

返回值

FileReader.readAsDataURL(file)可以得到一段base64的字符串。
URL.createObjectURL(file)可以得到当前文件的一个内存URL。

内存使用

FileReader.readAsDataURL(file)的返回值是转化后的超长base64字符串(长度与要解析的文件大小正相关)。
URL.createObjectURL(file)的返回值虽然是字符串，但是是一个url地址。

参考连接

https://www.jianshu.com/p/69c57e60c525