HTML5 a标签的down属性进行图片下载
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属性进行图片下载的更多相关文章
- HTML5 <a>标签的ping属性用法
随着移动互联网用户井喷式的增长,web前端开发中的HTML5在近几年备受瞩目,越来越多的人从事html5开发相关工作.今天小编也来凑个热闹,和大家一起来谈谈HTML5中<a>标签的ping ...
- [转]HTML5 script 标签的 crossorigin 属性到底有什么用?
HTML5 script 标签的 crossorigin 属性到底有什么用? 最近Bootstrap 4已经正式发布了,可能已经有爱尝鲜的小伙伴在 alpha 阶段就尝试过 BS4.不过今天要说的不是 ...
- HTML5 a标签的download属性
介绍一个HTML5的新特性 a标签的download属性: 目前市场上面支持的浏览器有限: html: <!DOCTYPE html> <html> <body> ...
- jQuery --- 利用a标签的download属性下载文件!
最近遇到一个项目,需要有点击下载文件的功能. 由于文件格式是多种的,对于 rar / zip / rtf / doc / xlsx / jpg等. 点击下载有的是直接跳转到后进行下载,但有的是打开进行 ...
- HTML5 <a>标签download 属性
一.简单实例 <a href="../images/1.jpg" download="下载图片.jpg"> 点击按钮下载 </a> 二. ...
- 从零开始学习前端开发 — 10、HTML5新标签及表单控件属性和属性值
一.html5新增标签 1.结构性标签 header 定义网页的头部 nav 定义网页的导航 footer 定义网页的底部 section 定义网页的某个区域 article 定义网页中的一篇文章 a ...
- 认识HTML5中的新标签与新属性
前端之HTML5,CSS3(一) HTML5中常用内容标签 header标签 header标签定义文档的页眉,基本语法:<header>content</header>. na ...
- HTML5新标签与特性---新表单+新属性----综合案例1
HTML5新标签与特性 兼容性问题 (ie9 以上的版本) 文档类型设定 document HTML: sublime 输入 html:4s XHTML: sublime 输入 html:xt HTM ...
- a 标签的download 属性在谷歌浏览器下无法下载图片,如何处理?
a 标签的download属性在下载图片文件的时候是如何的方便,可是可是谷歌浏览器不支持下载,而是下载打开新窗口预览图片.这个兼容性问题如何解决呢? 了解了一番,HTMLCanvasElement.t ...
随机推荐
- web form 服务器控件表单验证
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ValidationDemo ...
- QT 设置应用程序图标和可执行程序图标
1, 首先准备个ICO图标.例如:myappico.ico 在工程目录下新建images文件夹并你的图标myappico.ico(只能用ico格式的图片)放到工程目录下的images文件夹下 2, 用 ...
- [2019牛客多校第二场][G. Polygons]
题目链接:https://ac.nowcoder.com/acm/contest/882/G 题目大意:有\(n\)条直线将平面分成若干个区域,要求处理\(m\)次询问:求第\(q\)大的区域面积.保 ...
- uni-app引入css动画库
引入Animate动画库 Animate中文网地址:http://www.animate.net.cn/ Animate下载地址:https://daneden.github.io/animate.c ...
- PHP mysqli_init() 函数
定义和用法 mysqli_init() 函数初始化 MySQLi 并返回 mysqli_real_connect() 使用的对象. 语法 mmysqli_init(); 实例 mysqli_ini ...
- Chef and Problems(from Code-Chef FNCS) ( 回 滚 )
题目: 题意:给定序列,求[l,r]区间内数字相同的数的最远距离. 链接:https://www.codechef.com/problems/QCHEF #include<bits/stdc++ ...
- 小米 oj 硬币比赛(思维+动态规划)
硬币比赛 序号:#47难度:困难时间限制:1000ms内存限制:10M 描述 有 n 个不同价值的硬币排成一条线.有 A 与 B 两个玩家,指定由 A 开始轮流(A 先手,然后 B,然后再 A..) ...
- element-ui练习使用总结
<el-row> <el-col class="borderRed" :span="24"> <div class="g ...
- codeforces#1108E2. Array and Segments (线段树+扫描线)
题目链接: http://codeforces.com/contest/1108/problem/E2 题意: 给出$n$个数和$m$个操作 每个操作是下标为$l$到$r$的数减一 选出某些操作,使$ ...
- python 列表切片之负数的含义代码示例
a = list(range(10)) print(a[::]) #复制一个列表 print(a[::2]) #每隔2个取一次 print(a[::3]) #每隔3个取一次 print(a[::-1] ...