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 onclick="add('https://pic2.zhimg.com/v2-5ec052fff9d691c6a61654ed16440547_400x224.jpg')">

    非跨域图片

  </button>

  <br /><br />

  <button onclick="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>

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

如果感觉可以点个赞哦

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

  1. HTML <a> download 属性,点击链接来下载图片

    Html5里面的 标签的 Download 属性可以设置一个值来规定下载文件的名称.所允许的值没有限制,浏览器将自动检测正确的文件扩展名并添加到文件 (.img, .pdf, .txt, .html, ...

  2. HTML5 a标签的download属性

    介绍一个HTML5的新特性 a标签的download属性: 目前市场上面支持的浏览器有限: html: <!DOCTYPE html> <html> <body> ...

  3. jQuery --- 利用a标签的download属性下载文件！

    最近遇到一个项目,需要有点击下载文件的功能. 由于文件格式是多种的,对于 rar / zip / rtf / doc / xlsx / jpg等. 点击下载有的是直接跳转到后进行下载,但有的是打开进行 ...

  4. a标签的download属性简介

    最近在工作中需要一个前端直接下载静态文件的需求,之前有粗略的了解过a标签的download属性,通过download和href属性可以实现文件的下载. 简介 HTML <a> 元素 (或锚 ...

  5. a标签的download属性

    a标签加上downlaod属性后,就可完成对href属性链接文件的下载,但仅仅是限于同源文件,如果是非同源,download属性会失效. 无download属性的时候,a标签的默认行为是链接跳转进行预 ...

  6. HTML5 a标签的down属性进行图片下载

    a标签中的down属性时HTML5新增的属性,此属性指示浏览器下载URL而不是导航到URL,因此将提示用户将其保存为本地文件.目前该属性的兼容性如下: 具体代码实现: /* 主要原理:利用a标签的do ...

  7. HTML5 <a>标签download 属性

    一.简单实例 <a href="../images/1.jpg" download="下载图片.jpg"> 点击按钮下载 </a> 二. ...

  8. 火狐 a 标签 download 属性，要在 a 标签添加到页面中才生效；

    在 chrome 中,如果需要设置点击下载文件,需要创建一个 a 标签,指定 download 属性和 href 属性即可, var aLink = document.createElement('a ...

  9. span标签里的内容在IE下显示，而在谷歌浏览器下不显示

    有如下代码: <span id="spLicenseIncrease" style="color:red;">(51)</span> 在 ...

随机推荐

  1. PJzhang:钓鱼域名生成工具urlcrazy

    猫宁!!! www.baidu.com和www.baibu.com是不是很相似,urlcrazy可以自动生成一大批. 这款工具的作者是Andrew Horton 工具下载地址: http://www. ...

  2. 花里胡哨，如何在Linux终端输出带有颜色的字体，将带颜色的字体赋值给变量

    背景 ​ 在日常操作Linux的情况下,总会遇到一些需求,比如说,把输出的内容用不同颜色标注出来,以达到醒目.提示的目的,那么如何在Linux终端输出带有颜色的字体呢? Linux终端输出字符颜色 ​ ...

  3. 最新 汇量科技java校招面经 （含整理过的面试题大全）

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿. 汇量科技等10家互联网公司的校招Offer,因为某些自身原因最终选择了 汇量科技.6.7月主要是做系统复习.项目复盘.Le ...

  4. 如何下载spring sts

    1.打开https://spring.io/ 2.翻到页面最底部点击tools 3.页面下滑点击Download STS4 Windows 64-bit

  5. windows 修改Administrator管理员账户名

      用[Win+R]组合键命令打开[运行]界面,输入[gpedit.msc],按[回车键]或[鼠标左键]单击[确定]按钮:   在弹出的[本地组策略编辑器]对话框中,依次[鼠标左键]点击打开:[计算机 ...

  6. Mac查看端口号是否被占用及释放

    1.查看使用端口进程 lsof -i: 端口号 2.释放进程 kill 你的PID 3.再次执行第一步,是否无进程占用 lsof -i: 端口号

  7. PHP后台开发小经验

    js页面传参数 js的参数传输是关键,尤其是当一个页面的数据需要分步骤上传时. 同样的删除功能,不会操作批量删除时可以尝试单个删除,功能差不多,实现功能的方法也千千万,先做成它是第一位. 主页面很多条 ...

  8. ingress安装配置

    Traefik Traefik 是一款开源的反向代理与负载均衡工具.它最大的优点是能够与常见的微服务系统直接整合,可以实现自动化动态配置.目前支持 Docker.Swarm.Mesos/Maratho ...

  9. Java 关于String Pool

    下面的文章讲得挺清楚: https://www.baeldung.com/java-string-pool 再加一个关于虚拟机的,因为上面的文章提到了JVM: https://abhirockzz.w ...

  10. 怎样修改 VS Code 主题?

    方法1. 点击左上角 File > Preferences > Color Theme. 方法2. 使用快捷键: Ctrl + K , Ctrl + T  PS: 查询各种操作的快捷键可以 ...