Example on codesandbox.io or similar

[wonderwhy-er]

Is your feature request related to a problem? Please describe. Tried to use but did not understood how.

Describe the solution you'd like Code example that can be played with on some online code playground like https://codesandbox.io/

[brizer]

It is a good idea!

[JensUweB]

I don't know what frontend framework / library you're using, but in angular the implementation is dead simple:

• Install package: npm install @gripeless/pico
• add Window to providers array in AppModule:

@NgModule({
  declarations: [
    // Components
    AppComponent,
  ],
  imports: [
   //..
 ],
  providers: [{ provide: Window, useValue: window }],
  bootstrap: [AppComponent],
})
export class AppModule {}

• take a picture

import * as Pico from '@gripeless/pico';

@Injectable({
  providedIn: 'root',
})
export class TicketService {
async doScreenShot() {
    // ...
    const screenshot = (await Pico.dataURL(window, {})).value;
    console.log(screenshot ); // for debugging only
    return screenshot;
  }
}

If you don't know angular: It uses not normal javascript, but its superset typescript.

[wonderwhy-er]

Well reason I asked for this is that I did fail to make it work in some simple case. Like here create vanilla typescript project on codesandbox and added just your import example. https://codesandbox.io/s/vibrant-euclid-hxfxz?file=/src/index.ts

Could be problem with how they package. But neither it works on RunKit to which you can go from npm page. https://npm.runkit.com/%40gripeless%2Fpico

So yeah I asked for some example project that has both code and published online to play around.

[jamesta696]

Thanks for routing me to this example thread, unfortunately all examples are not working, resulting in "SyntaxError: Unexpected token" or "$csb__fluture.parallel is not a function".

[TomasKovacikArtin]

@JensUweB and what abotu the ignore option? Its failing if I provide { ignore: ['#to-ignore']}

[marcusx2]

Can any kind soul provide me the minified js file of this library?