图片的格式，前端如何上传图片

参考文章：
jpg、png、svg、gif等图片格式的区别
png,jpg,svg的区别

一些概念

位图和矢量图

位图：点阵图（像素图），由电脑上屏幕上的发光（像素）的构成，如jpg，png，gif等
矢量图：向量图，由一系列计算机指令来描述和记录一幅画，如svg等

有损压缩和无损压缩

无损压缩:对文件本身的压缩，使图片占用的存储空间变小，并且不会损坏图片的质量，如png等；
有损压缩：对图像本身的改变，会对图片质量造成损害，随着压缩次数越来越多，图片质量会越来越差，如jpg等；

PNG vs JPG vs SVG vs Base64

JPG

• 它采用一种特殊的有损压缩算法，将不易被人眼察觉的图像颜色删除，从而达到较大的压缩比(可达到2:1甚至40:1)。
• 因为JPEG格式的文件尺寸较小，加载快，所以是互联网上最广泛使用的格式之一。
• 不支持透明
• 不支持动画

PNG

• 与JPG格式类似
• 无损压缩
• 质量高、体积大
• 支持透明
• 不支持动画

Gif

• 支持动画
• 支持透明背景图像

SVG

• 文本文件
• 它提供了目前网络流行的GIF和JPEG格式无法具备的优势：可缩放且不会损失图片质量
• 平均来讲，SVG文件比JPEG和GIF格式的文件要小很多，因而下载也很快。但是当图形的复杂度变高的时候，SVG 文件大小会随之上升。
• 可编辑和可搜寻；
• 因为 SVG 在渲染的时候需要比像素图更多的计算能力，这也意味着性能的损耗。

Base64

• 文本文件
• 依赖编码，通过对图片进行 Base64 编码，我们可以直接将编码结果写入 HTML 或者写入 CSS，从而减少 HTTP
  请求的次数
• 是小图标的解决方案。

参考图片Base64编码

图片的 base64 编码就是可以将一副图片数据编码成一串字符串，使用该字符串代替图像地址。
这样做有什么意义呢？我们知道，我们所看到的网页上的每一个图片，都是需要消耗一个 http 请求下载而来的。
没错，不管如何，图片的下载始终都要向服务器发出请求，要是图片的下载不用向服务器发出请求，而可以随着 HTML 的下载同时下载到本地那就太好了，而 base64 正好能解决这个问题。
使用 base64 的一个前提，那就是被 base64 编码的图片足够尺寸小，尽可能在图片不超过2KB的情况下：
如图所示，博客园的 Logo 只有 3.27KB，已经很小了，但是如果将其制作转化成 base64 编码，生成的 base64 字符串编码足足有 4406 个,也就是说，图片被编码之后，生成的字符串编码大小一般而言都会比原文件稍大一些。即便 base64 编码能够被 gzip 压缩，压缩率能达到 50% 以上，想象一下，一个元素的 css 样式编写居然超过了 2000个 字符，那对 css 整体的可读性将会造成十分大的影响，代码的冗余使得在此使用 base64 编码将得不偿失。

上传图片

前端上传图片的原理是：

1. 运用input type=“file”的标签获取图片
2. 使用可读取文件的对象，比如FileReader/FormData获得文件数据
3. 之后通过ajax之类的方式传到后台
   （目前没看到在前端储存图片的，如果需要保存，都是传给后端保存）

图片传给后台的3种格式

参考：
js 图片上传传给后台的几种格式，formData，base64，file，blob流
js 图片上传给后台的3种格式

1. file

创建FormData对象来完成file上传

<input type="file" id="imgfile" name="pic" multiple>
<script>
    $("#imgfile").change(function () {
        var formData = new FormData();
        $.each($('#imgfile')[0].files, function (i, file) {
            formData.set('upload_file'+ i, file);
        });
        //processData: false, contentType: false,多用来处理异步上传二进制文件。
        $.ajax({
            url: 'xxx',
            type: 'POST',
            data: formData,                    // 上传formdata封装的数据
            dataType: 'JSON',
            cache: false,                      // 不缓存
            processData: false,                // jQuery不要去处理发送的数据
            contentType: false,                // jQuery不要去设置Content-Type请求头
            success:function (data) {           //成功回调
                console.log(data);
            }
        });
    });
 </script>

2. Base64

创建FileReader对象来完成

<input type="file" id="imgfile">
 
var base64Pic = ''
document.getElementById('imgfile').onchange = function(){
      var fileReader = new FileReader();
      fileReader.readAsDataURL(this.files[0]);
      fileReader.onload = function(){
          base64Pic = fileReader.result;
          console.log(base64Pic )  //base64   可以直接放在src上 预览
      }
}

3. Blob流

blob流和base64，以及file和base64是可以相互转换的

补充 FormData - FileReader

参考FileReader简介
FormData对象是HTML5新加的一个对象