function download() {
var src = "https://pic2.zhimg.com/v2-5ec052fff9d691c6a61654ed16440547_400x224.jpg";
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.getContext("2d").drawImage(img, 0, 0, img.width, img.height);
canvas.toBlob(blob => {
var a = document.createElement("a");
a.href = window.URL.createObjectURL(blob);
a.download = filename;
a.click();
}, `image/${filetype}`);
};
img.setAttribute("crossOrigin", "Anonymous");
img.src = src;
}
原生js实现图片点击立即下载
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
推荐阅读更多精彩内容
- 前段时间在项目中遇到文件需要下载,直接拿出了之前封装的下载指令,在用的时候发现在下载jpg、txt文件时,并不会直...