Browser Support

[z3dev]

I was able to use this library in the browser by adding a build script based on browserify.

  "scripts": {
    "build": "browserify index.js -o dist/image-decode.js --standalone decode",
    "test": "node test"
  }

The standalone library can then be used within the browsers.

Just wondering... are you planning on adding this?

[dy]

Good point. That's nice it worked. I think there might be a shortcut in browser, basically all formats are included in img element. I suppose byte data can be transfered to img element and then read as canvas. Or put directly to canvas. The impediment is async nature of decoding in browser... It would require major version change, because function will return a promise.

[z3dev]

Attaching the image to the DOM is a clever workaround for some use cases. However, I'm using images from drag-n-drop, and then converting those to 3D surfaces. This is part of the JSCAD project; www.jscad.xyz

Good point about the async nature of the decoding. I'm not sure that's 100% required.

Here's the code that produces the 3D surface.

const {primitives} = require('@jscad/modeling')

const fs = require('fs')

const { heightmap, extrudeSurface } = require('./jscad-surface')

// sets a global variable called 'decode'
let imageDecode = require('./image-decode')
// sets a local variable called 'decode'
// FIXME cannot use because of dependencies on NODE libraries, i.e. stream, etc.
//let decode = require('image-decode')

const main = () => {
  // read the image data from a file
  const imageData = decode(fs.readFileSync('project_image/MandM.jpg'))
  console.log('imageData:', imageData.width, imageData.height)

  // convert the image data into a heightmap
  const myheightmap = heightmap.fromImageData(imageData)

  // convert the heightmap into a 3D surface
  const mysurface = extrudeSurface({ scale: [1, 1, -20], smooth: 1, base: 25.0 }, myheightmap)
  console.log(mysurface.polygons.length)

  return mysurface
}

module.exports = {main}

P.S. Yeah. We have NODE.js package support inside the browser.

[z3dev]

@dy Here's another GREAT REASON to publish a web-ready package.

https://unpkg.com/

This is really cool.

[z3dev]

I’d be glad to add a PR for this. What do you think?

[dy]

Sure! I am sorry - not fully understood the issue - hope the change isn't going to be large. I still think that the right option would be moving package to async API, since it's well-supported nowadays, and using img workaround for the browser to minimize the size.

[z3dev]

See PR #7

[ThibautSF]

Note that similar modifications can be reproduce to https://github.com/dy/image-encode

With browserify index.js -o dist/image-encode.js -g uglifyify --standalone imageencode as "build"