1、通过点击a链接下载图片/文件
HTML5新增 <a> 标签的download属性,<a> 标签添加download属性后,点击a链接就可以下载href属性写的路径文件;
download属性:(可选)指定下载文件的文件名;若不指定文件名则下载到本地的文件名和href属性写的文件名一样。
<a href="http://somehost/image.png" download="imageName.png"> 点击下载图片</a>
2、通过js下载图片
适合场景:要下载一个图片却不要显示该图片时。
原理:利用a链接的download属性,通过点击a链接下载图片。
分解步骤:
- 用 JavaScript 创建一个隐藏的 <a> 标签
- 设置 <a> 标签的 href 属性
- 设置<a> 标签的 download 属性
- 用 JavaScript 来触发这个<a> 标签的 click 事件
通过js下载图片方法的完整代码及详解
/**
* imageUrl: 要下载的图片地址
* name: 下载后的图片名称
*/
downloadImage(imageUrl, name) {
const image = new Image();
// 解决跨域 Canvas 污染问题
image.setAttribute('crossOrigin', 'anonymous');
image.onload = function () {
const canvas = document.createElement('canvas');
canvas.width = image.width;
canvas.height = image.height;
const context = canvas.getContext('2d');
context.drawImage(image, 0, 0, image.width, image.height);
// 得到图片的base64编码数据
const url = canvas.toDataURL('image/png');
// 生成一个a元素
const a = document.createElement('a');
// 创建一个单击事件
const event = new MouseEvent('click');
a.download = name;
// 将生成的URL设置为a.href属性
a.href = url;
// 触发a的单击事件
a.dispatchEvent(event);
};
image.src = imageUrl;
},
使用方法式例:
<div @click="downloadImage(imageUrl, '下载的图片')">下载图片</div>