vue 前端实现网络图片下载

需求：需要实现一个下载图片的功能。 遇到的问题： 试了很多种方法，发现点击下载时出来的效果，都是跳到一个新的图片网页。 代码可以直接拿去用，按照自己的需求进行更改。

canvas 将图片绘制出来

			downloadByBlob(url, name) {
				let image = new Image()
				image.setAttribute('crossOrigin', 'anonymous')
				image.src = url
				image.onload = () => {
					let canvas = document.createElement('canvas')
					canvas.width = image.width
					canvas.height = image.height
					let ctx = canvas.getContext('2d')
					ctx.drawImage(image, 0, 0, image.width, image.height)
					canvas.toBlob((blob) => {
						let url = URL.createObjectURL(blob)
						this.download(url, name)
						// 用完释放URL对象
						URL.revokeObjectURL(url)
					})
				}
			},

利用a标签实现下载

                 ownload(href, name) {
			  let eleLink = document.createElement('a')
			  eleLink.download = name
			  eleLink.href = href
			  eleLink.click()
			  eleLink.remove()
			},

调用方式

this.downloadByBlob('https://lylx.shyunyou.com/static/appletImg/haibaor.png',"宣传图");