https://github.com/sarath-sasikumar/ng-dom-image-capture

This is an Angular directive which can be used with any particular HTML node and enable it to be converted to its base64 image equivalent.
https://github.com/sarath-sasikumar/ng-dom-image-capture

angular2 angular4 dom image

Last synced: 4 days ago
JSON representation

This is an Angular directive which can be used with any particular HTML node and enable it to be converted to its base64 image equivalent.

• Host: GitHub
• URL: https://github.com/sarath-sasikumar/ng-dom-image-capture
• Owner: sarath-sasikumar
• Created: 2018-02-17T14:28:16.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2018-07-08T14:37:44.000Z (over 6 years ago)
• Last Synced: 2025-01-28T03:04:02.999Z (14 days ago)
• Topics: angular2, angular4, dom, image
• Language: TypeScript
• Homepage:
• Size: 1.28 MB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# ng-dom-image-capture

This is an Angular directive which can be used with any particular tag and make it convertable to its base64 image equivalent.

This has been inspired from the dom-to-image library.

## Setup

The first step is to install

```

npm i ng-dom-image-capture

```

Next is to import the `ImageModule` in the app module and use them in the `imports` and `providers`

```

import { ImageModule } from 'ng-dom-image-capture';

```

## Usage

The usage of the directive is as straightforward as it gets.

```

  

```

The $event will contain the `base64` equivalent of the node. The onConvertComplete event is triggered only when the conversion to the image is complete.

## Triggering Conversion

The conversion of the node to the `base64` equivalent is to be triggered by a custom `copy` event. The html div on which the `capture` directive is applied will be listening to this custom `copy` event and on receiving this event it will convert the dom to the image equivalent.

This means that the element which triggers this event SHOULD be some child of the element on which the `capture` directive is applied.

For Ex: 

There is a button which is supposed to trigger the copy process

```

  

  Copy

```

This function will emit the custom `copy` event.

JavaScript provides ability to emit custom events.

https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events

So the `emitCopyEvent` should be something like:

```

  public emitCopyEvent($event:Event):void{

    const event: CustomEvent = new CustomEvent("copy", {bubbles: true});

    $event.currentTarget.dispatchEvent(event);

```

## captureExclude

It is possible that in certain scenarios, a particular element needs to be excluded from the image conversion procedure. This can be easily done by including a `captureExclude` attribute to the node that does not need to be copied.

```

  

    


    


```

## captureInclude

There is also a feature to mark all the nodes that need to be copied, with the `captureInclude` attribute so that only those nodes are copied.

If there is no such attribute attached to any node, then the whole node is as such copied.

> A very important note is that the node which is to be passed if its an angular node, then it definitely should have display property set, otherwise the library would be unable to get the node style properties.

> The performance of the dom conversion can be improved by running the conversion logic outside the Angular zone and this improvement will also be made available in the future commits