imgly / background-removal-js

Remove backgrounds from images directly in the browser environment with ease and no additional costs or privacy concerns. Explore an interactive demo.
https://img.ly/showcases/cesdk/web/background-removal/web
GNU Affero General Public License v3.0
5.49k stars 339 forks source link

ENOENT: no such file or directory, open resources.json on windows #47

Closed liudonghua123 closed 8 months ago

liudonghua123 commented 9 months ago

I tried a simple example for node. But I found the default publicPath is always resolved incorrect.

The default publicPath is "file://D:/code\\node\\removeBackground_example\\node_modules\\@imgly\\background-removal-node\\dist/" on my windows. And the url.pathname is '/D:/code/node/removeBackground_example/node_modules/@imgly/background-removal-node/dist/resources.json'. When this path passed to fs.readFile, it produced ENOENT: no such file or directory error.

According to readFile docs on https://nodejs.org/api/fs.html#fspromiseswritefilefile-data-options, the file argument accepts URL type, so the fix is simple, just replace readFile(uri.pathname) to readFile(uri).

See https://github.com/imgly/background-removal-js/blob/32b4fc0843f13e344aacce54529eb6491ea8c6f0/packages/node/src/schema.ts#L21 https://github.com/imgly/background-removal-js/blob/32b4fc0843f13e344aacce54529eb6491ea8c6f0/packages/node/src/resource.ts#L21

> url = new URL("./resources.json", "file://D:/code\\node\\removeBackground_example\\node_modules\\@imgly\\background-removal-node\\dist/")
URL {
  href: 'file:///D:/code/node/removeBackground_example/node_modules/@imgly/background-removal-node/dist/resources.json',
  origin: 'null',
  protocol: 'file:',
  username: '',
  password: '',
  host: '',
  hostname: '',
  port: '',
  pathname: '/D:/code/node/removeBackground_example/node_modules/@imgly/background-removal-node/dist/resources.json',
  search: '',
  searchParams: URLSearchParams {},
  hash: ''
}
> fs.readFile(url.pathname,(err,buf)=>{console.info(err,buf)})
undefined
> [Error: ENOENT: no such file or directory, open 'D:\D:\code\node\removeBackground_example\node_modules\@imgly\background-removal-node\dist\resources.json'] {
  errno: -4058,
  code: 'ENOENT',
  syscall: 'open',
  path: 'D:\\D:\\code\\node\\removeBackground_example\\node_modules\\@imgly\\background-removal-node\\dist\\resources.json'
} undefined
> fs.readFile(url,(err,buf)=>{console.info(err,buf)})
undefined
> null <Buffer 7b 0a 20 20 22 2f 6d 6f 64 65 6c 73 2f 73 6d 61 6c 6c 22 3a 20 7b 0a 20 20 20 20 22 63 68 75 6e 6b 73 22 3a 20 7b 0a 20 20 20 20 20 20 22 37 30 30 31 ... 461 more bytes>

>

workable example code without fix:

// index.mjs
import { removeBackground} from "@imgly/background-removal-node"
import { writeFile } from 'node:fs/promises';
import { Buffer } from 'node:buffer';

const public_path = "file:///code/node/removeBackground_example/node_modules/@imgly/background-removal-node/dist/" ; // the path on the local file system

let config = {
  debug: true,
  publicPath: public_path, // path to the wasm files
  progress: (key, current, total) => {
    console.log(`Downloading ${key}: ${current} of ${total}`);
  }
};

let image_src = 'file://D:/code/node/removeBackground_example/example.jpg';

const blob = await removeBackground(image_src, config);
// result is a blob encoded as PNG.
// It can be converted to an URL to be used as HTMLImage.src
// save blob as result.png
console.info(`blob type: ${typeof blob}`)
const data = Buffer.from(await blob.arrayBuffer());
console.info(`data type: ${typeof data}`)
await writeFile('result.png', data);
console.log('The file has been saved!');
liudonghua123 commented 9 months ago

I can change let image_src = 'file://D:/code/node/removeBackground_example/example.jpg'; to let image_src = './example.jpg'; in the above example code to simplify the relative URL path.