<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<title></title>
</head>
<body>
<h3>测试下载图片</h3>
<img id='images' src='http://cdnadm.waduobao.cn/FhfnAkcjBRZYgodmXHsfwZPdIstr' alt='' width='30'>
<script>
function downloadImage(selector,name){
const image = new Image();
// 解决跨域 canvas 污染问题
image.setAttribute('crossOrigin','anonymous');
image.onload = function(){
const canvas = document.createElement('canvas');
canvas.width = image.width;
canvas.height = image.height;
const context = canvas.getContext('2d');
context.drawImage(image,0,0,image.width,image.height);
const url = canvas.toDataURL('image/png');
// 生成一个 a 标签
const a = document.createElement('a');
// 创建一个点击事件
const event = new MouseEvent('click');
// 将 a 的 download 属性设置为我们想要下载的图片的名称，若 name 不存在则使用'图片'作为默认名称
a.download = name || '图片';
// 将生成的 URL 设置为 a.href 属性
a.href = url;
// 触发 a 的点击事件
a.dispatchEvent(event);
};
image.src = document.getElementById(selector).src
}
// 调用方式
// 参数一： 选择器，代表 img 标签
// 参数而： 图片名称，可选
downloadImage('images','图片名称');
</script>
</body>前端下载图片
猜你喜欢
转载自blog.csdn.net/weixin_39749820/article/details/82740491
今日推荐
周排行