首先配置 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.width
canvas.height = image.height
var 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;
}
亲测有效,记录下,希望能帮到你