Javascript 打开作为参数传递本地图像的网站 问题定义

我试图打开一个网站，它的url提供了一个存储在用户计算机上的图像，作为使用windows批处理的参数。用户计算机上图像的路径是批处理文件的参数

my-batch-file.bat C:\path\to\image1 C:\path\to\image2

将打开www.example.com，使这两个图像可用于JS脚本

具体例子： 我拥有一个网站www.image-edition-example.com，人们可以在那里打开图片进行编辑

我希望他们能够加载他们想要编辑的图像到网站使用批脚本。图像存储在用户计算机上的路径

C:\path\to\image1

和

C:\path\to\image2

。我（理想情况下）不想涉及任何后端，只想在前端加载图像

到目前为止我都试过了 据我所知，在浏览器中不可能从JS访问用户的文件系统（听起来是一个公平的安全选择）

我还可以在bash中打开该图像（例如，在base64中，我不知道如何实现），并通过cURL请求发送它

在这种情况下，我可以通过POST发送，在这种情况下，我必须访问服务器端的数据，但我的网站是一个静态网站，由Webpack构建，因此我不知道如何访问它并将其发送回前端

另一个选项是使用GET，这意味着将base64图像放入url，这使得url太长

---

有人知道我如何回避这个问题吗？

我对这个问题的理解是：

• 您希望从命令行运行批处理过程

• 它将通过文件名识别本地图像，并将其发送到您网站的页面上

• 您的网站是静态的，没有可用的服务器端组件

• 将图像转换为Base64或类似版本以将其包含在URL中会导致URL过长

• 您打开的页面将在本地与图像交互（不将其存储在服务器或类似设备上）

我想不出用传统的网络浏览器能做到这一点

我能想到的最接近的方法是让一个小型应用程序在本地运行，使您网站上基于浏览器的代码能够读取本地图像，使用CORS将您网站的源代码列为白名单，这样ajax就不会被浏览器的同源协议实现阻止

例如，假设作为特定图像处理的一部分，您的工具：

将相关图像（例如，

foo.jpg

）复制到

C:\PublicImages

触发了URL

http://www.example.com/page.html?image=foo.jpg

或类似产品

该页面上的代码将查询http://localhost:3000/foo.jpg通过ajax请求图像数据

只有在运行此任务时才会运行的一个小型web服务器进程使用

C:\PublicImages

中该图像的图像数据响应该请求

任何合理的简单HTTP服务器都可以做到这一点。或者，如果您喜欢编写一些代码，而不是配置一些随机的服务器包，那么您可以使用Node.js和（也许）编写自己的代码。它看起来像这样：

const express = require('express');
const app = express();
const port = 3000;

const options = {
    extensions: [/*...relevant image extensions here...*/],
    index: false,
    redirect: false,
    setHeaders: function (res, path, stat) {
        res.set("Access-Control-Allow-Origin", "http://www.example.com");
        // ...and probably other CORS headers...
    }
};

app.use(express.static("C:\\PublicImages", options));

app.listen(port, () => console.log(`Serving images on port ${port}`));

---

这只是一个草图。

不清楚打开url和提供图像有什么意义。你到底想干什么？通过bash将图像上传到站点？是的，这很难解释。通过bash将图像上传到站点可能是一个很好的总结，但我也希望在发送之前在前端访问它。这更有意义吗？什么前端？我和你一起从bash提交，但是…？听起来你想用selenium@T.J.Crowder不，困难不在于将其保存到网站服务器。问题是如何在浏览器中打开它。例如，您可以说“我想打开此图像在图像编辑网站上进行编辑”，图像存储在本地。为此，您可以运行批处理脚本直接在网站中打开图像，并准备好进行编辑。没有涉及后端这是非常有创造性的。我正在实现这一点，当它起作用时，我会检查你的答案。谢谢你的帮助。