js 图片通过a标签下载

104 阅读1分钟
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		
	</body>
	<script type="text/javascript">
		  // 下载图片
		  downLoadImg(url: string) {
		    if (!url) {
		      return
		    }
		    // 创建img对象
		    const img = new Image()
		    // 定义该元素添加跨源请求,从而实现对该元素获取数据的 CORS 请求的配置
		    img.setAttribute('crossOrigin', 'anonymous')
		    img.src = url
		    img.onload = () => {
		      const canvas = document.createElement('canvas')
		      canvas.height = img.height
		      canvas.width = img.width
		      const canText = canvas.getContext('2d')
		      canText?.drawImage(img, 0, 0, img.width, img.height)
		      // 返回一个包含图片展示的 data URI(type,encoderOptions) type:设置图片格式 encoderOptions:图片质量0-1
		      const url = canvas.toDataURL('image/jpeg', 1)
		      const a = document.createElement('a')
		      const eventEle = new MouseEvent('click')
		      a.download = 'qr_share.jpg'
		      a.href = url
		      a.dispatchEvent(eventEle)
		    }
		  }
	</script>
</html>