适用场景：只能在浏览器 / no‑code 平台里写前端脚本，后端不给改、也不允许自建转发服务，但你又得把跨域图片画进 Canvas 并成功导出 / 下载——本文带你一步到位。

1. 跨域 Canvas 的“痛点复盘”

1. 浏览器同源策略：<img> 的源域名 ≠ 页面域名 ⇒ 用它绘制的 Canvas 会被标记为 tainted。

2. tainted Canvas 上任何读操作（toDataURL() / getImageData() 等）都会抛 SecurityError，导出完全没戏。

3. 常规解法：

   • 让图片服务器返回 Access-Control-Allow-Origin: *；
   • 或者把图片转成同源资源（Base64、本地缓存、后端代理）。

   但——我们既改不了后端，也搭不起代理，怎么办？

2. 为什么是 wsrv.nl？

能力	说明
公共图片 CDN + 处理网关	你把原图 URL 丢给它，它帮你拉取 → 裁剪 / 转码 → 用 Cloudflare 全球缓存后返图。
自动加 CORS 头	响应里自带 Access-Control-Allow-Origin: *，Canvas 再也不会 tainted 🔍Shodan。
免费额度友好	≤ 2500 张未缓存请求 / 10 分钟 / 单 IP，足够大多数前端 / no‑code 场景 [🔍FAQ](images.weserv.nl/faq/index.h… "FAQ	wsrv.nl")。
顺带图片优化	一行参数即可缩放、转 AVIF / PNG / WebP，甚至直接返 Base64 DataURL [🔍Format](images.weserv.nl/docs/format… "Format	wsrv.nl")。

一句话：它既是“白嫖代理”，又是“前端图像处理器 + CDN 缓存”。

3. 三步拼出“可跨域可导出”的终极 URL

原图演示地址（带查询串）：

https://avatars.githubusercontent.com/u/583231?s=640&v=4

步骤	操作	关键点
① URL‑encode	encodeURIComponent(原地址) → https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F583231%3Fs%3D640%26v%3D4	带 ?/& 必须完整编码，否则 wsrv.nl 解析异常。
② 拼接 wsrv.nl	https://wsrv.nl/?url=<编码后的地址>	到这一步，浏览器就能无跨域地渲染图片。
③ 追加处理参数（可选）	例如 &w=160&h=160&output=png	缩成 160×160 且转 PNG，更利于 Canvas 导出。所有参数可叠加 [🔍Quick‑ref](wsrv.nl/docs/quick-… "Quick reference	wsrv.nl")。

最终示例

https://wsrv.nl/?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F583231%3Fs%3D640%26v%3D4&w=160&h=160&output=png

结语

在 不能改后端、也不开 Node 的刚性约束下，wsrv.nl 给了我们一条“代理 + CDN + CORS + 图像处理”一站式白嫖通路：

• 仅改前端 URL，上线成本 ≈ 0；
• Canvas 不再 tainted，导出任你折腾；
• 顺带搞定缩放 / 转码 / Base64，一键多得。

按以上流程接入，你就能在任何 no‑code / 纯前端项目里，稳稳搞定跨域 Canvas 图片下载。祝撸码顺利！🚀