Kay•7mo ago

Get image from automated download

I have this page which displays a render using threejs and renders it into a png and downloads it. i need that image to use it in a canvas from deno-canvas but when i download it using this package it returns this:

error: Uncaught (in promise) Error: The filename, directory name, or volume label syntax is incorrect. (os error 123): writefile 'C:\Users\titul\AppData\Local\Temp\deno_dwld2b5d29e3bc7dd136/E:\Arcunis\recipeImageMaker\stone.png'

error: Uncaught (in promise) Error: The filename, directory name, or volume label syntax is incorrect. (os error 123): writefile 'C:\Users\titul\AppData\Local\Temp\deno_dwld2b5d29e3bc7dd136/E:\Arcunis\recipeImageMaker\stone.png'

code where i download it:|

import { download } from "https://deno.land/x/download@v2.0.2/mod.ts";
import { join } from "https://deno.land/std/path/mod.ts";
export default async function generateBlock(block: String) {
    await download("http://localhost:8000/renderer/index.html?material=" + block, {file: join(Deno.cwd(), block + ".png")});
}

import { download } from "https://deno.land/x/download@v2.0.2/mod.ts";
import { join } from "https://deno.land/std/path/mod.ts";
export default async function generateBlock(block: String) {
    await download("http://localhost:8000/renderer/index.html?material=" + block, {file: join(Deno.cwd(), block + ".png")});
}

21 Replies

marvinh.•7mo ago

Looking at the docs of the download library the file parameter is there to set the filename only. You're passing a full absolute path into that. Under the hood the library seem to only append the file parameter to their own internal path leading to the broken file path you're seeing in the error message. You might have better luck just using builtin APIs to download a file:

async function download(url: string, filePath: string) {
  const res = await fetch(url);
  const file = await Deno.open(filePath, {
    create: true,
    write: true
  })

  await res.body?.pipeTo(file.writable);
}

// Usage
await download("https://example.com/my-file.txt", path.join(Deno.cwd(), "save-to-disk.txt"))

async function download(url: string, filePath: string) {
  const res = await fetch(url);
  const file = await Deno.open(filePath, {
    create: true,
    write: true
  })

  await res.body?.pipeTo(file.writable);
}

// Usage
await download("https://example.com/my-file.txt", path.join(Deno.cwd(), "save-to-disk.txt"))

Kay•7mo ago

this still gives an error

error: Uncaught (in promise) BadResource: Bad resource ID
    file.close();
         ^
    at FsFile.close (ext:deno_fs/30_fs.js:738:10)
    at download (file:///E:/Arcunis/recipeImageMaker/src/generateBlock.ts:11:10)
    at eventLoopTick (ext:core/01_core.js:153:7)
    at async generateBlock (file:///E:/Arcunis/recipeImageMaker/src/generateBlock.ts:16:5)

error: Uncaught (in promise) BadResource: Bad resource ID
    file.close();
         ^
    at FsFile.close (ext:deno_fs/30_fs.js:738:10)
    at download (file:///E:/Arcunis/recipeImageMaker/src/generateBlock.ts:11:10)
    at eventLoopTick (ext:core/01_core.js:153:7)
    at async generateBlock (file:///E:/Arcunis/recipeImageMaker/src/generateBlock.ts:16:5)

new file:

import { join } from "https://deno.land/std@0.93.0/path/mod.ts";

async function download(url: string, filePath: string) {
    const res = await fetch(url);
    const file = await Deno.open(filePath, {
        create: true,
        write: true
    })
  
    await res.body?.pipeTo(file.writable);
    file.close();
}

export default async function generateBlock(block: String) {
    
    await download("http://localhost:8000/renderer/index.html?material=" + block, join(Deno.cwd(), block + ".png"));

}

generateBlock("stone"); // Temporary function call for testing

import { join } from "https://deno.land/std@0.93.0/path/mod.ts";

async function download(url: string, filePath: string) {
    const res = await fetch(url);
    const file = await Deno.open(filePath, {
        create: true,
        write: true
    })
  
    await res.body?.pipeTo(file.writable);
    file.close();
}

export default async function generateBlock(block: String) {
    
    await download("http://localhost:8000/renderer/index.html?material=" + block, join(Deno.cwd(), block + ".png"));

}

generateBlock("stone"); // Temporary function call for testing

it does look like progress tho

marvinh.•7mo ago

@Kay ah apologies, the file.close() should be removed Deleted it from my code snippet. Not sure why I added that, my brain blanked probably

Kay•7mo ago

that worked. only the image is not valid. the stone-valid.png is downloaded by me just going to the url and the stone-invalid.png is downloaded by the code. the file sizes do not match and the invalid one does not load in any image editor/viewer

zamfofex•7mo ago

marvinh’s code works for me. Are you sure the file being served is the same?

Kay•7mo ago

its not exactly being served. its generated. first threejs generates a cube and loads a texture from a material from the url parameters. then it generates an image and downloads it

marvinh.•7mo ago

sounds like something is wrong with how the image is generated

Kay•7mo ago

could be but if i just go to the page myself it works fine

Kay•7mo ago

this is the renderer https://gist.github.com/phant0m2290/bf07e2cf7c020879e3dfc6b8e3a089e4

Gist

index.html

GitHub Gist: instantly share code, notes, and snippets.

zamfofex•7mo ago

It seems like you’re actually downloading the page’s source instead of the image you want. I’m not sure you can easily/seamlessly just have Deno save the file from the browser JavaScript code.

Kay•7mo ago

ahh ye when i opened the file i do indeed see the html

zamfofex•7mo ago

But note that you can just run that code on Deno itself if you use the right tools, instead of having it run on a browser. I guess Three.js might not be possible, actually. 🤔

Kay•7mo ago

yhea only i coudnt find a local kind of version of threejs or something like it

zamfofex•7mo ago

If you just want an isometric image, you could create it without Three.js.

Kay•7mo ago

how do you mean?