js 保存图片到本地

来源

原生js中：

<img src="./boy.png" class="img1"></img>
<input type="button" value="下载" onclick="down('img1')">

​​

function down(selector, name) {  
        // 生成一个a元素
        var a = document.createElement('a')
        // 将a的download属性设置为我们想要下载的图片名称
        a.download = name || 'pic'
        // 将生成的URL设置为a.href属性
        a.href = './boy.png'
        // 触发a的单击事件
        a.click();
}

 

注意⚠️：图片和html文件要是同源，不然会失效。

 

vue中：

<div>
	<img src="../../../img/logo.png" alt="">
	<p @click="downs">下 载</p>
</div>

data{
    imgs:require("../../../img/logo.png")
}

methods:{
    downs() {
      //必须同源才能下载
      var alink = document.createElement("a");
      alink.href = this.imgs;
      alink.download = "pic"; //图片名
      alink.click();
    }
 
}

 

注意⚠️：图片和html文件要是同源，不然会失效。

附上：a标签使用方法详解

download
此属性指示浏览器下载URL而不是导航到URL，因此将提示用户将其保存为本地文件。
如果属性有一个值，它将在保存提示中用作预先填写的文件名 (用户仍然可以根据需要更改文件名)。对允许的值没有限制，但是/和\被转换为下划线。大多数文件系统限制文件名中的一些标点符号，浏览器会相应地调整建议的名称。
注意:
此属性仅适用于同源 URLs。
可以使用 blob: URLs 和 data: URLs 以方便用户下载 JavaScript 方式生成的内容（例如使用在线绘图的Web应用创建的照片）。
如果HTTP头的Content-Disposition：存在，并且赋予了一个和这个属性不同的文件名，HTTP头优先于此属性。
如果这个属性存在 Content-Disposition 被设置为 inline，火狐优先 Content-Disposition，像之前文件名​​的情况下，而Chrome则优先 download 属性