H5点击图片保存本地
【摘要】 <img id="saveImg" src="https://res.orendalife.cn/stones/20211012/83742e3ba40c5b95.jpg" alt=""><button @click="savePic" style="color:#373E44">点击放大并保存</button>savePic(Url){ let img = document.getE...
<img id="saveImg" src="https://res.orendalife.cn/stones/20211012/83742e3ba40c5b95.jpg" alt="">
<button @click="savePic" style="color:#373E44">点击放大并保存</button>
savePic(Url){
let img = document.getElementById("saveImg")
Url = img.src; //图片路径,也可以传值进来
let triggerEvent = "touchstart"; //指定下载方式
let blob=new Blob([''], {type:'application/octet-stream'}); //二进制大型对象blob
let url = URL.createObjectURL(blob); //创建一个字符串路径空位
let a = document.createElement('a'); //创建一个 a 标签
a.href = Url; //把路径赋到a标签的href上
a.download = Url.replace(/(.*\/)*([^.]+.*)/ig,"$2").split("?")[0];
let e = new MouseEvent('click', ( true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null));
a.dispatchEvent(e);
//释放一个已经存在的路径(有创建createObjectURL就要释放revokeObjectURL)
URL.revokeObjectURL(url);
/*
//这段好像并不影响,所以我不用,注释掉
var imgs = document.getElementsByTagName("img");
for(var i = 0,o;o = imgs[i];i++){
o.addEventListener(triggerEvent,function(){
var newurl = this.getAttribute("src");
saveAs(newurl);
},false);
} */
},
【声明】本内容来自华为云开发者社区博主,不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)