nativescript-community / nativescript-drawingpad Goto Github PK

import { Component, ElementRef, ViewChild } from '@angular/core';
import { registerElement } from '@nativescript/angular';
import { ImageSource } from '@nativescript/core';
import { DrawingPad } from '@nativescript-community/drawingpad';

registerElement('DrawingPad', () => DrawingPad);

@Component({
  selector: 'drawing-pad-example',
  template: `
    <ScrollView>
      <StackLayout>
        <DrawingPad
          #DrawingPad
          height="400"
          id="drawingPad"
          penColor="#ff4081"
          penWidth="3"
        >
        </DrawingPad>

        <StackLayout orientation="horizontal">
          <Button text="Get Drawing" (tap)="getMyDrawing()"></Button>
          <Button text="Clear Drawing" (tap)="clearMyDrawing()"></Button>
        </StackLayout>
      </StackLayout>
    </ScrollView>
  `
})
export class DrawingPadExample {
  @ViewChild('DrawingPad') DrawingPad: ElementRef;

  getMyDrawing(args) {
    // get reference to the drawing pad
    const pad = this.DrawingPad.nativeElement;

    // then get the drawing (Bitmap on Android) of the drawingpad
    let drawingImage;
    pad.getDrawing().then((data) => {
        console.log(data);
        // At this point you have a native image (Bitmap on Android or UIImage on iOS)
        // so lets convert to a NS Image using the ImageSource
        const image = new ImageSource(data); // this can be set as the `src` of an `Image` inside your NS
        drawingImage = image; // to set the src of an Image if needed.
        // now you might want a base64 version of the image
        const base64imageString = image.toBase64String('jpg'); // if you need it as base64
        console.log('::IMG_BASE64::', base64imageString);
      },
      (err) => {
        console.log(err);
      }
    );
  }

  clearMyDrawing(args) {
    const pad = this.DrawingPad.nativeElement;
    pad.clearDrawing();
  }
}