H5点击图片保存本地

别凶小晗.

已于 2023-07-11 14:06:42 修改

阅读量4.3k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 开发语言 ecmascript

于 2021-11-02 20:42:52 首次发布

本文链接：https://blog.csdn.net/Wang_MengHan/article/details/121108680

直接上代码，有注释

<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);
	} */
},