关于使用photoswipe插件实现图片预览后不能保存下载的问题

问题描述：

项目需求使用photoswipe插件实现点击缩略图实现图片的预览，放大，轮播，下载保存等效果，图片存贮在AWS云服务器上，在开发过程发现使用photoswipe自带的下载功能会直接预览图片而非下载。

原因分析:
由于 photoswipe上自带的下载功能的原理实际是: 通过a标签的 "download"属性实现图片的下载,经过查阅发现a标签的"download"属性的特点 :
1.只适用于同源文件的下载

MDN中讲a标签的download的属性仅适用于同源URLs，但是它又可以使用 blob:URLs和 data:URLs 的形式

2.如果可以识别链接路径则直接打开则不会下载,
所以,由于开发项目中的代码存储在AWS云服务器,所以是跨域请求,则会出现只是预览图片而不能下载的问题.

解决方案:
1.可以通过修改服务器的文件的类型, 将其改为浏览器不能直接识别的链接 例如 (https://event.s3.ap-east-1.amazonaws.com/uat/46BF3C27-F537-4C13-8E5B-1EB1B05EBE38.zip) (不建议,因为缩略图需要显示图片,如此修改则不能显示缩略图,不符合项目需求)

2.使用canvas的blob:URLs来实现,并且修改服务器的配置让其允许跨域,
前端代码如下:

function saveAs(){
   
            let src = 'https://event.s3.ap-east-1.amazonaws.com/uat/46BF3C27-F537-4C13-8E5B-1EB1B05EBE38'
            var canvas = document.createElement('canvas');
            var img = document