说明:可以实现下载图片,但是移动端浏览器不行,暂时没有实现,如果有知道的大哥留个言,让我改进一下,感谢。
操作步骤: 新建一个文件夹,将代码放入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="http://test-saas-apis.mumway.com/mumwayportal/channelPromotion/activityCode?channelId=44" alt=""><br />
<button onclick="downloadImg()">保存图片</button>
<a href="#" onclick="javascript:savePic();">保存到相册</a>
<button onclick="downloadIamge('girlImg', '二维码名称')">保存图片2222</button>
</div>
<script>
// 简单的
fetch('https://file.wonder-link.net/90626f8a-0ebe-48fa-935e-4fb09b0c3ff1.jpg')
.then(response => response.blob())
.then(blob => {
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = '二维码.jpg';
a.click();
URL.revokeObjectURL(url);
});
// 第一种方法
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);
}
// 第三种方法 解决图片跨域问题
function downloadIamge(selector, name) {
var image = new Image()
// 解决跨域 Canvas 污染问题
image.setAttribute('crossOrigin', 'anonymous')
image.onload = function () {
var canvas = document.createElement('canvas')
canvas.width = image.width
canvas.height = image.height
var context = canvas.getContext('2d')
context.drawImage(image, 0, 0, image.width, image.height)
var url = canvas.toDataURL('image/png')
var a = document.createElement('a')
// 创建一个单击事件
var event = new MouseEvent('click')
a.download = name || '下载图片名称'
a.href = url
// 触发a的单击事件
a.dispatchEvent(event)
}
image.src = document.getElementById('girlImg').src
}
</script>
</body>
</html>