PC端使用a标签指向一个图片，点击链接时会在浏览器中预览图片，而不是直接下载
<a href="http://csssecrets.io/images/tiger.jpg">img</a>
1. 使用a标签的属性download
- a标签添加了
download属性，将直接下载文件，并根据download属性的值设置下载文件的文件名， - 不为download属性设置值则文件将以默认文件名下载
- 仅支持同源链接下载，非同源链接还是会直接打开图片
<!-- 同源链接能下载图片 -->
<a href="./file/catlace.jpg" download>同源链接-可以下载</a>
<!-- 文件名为cat.png -->
<a href="./file/catlace.jpg" download="cat.png" >同源链接-设置下载的文件名</a></a>
<!-- 非同源链接download属性会无效，浏览器会直接打开图片 -->
<a href="http://www.baidu.com/img/baidu_jgylogo3.gif" download>非同源链接-不能下载</a>
2. 将图片转成Base64下载
<!DOCTYPE html>
<html>
<script>
function downloadImgByBase64(url) {
var img = new Image();
img.onload = function() {
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
// 将img中的内容画到画布上
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
// 将画布内容转换为base64
var base64 = canvas.toDataURL();
// 创建a链接
var a = document.createElement("a");
a.href = base64;
a.download = "";
// 触发a链接点击事件，浏览器开始下载文件
a.click();
};
img.src = url;
// 必须设置，否则canvas中的内容无法转换为base64
img.setAttribute("crossOrigin", "Anonymous");
}
</script>
<body>
<button
onclick="downloadImgByBase64(`http://csssecrets.io/images/tiger.jpg`)"
>
下载图片
</button>
</body>
</html>
3. 将图片转成Blob下载
<!DOCTYPE html>
<html>
<script>
function downloadImgByBlob(url) {
var img = new Image();
img.onload = function() {
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
// 将img中的内容画到画布上
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
// 将画布内容转换为Blob
canvas.toBlob(blob => {
// blob转为同源url
var blobUrl = window.URL.createObjectURL(blob);
// 创建a链接
var a = document.createElement("a");
a.href = blobUrl;
a.download = "ani.jpg"; // 文件名
// 触发a链接点击事件，浏览器开始下载文件
a.click();
});
};
img.src = url;
// 必须设置，否则canvas中的内容无法转换为blob
img.setAttribute("crossOrigin", "Anonymous");
}
</script>
<body>
<button
onclick="downloadImgByBlob(`http://csssecrets.io/images/tiger.jpg`)"
>
下载图片
</button>
</body>
</html>
4. 通过XMLHttpRequest()下载图片
通过XMLHttpRequest()请求图片链接，然后获取返回的Blob
<!DOCTYPE html>
<html>
<script>
function downloadImgByXML(url) {
var x = new XMLHttpRequest();
x.open("GET", url, true);
x.responseType = "blob";
x.onload = function(e) {
var url = window.URL.createObjectURL(x.response);
var a = document.createElement("a");
a.href = url;
a.download = "my_tiger.jpg";
a.click();
};
x.send();
}
</script>
<body>
<button onclick="downloadImgByXML(`http://csssecrets.io/images/tiger.jpg`)">
下载图片
</button>
</body>
</html>
这种方法也能够下载gif图
