a标签中的down属性时HTML5新增的属性,此属性指示浏览器下载URL而不是导航到URL,因此将提示用户将其保存为本地文件。目前该属性的兼容性如下:

具体代码实现:

 /*
主要原理:利用a标签的download属性以及canvas的toDataURL()
selector: 图片的选择器
name:被下载图片的命名
*/
downloadPicture (selector, name) {
let image = new Image()
// 解决跨域 Canvas 污染问题
image.setAttribute('crossOrigin', 'anonymous')
image.onload = function () {
// 创建一个canvas标签
let canvas = document.createElement('canvas')
// 设置canvas的宽高
canvas.width = image.width
canvas.height = image.height
// 获取canvas的2d界面
let context = canvas.getContext('2d')
// 把图片画在canvas上
context.drawImage(image, 0, 0, 200, 200)
// 把canvas的内容转化为base64格式
let url = canvas.toDataURL('image/png') // 生成一个a元素
let a = document.createElement('a')
// 创建一个单击事件
let event = new MouseEvent('click') // 将a的download属性设置为我们想要下载的图片名称,若name不存在则使用‘下载图片名称’作为默认名称
a.download = name || '下载图片名称'
// 将生成的URL设置为a.href属性
a.href = url // 触发a的单击事件
a.dispatchEvent(event)
}
// 获取img上的src值,赋值之后,完成之后会调用onload事件
image.src = document.querySelector(selector).src
}

HTML5 a标签的down属性进行图片下载的更多相关文章

  1. HTML5 <a>标签的ping属性用法

    随着移动互联网用户井喷式的增长,web前端开发中的HTML5在近几年备受瞩目,越来越多的人从事html5开发相关工作.今天小编也来凑个热闹,和大家一起来谈谈HTML5中<a>标签的ping ...

  2. [转]HTML5 script 标签的 crossorigin 属性到底有什么用?

    HTML5 script 标签的 crossorigin 属性到底有什么用? 最近Bootstrap 4已经正式发布了,可能已经有爱尝鲜的小伙伴在 alpha 阶段就尝试过 BS4.不过今天要说的不是 ...

  3. HTML5 a标签的download属性

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

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

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

  5. HTML5 <a>标签download 属性

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

  6. 从零开始学习前端开发 — 10、HTML5新标签及表单控件属性和属性值

    一.html5新增标签 1.结构性标签 header 定义网页的头部 nav 定义网页的导航 footer 定义网页的底部 section 定义网页的某个区域 article 定义网页中的一篇文章 a ...

  7. 认识HTML5中的新标签与新属性

    前端之HTML5,CSS3(一) HTML5中常用内容标签 header标签 header标签定义文档的页眉,基本语法:<header>content</header>. na ...

  8. HTML5新标签与特性---新表单+新属性----综合案例1

    HTML5新标签与特性 兼容性问题 (ie9 以上的版本) 文档类型设定 document HTML: sublime 输入 html:4s XHTML: sublime 输入 html:xt HTM ...

  9. a 标签的download 属性在谷歌浏览器下无法下载图片,如何处理?

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

随机推荐

  1. web form 服务器控件表单验证

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ValidationDemo ...

  2. QT 设置应用程序图标和可执行程序图标

    1, 首先准备个ICO图标.例如:myappico.ico 在工程目录下新建images文件夹并你的图标myappico.ico(只能用ico格式的图片)放到工程目录下的images文件夹下 2, 用 ...

  3. [2019牛客多校第二场][G. Polygons]

    题目链接:https://ac.nowcoder.com/acm/contest/882/G 题目大意:有\(n\)条直线将平面分成若干个区域,要求处理\(m\)次询问:求第\(q\)大的区域面积.保 ...

  4. uni-app引入css动画库

    引入Animate动画库 Animate中文网地址:http://www.animate.net.cn/ Animate下载地址:https://daneden.github.io/animate.c ...

  5. PHP mysqli_init() 函数

    定义和用法 mysqli_init() 函数初始化 MySQLi 并返回 mysqli_real_connect() 使用的对象. 语法 mmysqli_init();   实例 mysqli_ini ...

  6. Chef and Problems(from Code-Chef FNCS) ( 回 滚 )

    题目: 题意:给定序列,求[l,r]区间内数字相同的数的最远距离. 链接:https://www.codechef.com/problems/QCHEF #include<bits/stdc++ ...

  7. 小米 oj 硬币比赛(思维+动态规划)

     硬币比赛 序号:#47难度:困难时间限制:1000ms内存限制:10M 描述 有 n 个不同价值的硬币排成一条线.有 A 与 B 两个玩家,指定由 A 开始轮流(A 先手,然后 B,然后再 A..) ...

  8. element-ui练习使用总结

    <el-row> <el-col class="borderRed" :span="24"> <div class="g ...

  9. codeforces#1108E2. Array and Segments (线段树+扫描线)

    题目链接: http://codeforces.com/contest/1108/problem/E2 题意: 给出$n$个数和$m$个操作 每个操作是下标为$l$到$r$的数减一 选出某些操作,使$ ...

  10. python 列表切片之负数的含义代码示例

    a = list(range(10)) print(a[::]) #复制一个列表 print(a[::2]) #每隔2个取一次 print(a[::3]) #每隔3个取一次 print(a[::-1] ...