pica import .toBlob() is not a function

[tw1t611]

I cannot use .toBlob() function on an existing pica object, tried on a gatsby (react) project with and without:

{
  resolve: {
    alias: {
      // Use compiled pica files from /dist folder
      pica: 'pica/dist/pica.js',
    },
  }
}

Code

// correctly resolves for pica.resize()
import pica from "pica"
...
        const resizedCanvas = document.createElement("canvas")
        resizedCanvas.height = 500
        resizedCanvas.width = 500
        const myImage = new Image()
        myImage.src = reader.result
        pica()
          .resize(myImage, resizedCanvas, {
            unsharpAmount: 80,
            unsharpRadius: 0.6,
            unsharpThreshold: 2,
          })
          .then(result => pica.toBlob(result, "image/png", 0.9))
        .then(blob => console.log("resized to canvas & created blob!", blob))
...

Error:

Uncaught (in promise) TypeError: pica__WEBPACK_IMPORTED_MODULE_7___default.a.toBlob is not a function

[Vitaly Puzrin]

I have no ideas about webpack and import. This part of readme was added by other people. If you use pica from dist as UMD module, it should work.

[tw1t611]

It was not an import error, so if anyone encounters this problem:
When you need to import pica as an object, you need to call the function everytime you use it.

.then(result => pica.toBlob(result, "image/png", 0.9))
// should have been
.then(result => pica().toBlob(result, "image/png", 0.9))

If you are using gatsby, you don't need to configure webpack.
Hope that helps, sorry for the noise.

[Vitaly Puzrin]

Ah, you are right. Pica is class. Need to create instance first: var pica = new Pica();, then use it.

Probably worth to create alias for static method.