Fetching latest commit…
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.
<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
....
<web-view id="webView" src="~/www/index.html" visibility="collapse"></web-view>
<!-- Native Image View on which image manipulation is performed -->
<Image id="img" src="~/road-nature.jpg"/>
....
</Page>Initialize Canvas Interface Plugin in your javascript file.
var nsCanvasInterfaceModule = require('nativescript-canvas-interface');
var oNSCanvasInterface;
var imageView;
function pageLoaded(args){
page = args.object;
var webView = page.getViewById('webView');
imageView = page.getViewById('img');
initCanvasInterface(webView);
}
function initCanvasInterface(webView: WebView) {
oNSCanvasInterface = new nsCanvasInterfaceModule.NativescriptCanvasInterface(webView, 'canvasEle'); // 'canvasEle' is the value of "id" attribute of the canvas element in web-view
}Use any API Method of NativescriptCanvasInterface Class
function setCanvasImage(){
oNSCanvasInterface.setImage('setCanvasImage', imageView, args).then(function(result){
// result.data contains any value returned from setCanvasImage function in web-view
});
}
function createImage(){
oNSCanvasInterface.createImage('setBrightness', args).then(function(result) {
imageView.imageSource = result.image;
});
}If you want to set/create image on load of the page, you need to call all such code once webView is loaded
webView.on('loadFinished', (args) => {
if (!args.error) {
// call setImage/createImage
}
});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.
<html>
<head></head>
<body>
<canvas id="canvasEle"></canvas>
<script src="path/to/es6-promise.min.js"></script>
<script src="path/to/nativescript-webview-interface.js"></script>
<script src="path/to/nativescript-canvas-interface.js"></script>
<script src="path/to/your-custom-script.js"></script>
</body>
</html>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.
function init() {
var canvasEle = document.getElementById('canvasEle');
var oCanvasInterface = new window.NSCanvasInterface(canvasEle);
registerNSCanvasReqHandlers(oCanvasInterface);
}
function registerNSCanvasReqHandlers(oCanvasInterface) {
oCanvasInterface.canvasReqHandlers = {
setCanvasImage: setCanvasImage,
setBrightness: setBrightness
};
}
function setCanvasImage(canvas, ctx, image){
// set image to canvas or do anything you want.
ctx.drawImage(image, 0, 0, 100, 100);
}
/**
* 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.
*/
function setBrightness(canvas, ctx, value){
return Promise(function(resolve, reject){
// do image manipulation on canvas
resolve();
});
}
init();
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.
function setCanvasImage(canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D, image: HTMLImageElement, ...arg: any[]){
// return nothing or some value or promise
}Signature of function which handles createImage API call from native app.
function doSomeCanvasManip(canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D, ...arg: any[]){
// return nothing or some value or promise
}