D
Deno

help

Get image from automated download

KKay3/1/2024
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")});
}
Mmarvinh.3/1/2024
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"))
KKay3/1/2024
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
Mmarvinh.3/1/2024
@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
KKay3/1/2024
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
No description
Zzamfofex3/1/2024
marvinh’s code works for me. Are you sure the file being served is the same?
KKay3/1/2024
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
Mmarvinh.3/1/2024
sounds like something is wrong with how the image is generated
KKay3/1/2024
could be but if i just go to the page myself it works fine
KKay3/1/2024
Gist
index.html
GitHub Gist: instantly share code, notes, and snippets.
Zzamfofex3/1/2024
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.
KKay3/1/2024
ahh ye when i opened the file i do indeed see the html
Zzamfofex3/1/2024
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. 🤔
KKay3/1/2024
yhea only i coudnt find a local kind of version of threejs or something like it
Zzamfofex3/1/2024
If you just want an isometric image, you could create it without Three.js.
KKay3/1/2024
how do you mean?
KKay3/1/2024
also this is an exaple output of the renderer just a 3D cube with a texture captured using an orthographic camera
No description
KKay3/1/2024
the problem is that its still 3D and it has directional light @zamfofex any idea if there is a package that can let me render things in the deno environment instead of using html? or something that can create images with the possibility of loading textures with corner positions (idk what its officialy called) to be able to make it look 3D or mabye be able to export the threejs render in a different way so i can access it
Zzamfofex3/1/2024
See if this is satisfying enough! deno run -A cube.js
KKay3/1/2024
ohh thats cool. already figured out another way tho. mabye a bit slower but idc abb speed. i made the renderer set the textContent to the dataUrl and use puppeteer to load the page, wait for the data to be put in the body and turn the data into an image. got another problem now is that the image wont show. this is the code where it puts the items on the crafting grid:
let i = 0;
for (const item of recipe.items) {
if (item == null) {
i ++;
continue;
}
const itemTexture: Image = await getTexture(item);
console.log(itemTexture.width(), itemTexture.height());
ctx.drawImage(itemTexture, slots[i][0] * recipe.size_multiplier, slots[i][1] * recipe.size_multiplier, itemTexture.width() * recipe.size_multiplier, itemTexture.height() * recipe.size_multiplier);
i ++;
}
let i = 0;
for (const item of recipe.items) {
if (item == null) {
i ++;
continue;
}
const itemTexture: Image = await getTexture(item);
console.log(itemTexture.width(), itemTexture.height());
ctx.drawImage(itemTexture, slots[i][0] * recipe.size_multiplier, slots[i][1] * recipe.size_multiplier, itemTexture.width() * recipe.size_multiplier, itemTexture.height() * recipe.size_multiplier);
i ++;
}
getTexture function:
async function getTexture(item: string): Promise<Image> {
const itemModel: ItemModel = await import("./assets/minecraft/models/item/" + item + ".json", {with: {type: "json"}}).then(value => value.default);
if (itemModel.parent == "minecraft:item/generated") {
return await loadImage("./assets/minecraft/textures/" + itemModel.textures.layer0.substring(10) + ".png");
}
const parentModel: ItemModel = await import("./assets/minecraft/models/" + itemModel.parent.substring(10) + ".json", {with: {type: "json"}}).then(value => value.default);
if (parentModel.parent == "minecraft:block/cube_all") {
return await generateBlock(item);
}
throw `unsupported model format '${itemModel.parent}'`
}
async function getTexture(item: string): Promise<Image> {
const itemModel: ItemModel = await import("./assets/minecraft/models/item/" + item + ".json", {with: {type: "json"}}).then(value => value.default);
if (itemModel.parent == "minecraft:item/generated") {
return await loadImage("./assets/minecraft/textures/" + itemModel.textures.layer0.substring(10) + ".png");
}
const parentModel: ItemModel = await import("./assets/minecraft/models/" + itemModel.parent.substring(10) + ".json", {with: {type: "json"}}).then(value => value.default);
if (parentModel.parent == "minecraft:block/cube_all") {
return await generateBlock(item);
}
throw `unsupported model format '${itemModel.parent}'`
}
and here it loads the image:
export default async function generateBlock(block: string): Promise<Image> {

if (!existsSync("./tmp/" + block + ".png")) {
if (!existsSync("./tmp")) Deno.mkdirSync("./tmp");
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto("http://localhost:8000/renderer/index.html?material=" + block);
await sleep(100);
const data = await page.evaluate(() => document.body.textContent);

const dataResponse = await fetch(data);
const file = await Deno.open("./tmp/" + block + ".png", {create: true, write: true});
await dataResponse.body?.pipeTo(file.writable);
}

return await loadImage("./tmp/" + block + ".png");
}
export default async function generateBlock(block: string): Promise<Image> {

if (!existsSync("./tmp/" + block + ".png")) {
if (!existsSync("./tmp")) Deno.mkdirSync("./tmp");
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto("http://localhost:8000/renderer/index.html?material=" + block);
await sleep(100);
const data = await page.evaluate(() => document.body.textContent);

const dataResponse = await fetch(data);
const file = await Deno.open("./tmp/" + block + ".png", {create: true, write: true});
await dataResponse.body?.pipeTo(file.writable);
}

return await loadImage("./tmp/" + block + ".png");
}
KKay3/1/2024
the image is the result and the recipe.json file is the input
KKay3/1/2024
the width of the stone image is also logging just fine so it clearly has the image. its just not putting it in sorry nvm its working. had to change the image size to a standard of 16 (the width of the crafting grid) but thx for the help. still used part of your code to get the image from the data url

Looking for more? Join the community!

Recommended Posts
Get image data from automated downloadI have this page which displays a render using threejs and renders it into a png and downloads it. iWait until Deno.Command process has exitedHow would i stop code execution until the process has exited? since its not a promise i cant just doWhy JSX is not working ?// @deno-types="@types/react" import React from "react"; const A = (): React.ReactElement => <div />Running with --cached-only not workingFirst I cache all dependencies of my typescript file: `deno cache --lock=deno.lock --lock-write serSubhosting DeploymentsI've been playing around with deno subhosting. I get the concept of a project and deployments in a pThe new and updated version for using socket.io handler with Deno.serve()Hey there! am getting a error when I pass socket.io handler to Deno.serve(), Here is what am doing :Sorting tailwindcss class names with prettier plugin?When developing in Fresh, I would like to have my class names automatically sorted with the [officiaHow to validate types in API Requests and Responses?Hello, I'm wondering how to validate and handle the types in my app's API. I'll use the example founDeno LSP + React + TypeScript + Vite (--node-modules-dir)Does the Deno LSP works with the --node-modules-dir option? did ```sh deno run --allow-env --allow-deno_runtime NpmResolver like the CLI?As far as I can tell, if I want to embed Deno in my Rust application using deno_core and deno_runtimIs it possible to share the same privateLink in Deno Subhosting?Recently we are trying to implement a "custom js function" module in Deno Subhosting, our concern isSource generation for dependenciesHello, I'm working on a source gen for a library (Node, Deno, Bun) and currently my idea was to overFetch errors outFailed to serve connection: hyper::Error(BodyWrite, Os { code: 55, kind: Uncategorized, message: "NoDeno Jupyter Notebook - monorepo supportHi all! We have a typescript-based monorepo that uses Turbo/Pnpm/etc Our primary reason for coming workspace importI have a vsc root-level settings.json file ```json { "deno.enable": true, "deno.enablePathsHow Enable HTTPS localhost DENO?I want to run Deno Oak over Https in local. I use OpenSsl/mkcert to create cert and key. But no workDeny env permissions silently (without throwing)Hi. An `npm` module I'm using tries to read, or rather check for an existence of an `env` variable.HTTPS Oak DenoI want to run Deno Oak over Https in local. I use OpenSsl to create cert and key. But no works.WebSocket proxy Deno.createHttpClientIs it possible to use proxy for web socket connections in Deno?How to feed a ReadableStream / async Generator into a Response object?``` Bun.serve({ async fetch(req) { return new Response( async function* stre