a 标签的download 属性在谷歌浏览器下无法下载图片，如何处理？

最新推荐文章于 2024-09-30 14:33:07 发布

yuxiaoyu.

最新推荐文章于 2024-09-30 14:33:07 发布

阅读量4.5k

点赞数 1

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/changxue/p/11049025.html

版权

a 标签的download属性在下载图片文件的时候是如何的方便，可是可是谷歌浏览器不支持下载，而是下载打开新窗口预览图片。这个兼容性问题如何解决呢？

了解了一番，HTMLCanvasElement.toBlob()方法可以用以展示canvas上的图片；这个图片文件可以被缓存或保存到本地，由用户代理端自行决定。

更多HTMLCanvasElement.toBlob()详情前去https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toBlob了解。

直接上代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>图片下载</title>
</head>
<body>
  <a href="https://www.baidu.com/img/bd_logo1.png" download="bd_logo1.png">
    a download 属性下载
  </a>
  <br /><br />
  <button οnclick="add('https://pic2.zhimg.com/v2-5ec052fff9d691c6a61654ed16440547_400x224.jpg')">
    非跨域图片
  </button>
  <br /><br />
  <button οnclick="add('https://www.baidu.com/img/bd_logo1.png')">
    跨域图片
  </button>
  <br /><br />
  <script>
    function add(src) {
      var filename; //图片名称
      var filetype; //图片类型
      var path = src;
      if (path.indexOf("/") > 0) {
        var file = path.substring(path.lastIndexOf("/") + 1, path.length);
        var fileArr = file.toLowerCase().split(".");
        filename = fileArr[0];
        filetype = fileArr[1];
      }
      var canvas = document.createElement("canvas");
      var img = document.createElement("img");
      img.onload = function (e) {
        canvas.width = img.width;
        canvas.height = img.height;
        var context = canvas.getContext("2d");
        context.drawImage(img, 0, 0, img.width, img.height);
        canvas.toBlob(blob => {
          var a = document.createElement("a");
          //a.href : blob:http://127.0.0.1:5500/fdd7df7a-c953-4a0f-a4ec-8bb9d09056d8
          a.href = window.URL.createObjectURL(blob);
          a.download = filename;
          a.click();
        }, `image/${filetype}`);
      };
      img.setAttribute("crossOrigin", "Anonymous");
      img.src = src;
    }
  </script>
</body>
</html>

根据以上步骤操作后依然报跨域，后端处理。。。

如果感觉可以点个赞哦

转载于:https://www.cnblogs.com/changxue/p/11049025.html