首先配置 vite.config.js
export default defineConfig({ plugins: [vue(), ], resolve: { alias: { '@': '/src', // 根据你的项目结构进行设置 }, }, server: { proxy: { '/image-proxy': { target: 'https://你得代理服务器', changeOrigin: true, rewrite: path => path.replace(/^\/image-proxy/, ''), // 确保路径重写正确 }, }, }, })然后使用代码
export function downloadImage(src, name) {// 参数src为图片地址，name为下载时图片的名称src = src.replace(/^https?:\/\/[^/]+/, '/image-proxy');var image = new Image()// 解决跨域 Canvas 污染问题image.setAttribute("crossOrigin", "anonymous")image.onload = function() {var canvas = document.createElement("canvas")canvas.width = image.widthcanvas.height = image.heightvar context = canvas.getContext("2d")context.drawImage(image, 0, 0, image.width, image.height)var url = canvas.toDataURL("image/png")// 生成一个a元素var a = document.createElement("a")// 创建一个单击事件var event = new MouseEvent("click")// 将a的download属性设置为我们想要下载的图片名称，若name不存在则使用‘下载图片名称’作为默认名称a.download = name || "图片"// 将生成的URL设置为a.href属性a.href = url// 触发a的单击事件a.dispatchEvent(event)}image.src = src}使用
downloadImage("图片Url","文件名.jpg")以上只是调试的时候的代理设置，但是到你打包之后这样设置的就会失效，需要使用nginx设置代理，以下是配置，希望能帮到你，
我也是新手，也遇到打包之后访问报错，有百度了一会，需要设置ngxin的代理，确实这样的文章太少，都是说这样然后那样，试了都不可以，只能慢慢试，所以记录下。
location /image-proxy/ { # 假设图片服务器运行在 http://image-server.com:8080 proxy_pass 你得图片地址比如 https://baidu,con; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme;proxy_ssl_verify off; }
亲测有效，记录下，希望能帮到你