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. POJ 3229：The Best Travel Design

    Description Dou Nai ), and the end of the travel route hours on traveling every day. Input There are ...

  2. 学习pandas apply方法，看这一篇就够了，你该这么学，No.10

    最近好忙啊,好忙啊,忙的写不动博客了 时间过得飞快 一晃,一周就过去了 本着不进步就倒退的性格 我成功的在技术上面划水了一周 今天要学习的还是groupby的高级进阶 说是高级,其实就是比初级复杂了一 ...

  3. Mybatis插件之Mybatis-Plus的实体类注解篇

    主要注释到实体类上的注解: @TableName(value = …) 当数据库名与实体类名不一致或不符合驼峰命名时,需要在此注解指定表名 @TableId(type = …) 指定实体类的属性为对应 ...

  4. hisiv100交叉编译工具链安装

    hisi交叉编译工具链安装 一.         摘要: 交叉编译简单的说,就是A机器上编译生成,运行在B机器上.那么在A机器上的编译工具安装,就是本文所要描述的内容. 工欲善其事必先利其器,所以交叉 ...

  5. oracle不记得所有账户和密码怎么办

    1.打开cmd,输入sqlplus /nolog,回车: 2.输入“conn / as sysdba”; 3.输入“alter user sys identified by 新密码:”,注意:必须输入 ...

  6. oracle数据库用户之间授权

    今天遇到一个数据库的问题: 系统数据库用户下创建了几个视图用于外部系统开发报表使用,当外部系统提取视图数据时,需要通过一个只能访问需要视图权限的用户,于是想到给他创建一个新的用户,并给这个用户分配只能 ...

  7. Mac启动Mysql，停止Mysql，重启Mysql

    1.启动mysql sudo /usr/local/mysql/support-files/mysql.server start 2.停止mysql sudo /usr/local/mysql/sup ...

  8. k8s之dashboard认证、资源需求、资源限制及HeapSter

    1.部署dashboard kubernetes-dashboard运行时需要有sa账号提供权限 Dashboard官方地址:https://github.com/kubernetes/dashboa ...

  9. Iedis - Redis 在IDEA中的可视化工具破解

    2.如何破解 // 如果你没有改动IDEA的话,IDEA的插件库在这个目录下C:\Users\Administrator\.IntelliJIdea2017.3\config\plugins\Iedi ...

  10. Linux下mysql创建用户并设置权限，设置远程连接

    为了安全考虑,OneinStack仅允许云主机本机(localhost)连接数据库,如果需要远程连接数据库,需要如下操作:打开iptables 3306端口 # iptables -I INPUT 4 ...