可通过五种 前端 方法实现照片本地保存：一、a 标签 download 属性；二、canvas绘制导出 Blob；三、Fetch API 获取二进制数据；四、Base64编码 直接下载；五、服务端代理规避 CORS。
如果您在 html 页面中显示了一张照片，但希望用户能够直接将该照片保存到本地设备，则需要通过 前端 技术触发 浏览器 的下载行为。以下是实现照片保存功能的多种方法：
一、使用 a 标签 download 属性
该方法利用 html5 新增的 标签 download 属性，使点击链接时强制触发文件下载而非跳转或打开。适用于已知照片 URL 且该 URL 支持 跨域 资源共享（CORS）的情况。
1、确保照片资源允许 跨域 访问，服务器响应头中包含access-Control-Allow-Origin: * 或指定域名。
2、在 HTML 中创建带 download 属性的 a 标签，href指向照片的绝对或相对 URL。
立即学习 “ 前端免费学习笔记（深入）”；
3、设置 a 标签的 download 属性值为期望保存的文件名，例如 download=”photo.jpg”。
4、可添加display:none 隐藏该 a 标签，并通过javaScript 模拟点击以实现无感下载。
二、使用 Canvas 绘制后导出 Blob
当照片来自跨域图片（如 cdn 地址）且无法直接使用 download 属性时，可通过 Canvas 临时绘制图像，再调用 toBlob 方法生成本地 Blob对象，从而绕过 CORS 限制并触发保存。
1、创建一个 <canvas></canvas> 元素，并获取其 2D 绘图上下文。
2、新建 Image 对象，设置 crossOrigin=”anonymous” 后加载目标图片 URL。
3、图片加载完成后，将其绘制到 canvas 上，确保宽高与原始图像一致。
4、调用 canvas.toBlob()方法生成 Blob 对象，类型指定为 image/jpeg 或 image/png。
5、使用 URL.createObjectURL()将 Blob 转为临时 URL，并创建 a 标签触发下载。
三、使用 Fetch API 获取二进制数据
该方法通过 fetch 请求获取照片的 ArrayBuffer，再构造 Blob 并生成下载链接，完全避开图片标签和 Canvas 限制，适用于任意可访问的 http/https 图片地址。
1、使用 fetch 发起对照片 URL 的 GET 请求，设置 mode 为 cors（若需跨域）或 no-cors（仅限同源或服务端配合）。
2、调用 response.arrayBuffer()获取原始二进制数据。
3、将 ArrayBuffer封装 为 Blob 对象，显式指定 type 参数，例如 ”image/png”。
4、通过 URL.createObjectURL()生成临时 URL，并赋值给 a 标签的 href 属性。
5、设置 a 标签 download 属性并执行 click事件 ，触发 浏览器 下载对话框。
四、Base64编码 图片直接下载
当照片已以内联 Base64 形式存在于 HTML 或 javascript 变量中时，无需网络请求，可直接解码为 Uint8Array 并构造 Blob 进行保存。
1、提取 Base64字符串 中 data:image/xxx;base64, 之后的部分。
2、使用 atob()函数对 Base64 字符串进行解码，得到原始二进制字符串。
3、将二进制字符串逐字符转换为 Uint8Array 中的 字节 值。
4、使用 new Blob()将 Uint8Array 封装为 Blob 对象，指定对应 MIME 类型。
5、生成 object URL 并绑定至 a 标签，调用 click 完成保存。
五、服务端代理方式规避 CORS
当目标图片存在严格跨域策略且无法修改服务端响应头时，可通过同源的服务端 接口 作为代理，获取图片二进制流并透传至前端，从而获得合法的同源下载地址。
1、编写服务端接口（如 /api/proxy-image?url=https%3A%2F%2Fexample.com%2Fphoto.jpg），接收原始图片 URL并发 起 HTTP GET 请求。
2、服务端设置响应头 Content-Type 与原始图片一致，例如 image/webp，并禁用缓存控制头以防中间代理截断。
3、前端 a 标签 href 指向该代理接口 URL，无需额外处理即可触发下载。
4、代理接口需校验 url 参数合法性，防止 SSRF 攻击，仅允许白名单域名或固定路径前缀。
以上就是
