JS获取本地上传图片的base64编码并读取图片的宽和高

站长

2022年09月08日 22:31 · 阅读数 31

背景

最近做了图片上传和预览的功能，总结了原生js获取本地上传图片的base64编码并读取图片的宽和高的实现方法。

实现

1、效果假设我们的文件上传页面结构是这样的： JS获取本地上传图片的base64编码并读取图片的宽和高当我们点击附件信息处的加号时就会调出图片上传，选择一张图片进行上传。图片上传成功鼠标悬浮在图片上将出现放大和删除的图标。点击放大镜我们可以预览图片

2、页面标签：我们精简一下页面，只留下图片上传及预览所用到的页面标签，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片上传</title>
</head>
<body>
    <!-- 文件上传框区域,我们只接受图片类型的文件上传 隐藏域-->
    <input class="ivu-input-file" type="file" accept="image/gif,image/jpeg,image/jpg,image/png" style="display:none"/>
    <!-- 上传文件展示区域 -->
    <div class="ivu-img-wrapper">
      <!--这里是图片容器-->
      <--上传后展示的图片 动态创建标签-->
      <img class="ivu-file-img" src="${src}"></img>
      <--鼠标悬浮出现预览和删除按钮图标 动态创建标签-->
      <div class="ivu-file-pop">
        <img src="${enlarge}" id="ivu-enlarge-${order}"></img>
        <img src="${cut}" id="ivu-cut-${order}"></img>
      </div>
      <!--点击该区域进行图片上传-->    
      <div class="ivu-annex">
          +
      </div>
    </div>
   <--遮罩层 图片预览显示-->
    <div class="ivu-pop">
        <div class="ivu-pop-wrapper">
            <img class="ivu-pop-close" src="${closePop}">
            </img>
            <img class="ivu-pop-img" src="${down}"></img>
        </div>
    </div>
</body>
<script>
   
</script>
</html>

3、js代码我们用原生js来实现第一个步骤所描述的效果。以下代码将添加到上个步骤的<script>标签中首先我们给加号绑定事件

  //获取加号元素
  let annex = document.querySelector(".ivu-annex");
 //绑定点击事件
  annex.addEventListener("click", function() {
    //拿到隐藏的文件上传域
    let fileDomain = document.querySelector(".ivu-input-file");
    //触发文件上传域事件
    fileDomain.click();
  });

接下来我们来绑定文件上传域事件

//文件上传域元素
let fileInput = document.querySelector(".ivu-input-file");
//用来存放base64图片的数组
var fileList = [];
//给文件上传域绑定change事件
fileInput.addEventListener("change", function() {
    //获取存放图片的容器
    let imgWrapper = document.querySelector(".ivu-img-wrapper");
    //获取加号元素
    let operate = document.querySelector(".ivu-annex");
    //获取上传的图片
    let file = fileInput.files[0];
    //准备读取图片
    if (window.FileReader && file) {
     //调用图片读取方法
      var reader = new FileReader();
     //读取图片
      reader.readAsDataURL(file);
     //监听图片读取进度
      reader.onloadend = function(e) {
        //读取成功，拿到base64编码
        let imgBase64 = e.target.result;
        //接下来动态创建标签 跟上个步骤页面标签备注中 动态创建标签的位置相呼应，以下这些动作均为使用原生js创建了动态的img标签以及动态创建了放大和删除的遮罩层。 可根据自己的项目及业务需求自行调整。也可以跳过该部分，直接看图片预览。
        let order = fileList.length;
        let div = document.createElement("div");
        div.className = `ivu-file-annex${order}`;
        div.innerHTML = createImg(imgBase64, order);
        fileList.push(imgBase64);
        imgWrapper.insertBefore(div, operate);
        //在这里初始化下图片预览事件
        previewImg(imgBase64, order)
      };
    }

经过以上步骤我们已经拿到了base64的图片流，接下来我们来实现预览功能。

function previewImg (imgBase64, order){
    //获取当前图片对应的放大镜元素
    let previewImg = document.querySelector(`#ivu-enlarge-${order}`);
    //给放大镜绑定事件
    previewImg.addEventListener("click", function() {
        //声明异步处理promise对象
          new Promise(function(resolve, reject) {
            //创建一个标签用来加载图片
            const image = document.createElement("img");
            image.src = imgBase64
            //待图片加载完成读取图片的真实宽高。
            image.addEventListener("load", function(e) {
                resolve({
                    imgWidth: e.target.width,
                    imgHeight: e.target.height,
                });
        })
        .then(({imgWidth,imgHeight})=>{
                //遮罩层
                let pop = document.querySelector(".ivu-pop");
                //预览图片容器
                let wrapper = document.querySelector(".ivu-pop-wrapper");
                //预览图片
                let imgPop = document.querySelector(".ivu-pop-img");
                //base64放入预览图片img标签src
                imgPop.src = imgBase64;
                //设置容器大小为图片的真实大小
                wrapper.style.width = `${imgWidth}px`;
                wrapper.style.height = `${imgHeight}px`;
                //展示遮罩层 预览图片
                pop.style.display = "block";    
        })
  });
}

总结

以上就是使用原生js获取本地上传的图片转成base64流并读取到图片的真实宽高进行预览的例子，该文讲解了主要思路，具体实现细节还涉及到一些样式，大家按照这个思路结合自己的业务需求进行实现。如有疑问，欢迎评论区里进行探讨！！