方法二：跨域使用将canvas上的内容转换为Blob对象并下载

在跨域情况下，由于浏览器的安全策略限制，直接下载图片可能会受到限制。我们可以通过将图片绘制到canvas上，然后将canvas上的内容转换为Blob对象，最后通过创建<a>标签来实现下载。

代码中有详细注释：

// 接收一个图片链接作为参数

function download(link: string) {

// 创建新的图片对象

const img = new Image()

// 设置图片跨域属性为匿名

img.setAttribute('crossOrigin', 'Anonymous')

// 图片加载完成后执行回调函数

img.onload = function () {

// 创建一个新的画布元素

const canvas = document.createElement('canvas')

// 获取画布的2D上下文

const context = canvas.getContext('2d')

// 判断是否成功获取到画布上下文

if (context) {

// 设置画布的宽度和高度与图片一致

canvas.width = img.width

canvas.height = img.height

// 在画布上绘制图片

context.drawImage(img, 0, 0, img.width, img.height)

// 将画布内容转换为 Blob 对象

canvas.toBlob((blob) => {

// 判断是否成功生成 Blob 对象

if (blob) {

// 创建一个临时链接用于下载

const url = URL.createObjectURL(blob)

const a = document.createElement('a')

const event = new MouseEvent('click')

// 设置下载的文件名

a.download = 'default.png'

// 设置链接地址为 Blob 对象的 URL

a.href = url

// 模拟点击事件触发下载

a.dispatchEvent(event)

// 释放 Blob 对象的 URL

URL.revokeObjectURL(url)

} else {

console.error('生成 Blob 失败')

}

})

} else {

console.error('获取 Canvas 上下文失败')

}

}

// 设置图片的 src 属性，并在链接后添加时间戳以避免缓存

img.src = `${link}?v=${Date.now()}`

}

注：

在canvas中绘制了来自其他域名的图片时，浏览器会认为这个canvas被“污染”（tainted），即受到了跨域限制。在这种情况下，浏览器会禁止使用toBlob()方法导出这个canvas作为Blob对象。

为了解决这个问题，可以在加载图片时设置图片的crossOrigin属性为'Anonymous'，这样就可以避免跨域问题。