H5点击图片保存本地

举报
达拉崩巴斑得贝迪卜多 发表于 2021/12/20 10:42:04 2021/12/20
【摘要】 <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

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。