JS实现图片的下载

小半 • 2024年2月29日下午3:25 • 前端开发 • 阅读 390

前端中我们可以通过右键另存为实现图片的下载功能，但当我们需要主动控制是否授权用户下载图片的时候，我们可以通过按钮的显示、隐藏来控制图片的下载，图片的下载实现可以通过如下几个步骤来实现：

将加载图片转换为base64编码
将base64转换为blob对象
代码触发点击事件实现图片文件的下载

根据如上的步骤，我们来了解下具体的实现。

获取图片的Base64编码

我们可以通过JS中的FileReader读取图片文件来获取图片文件的Base64编码，代码如下：

<script>
 var base64;

 function imgUpload(input) {
     const file = input.files[0];
     var reader = new FileReader();
     reader.readAsDataURL(file);

     reader.onload = function() {
        showImg.style.display = 'inline-block';

        base64 = reader.result;
        showImg.src = base64;
      }

    reader.onerror = function() {
       showImg.style.display = 'none';
       base64 = '';
       showImg.src = base64;
    }
}
</script>

Base64编码转换成Blob对象

JS中的Blob对象表示一个不可变的, 原始数据的类似文件对象。Blob表示的数据不一定是一个JavaScript原生格式 blob对象本质上是js中的一个对象，里面可以储存大量的二进制编码格式的数据。后续也会写一个专门介绍Blob对象的文章，base64转blob代码如下：

      // base64转Blob对象
      function base64ToBlob(base64) {
          var parts = base64.split(";base64,");
          var contentType = parts[0].split(":")[1];
          var raw = window.atob(parts[1]);
          var rawLength = raw.length;
          var uint8Array = new Uint8Array(rawLength);
          for (var i = 0; i < rawLength; i++) {
              uint8Array[i] = raw.charCodeAt(i);
          }
          return new Blob([uint8Array], {type: contentType});
      }

代码触发文件下载

上面将base64转换成Blob对象后，我们就只需要创建一个a标签代码触发一个下载事件直接将文件下载下来就可以了，代码实现如下：

        function download(base64) {
          var date = new Date();
          if (!base64) {
              return;
          }
          var aLink = document.createElement("a"); // 创建一个a标签
          var blob = base64ToBlob(base64);
          var event = document.createEvent("HTMLEvents");
          event.initEvent("click", true, true);
          aLink.download = date.getTime() + blob.type.split("/")[1]; // 使用时间戳给文件命名
          aLink.href = URL.createObjectURL(blob);
          aLink.click();
      }