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/

[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?