商城
作者 NativeScript.org
nativeScript-canvas-interface
由 Shripal Soni 创建 | v1.0.0
Nativescript 插件，用于使用 web-view canvas 在 Android/iOS 上进行图像处理。
npm i --save nativescript-canvas-interface

Nativescript-Canvas-Interface

Nativescript 插件，用于使用 web-view canvas 在 Android/iOS 上进行图像处理。

安装

在终端中，转到您的应用程序根目录并执行

tns plugin add nativescript-canvas-interface

一旦插件安装完成，您需要将插件文件复制到 webView 内容文件夹中的 webView。例如：

cp -r node_modules/nativescript-canvas-interface/www/ app/www/lib/

使用方法

为了快速入门，您可以查看这个演示应用程序和博客文章

在原生应用程序内

在您的页面中插入一个 web-view。如果您不想在 webView 中显示图像，可以将其保持隐藏。

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

在您的 JavaScript 文件中初始化 Canvas 接口插件。

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
}

使用 NativescriptCanvasInterface 类的任何API 方法。

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;
    });
}

如果您想在页面加载时设置/创建图像，您需要一旦 webView 加载就调用所有这些代码。

webView.on('loadFinished', (args) => {
    if (!args.error) {
        // call setImage/createImage
    }
});

在 WebView 内部

从安装时复制的 www 文件夹中，将 nativescript-webview-interface.js、nativescript-canvas-interface.js 和 es6-promise.min.js 导入到您的 HTML 页面。
添加 canvas 元素并给它一个 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>

现在，使用 canvas 元素创建 NSCanvasInterface 的实例。一旦实例创建完成，我们需要注册处理来自原生应用程序请求的函数。

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

原生应用程序 API

构造函数

NativescriptCanvasInterface(webView: WebView, canvasId: String)

我们需要为每个 web-view canvas 元素创建一个新的实例。

参数

webView: Nativescript web-view 元素。
canvasId: web-view canvas 元素的 "id" 属性的值。

方法

setImage(functionName: string, image: Image | ImageSource | string, args?: any[], format: string = 'png'): Promise<{data: any}>

调用此方法将图像从原生应用程序发送到 webView。图像会自动从 Nativescript ImageView/ImageSource/imagePath 转换为 HTML Image 元素，并服务于在 webView 中注册的函数。

参数

functionName: 在 webView 中注册的处理发送图像的函数的名称。
image: 要发送到 webView 的图像。图像可以是 Nativescript ImageView 或 ImageSource 或有效的 Image 路径。
args: (可选) 传递给 webView 中函数的任何额外参数。
format: (可选) 我们希望发送到 webView 的图像格式。可能的格式是 jpeg 或 png。默认值是 png。
返回: 从 webView 中的函数返回的 Promise。

createImage(functionName: string, args?: any[], format: string = 'png'): Promise<{image: ImageSource, data: any}>

调用此方法执行 webView 中的函数，该函数执行 canvas 操作，并将处理后的图像返回。

参数

functionName: 在 webView 中执行的函数，用于从 canvas 创建图像。
args: 传递给 webView 中函数的任何额外参数。
format: webView 中 canvas 预期的图像格式。可能的格式是 jpeg 或 png。默认值是 png。
返回值：包含nativescript ImageSource和从web-view函数中返回的任何数据的Promise。

WebView API (window.NSCanvasInterface类)

构造函数

NSCanvasInterface(canvas: HTMLCanvasElement)

为每个canvas元素创建新实例。

属性

canvasReqHandlers: { [fnName: string]: (...args) => Promise| any }

注册所有处理原生应用对canvas操作请求的函数。

处理原生应用设置图片API调用函数的签名。
function setCanvasImage(canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D, image: HTMLImageElement, ...arg: any[]){
    // return nothing or some value or promise
}
处理原生应用创建图片API调用函数的签名。
function doSomeCanvasManip(canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D, ...arg: any[]){
    // return nothing or some value or promise
}