js实现图片转base64(兼容IE8+)

最近做电商项目，遇到如下一个需求：

商品评价页面：用户上传图片，点击“”确定“”前，图片由前端实现base64转码（ps:由于商品评价页面可能存在多个产品，每个产品评价又可上传多张图片，所有前端img 转码可以有效的优化http请求，减小服务器的压力）

下面我们一步一步来看看demo代码：

（1）定义一个隐藏的input[type = "file"]，通过按钮触发其change事件

<center>

    <!-- 图片上传表单 -->
    <form>
      <input type="file" class="file-hook" onchange="PreviewImage(this)" style="display: none" />
    </form>

    <!-- 图片容器 -->
    <div class="img-wrapper">
      <!-- 图片列表 -->
      <div class="img-list">
       <!--  <div class="img-item">
          <div>
            <img src="img/xin1.jpg" width="200" height="200" alt="图片描述" />
          </div>
          <span class="delete-hook">删除</span>
        </div> -->
      </div>
      <!-- 上传按钮 -->
      <div class="upload-btn">
        <button class="upload-hook">上传图片</button>
      </div>
    </div>
    
  </center>

// 上传图片
$(".upload-hook").click(function(){
  $(".file-hook").click();
})

// input[type="file"]监听函数
function PreviewImage(imgFile){
  //传递的参数：input当前对象
  //图片容器 
  //图片宽度
  //图片高度（宽高不传：默认200x200）
  var base64 = new Base64(imgFile, $(".img-list"), 200, 200);
}

（2）开始定义base64插件

*****base64插件有两块核心内容，对IE浏览器和其余主流浏览器下图片的处理

（3）最终效果如下

更多可参考： https://github.com/chuanzaizai/img-transform-base64-