a标签点击浏览器下载图片，不打开

最新推荐文章于 2024-09-30 14:33:07 发布

weixin_34268843

最新推荐文章于 2024-09-30 14:33:07 发布

阅读量2.8k

点赞数 1

原文链接：https://my.oschina.net/u/2301293/blog/3002154

版权

2019独角兽企业重金招聘Python工程师标准>>>

网上好多给a标签加download属性的，但都不好使。

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>

	<style type="text/css">
		.box{border: 1px solid black;padding:0 10px;}
		img{width:200px;}
	</style>
	</head>
	<body>
		
    <!--创建一个cavas  用来存放图片
        <canvas  id="cavasimg" width="607" height="367"  ></canvas> -->
		<img src="timg.jpg" id="cavasimg">
        
	<!--声明一个按钮  用来触发下载图片到本地-->
        <input type="button" id="btnsavaImg" value="保存图片到本地" onclick="downloadIamge('img','timg.jpg')"/>   

<script>
// 调用方式
// 参数一： 选择器，代表img标签
// 参数二： 图片名称，可选
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')

		// 生成一个a元素
		var a = document.createElement('a')
		// 创建一个单击事件
		var event = new MouseEvent('click')

		// 将a的download属性设置为我们想要下载的图片名称，若name不存在则使用‘下载图片名称’作为默认名称
		a.download = name || '下载图片名称'
		// 将生成的URL设置为a.href属性
		a.href = url

		// 触发a的单击事件
		a.dispatchEvent(event)
	}

	image.src = document.querySelector(selector).src
}

</script>
	</body>

效果图：