說明：可以實現下載圖片，但是移動端瀏覽器不行，佔時沒有實現，如果有知道的大哥留個言，讓我改進一下，感謝。
操作步驟： 新建一個文件夾，將代碼放入index.html，然後在文件夾內啓用命令行安裝 npm install -g live-server 文件夾下輸入live-server就可以了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
text-align: center;
}
.img {
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
width: 100px;
height: 100px;
margin: 50px auto;
}
</style>
</head>
<body>
<div class="box">
<img class="img" id="girlImg" src="./img/1.jpg" alt=""><br />
<button onclick="downloadImg()">保存圖片</button>
<a href="#" onclick="javascript:savePic();">保存到相冊</a>
</div>
<script>
// 第一種方法
function downloadImg(){
var img = document.getElementById('girlImg');
var url = img.src;
var a = document.createElement('a');
var event = new MouseEvent('click')
a.download = 'imgName'
a.href = url;
a.dispatchEvent(event);
}
// 第二種方法
function savePic(){
var img = document.getElementById('girlImg');
var picurl = img.src;
savePicture(picurl);
}
var triggerEvent = "touchstart";
function savePicture(Url){
var blob=new Blob([''], {type:"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"});
var url = URL.createObjectURL(blob);
var a = document.createElement('a');
a.href = Url;
a.download = Url.replace(/(.*\/)*([^.]+.*)/ig,"$2").split("?")[0];
var e = document.createEvent('MouseEvents');
e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
a.dispatchEvent(e);
URL.revokeObjectURL(url);
}
</script>
</body>
</html>