将PNG图片从后端保存到前端到本地Angular Project文件夹

Question

我想将从后端（Java项目）收到的PNG图像保存到Angular Project内的文件夹中。 到目前为止，我只能将图像保存在PC的Downloads /文件夹下，您可以看到文件的下载方式。 我想要的是在项目中静默下载图像（当我检查文件夹以查看存储的新图像时）。

后端：

    @GET
    @Produces(MediaType.TEXT_PLAIN)
    @Path("getImage")
    public Response getImage() {
        File dir = new File(Utilities.IMAGE_DIRECTORY);
        File[] directoryListing = dir.listFiles();
        String encodedImages = null;

        // Get the first image stored in Backend project folder
        try {
            if (directoryListing != null) {
                // Encode the image in Base64 and save it in a string
                encodedImages = Base64
                                 .getEncoder()
                                 .withoutPadding()
                                 .encodeToString(
                        Files.readAllBytes(directoryListing[0].toPath()));
            }
        } catch (IOException e) {
            e.printStackTrace();
            ...
        }

        // Send the base64 string to Frontend
        return Response
                .status(Response.Status.OK)
                .entity(encodedImages)
                .build();
    }

前端：

  /* Extract Image */
  getImage() {
    this
      .http
      .get(this.baseUrl + "getImage", { responseType: 
       'text' })
      .subscribe((res) => {
        console.log("I received the image: \n" + res);

        // Decode from base64 to PNG
        var decodedImage = atob(res);

        var blob = new Blob([decodedImage], { type: 'image/png' });

        //this method saves the image in Downloads/ and it is not silent
        saveAs(blob, 'imageFileName.png');
    });
  }

Answer 1

既然您的用户将不需要它自己的图像，为什么要下载它？ 您不需要下载图像就可以使用它。 仅当您的用户需要下载图像时，才可以使用“保存文件”系统。