[ 想法 ] 保存图片存在跨域问题

[mole828]

错误来源

其他

描述错误

在图片保存时候，会收到来自 url 的制约 导致保存的图片默认名称通常为 qq api 所定好的 download 和 0 https://gchat.qpic.cn/gchatpic_new/{}/{}/0 https://multimedia.nt.qq.com.cn/download?appid={}&fileid={}&rkey={}&spec={} 这就需要保存图片时候手动进行命名

复现流程

No response

截图

No response

版本信息

No response

更多

No response

[mole828]

从 v-viewer 或 viewer.js 给出的方法来看

viewerOpt: { toolbar: {
download() {
    const viewer = app.config.globalProperties.$viewer
    const a = document.createElement("a");
    a.href = viewer.image.src;
    a.download = viewer.image.alt;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
}
} }

会因为 qq api 给出的路径并非文件路径(或许是返回头并非文件) 而直接跳转

[mole828]

如果用fetch的方式的话，又不能通过跨域检查

var xhr = new XMLHttpRequest();
xhr.open('GET', viewer.image.src, true);
xhr.responseType = 'blob';
xhr.onload = function () {
    if (this.status === 200) {
        var blob = new Blob([this.response], {type: 'application/octet-stream'});
        var a = document.createElement('a');
        a.href = window.URL.createObjectURL(blob);
        a.download = viewer.image.alt;
        a.style.display = 'none';
        document.body.appendChild(a);
        a.click();
        a.remove();
    }
};
xhr.send();

[mole828]

感觉上需要一个转发服务，但是现有的并不理想

[Stapxs]

感觉上需要一个转发服务，但是现有的并不理想

是这样…… 事实上 sql2 整个页面都在 no-referrer 模式下来规避防跨域 ……

https://github.com/Stapxs/Stapxs-QQ-Lite-2.0/blob/d5acaa963dfcf5faf023a7a00cc85ecf4bdd4aaa/public/index.html#L7

现在 web 模式下用了 js-file-downloader 这个依赖来更优雅的下载文件并且指定文件名…… https://github.com/Stapxs/Stapxs-QQ-Lite-2.0/blob/d5acaa963dfcf5faf023a7a00cc85ecf4bdd4aaa/src/utils/appUtil.ts#L163-L197

如果真的有必要也可以尝试让它下载所有的图片 emmmm

[mole828]

头痛，我的主要应用场景是家中的不同设备 常用的是http的build，还恰好不能用http访问https的图片

downloadFile确实好用，但是也不能通过 filename 和 nameCallback 有效修改文件名

[Stapxs]

写前端的痛（x js-file-downloader 的重命名下载确实有时候会无效 这方面暂时没有找到啥比较好的解决方案（

[Stapxs]

找了一圈确实没有解决方案（瘫 我可以给 electron 的版本加上这个功能（它可以过滤请求），但是 web 版没救了

[mole828]

暂时使用 express 写了一个 proxy 解决跨域问题 （用go尝试大量json解构差点死掉 https://github.com/mole828/onebot-adapter

[Stapxs]

😋 好耶