Nativescript-Canvas-Interface
Nativescript Plugin to perform image manipulation using web-view canvas for Android/iOS.
Installation
From the terminal, go to your app's root folder and execute:
tns plugin add nativescript-canvas-interface
Once the plugin is installed, you need to copy plugin files for webView, into your webView content folder. e.g.
cp -r node_modules/nativescript-canvas-interface/www/ app/www/lib/
Usage
For a quick start, you can check this Demo App and Blog Post
Inside Native App
Insert a web-view
somewhere in your page. You can keep it hidden, if you don't want to show the image in web-view.
.... <!-- Native Image View on which image manipulation is performed --> ....
Initialize Canvas Interface Plugin in your javascript file.
var nsCanvasInterfaceModule = ;var oNSCanvasInterface;var imageView; { page = argsobject; var webView = page; imageView = page; ; } { oNSCanvasInterface = webView 'canvasEle'; // 'canvasEle' is the value of "id" attribute of the canvas element in web-view}
Use any API Method of NativescriptCanvasInterface
Class
{ oNSCanvasInterface;} { oNSCanvasInterface;}
If you want to set/create image on load of the page, you need to call all such code once webView is loaded
webView;
Inside WebView
Import nativescript-webview-interface.js
, nativescript-canvas-interface.js
and es6-promise.min.js
in your html page from the folder
where you copied www files during installation.
Add canvas element and give it an id.
Now, create instance of NSCanvasInterface
using canvas element. Once the instance is created, we need to register the functions which will
handle requests from native app.
{ var canvasEle = document; var oCanvasInterface = canvasEle; ; } { oCanvasInterfacecanvasReqHandlers = setCanvasImage: setCanvasImage setBrightness: setBrightness ;} { // set image to canvas or do anything you want. ctx;} /** * Return promise or value or nothing. * Once the promise is reslved or value is returned, the plugin will create an image * from canvas context and pass it to native app. */ { return Promise{ // do image manipulation on canvas ; };} ;
API
Native App API
Constructor
NativescriptCanvasInterface(webView: WebView, canvasId: String)
We need to create a new instance per web-view canvas element.
Parameters
webView: Nativescript web-view element.
canvasId: Value of "id" attribute of web-view canvas element.
Methods
setImage(functionName: string, image: Image | ImageSource | string, args?: any[], format: string = 'png'): Promise<{data: any}>
Call this method to send image from native app to web-view. The image is automatically converted from nativescript ImageView/ImageSource/imagePath to HTML Image element, and that HTML Image is served to the registered function in web-view.
Parameters
functionName: Registered name of the function in web-view, to handle the image sent.
image: Image to send to web-view. Image can be a Nativescript ImageView or ImageSource or a valid Image Path.
args: (Optional) Any extra argument to pass to function in web-view.
format: (Optional) Format in which we want to send the image to web-view. Possible formats are jpeg or png. Default value is png.
returns: Promise with any data returned from the function in web-view.
createImage(functionName: string, args?: any[], format: string = 'png'): Promise<{image: ImageSource, data: any}>
Call this method to execute function in web-view, which performs canvas manipulation, and get the manipulated image back.
Parameters
functionName: Function to be executed in web-view, to create image from canvas.
args: Any extra argument to pass to function in web-view.
format: Expected image format from canvas in web-view. Possible formats are jpeg or png. Default value is png.
returns: Promise with nativescript ImageSource and any data returned from the function in web-view.
WebView API (window.NSCanvasInterface Class)
Constructor
NSCanvasInterface(canvas: HTMLCanvasElement)
Create new instance per canvas element.
Property
canvasReqHandlers: { [fnName: string]: (...args) => Promise | any }
Register all the functions which handles requests from native app for canvas manipulation.
Signature of function which handles setImage API call from native app.
{ // return nothing or some value or promise}
Signature of function which handles createImage API call from native app.
{ // return nothing or some value or promise}