文档反馈
文档反馈
互动白板 > 进阶教程 > 图片载入与导出

图片载入

互动白板可以从外部导入图片。用户可以通过配置工具栏开启该功能。若用户想要自定义工具栏，也可以调用互动白板的接口。

工具栏开启图片上传

在ToolCollection.getInstance时，或者通过toolCollection.setContainerOptions函数，可以设置工具栏支持文档上传。

containerOptions: [
    {
        position: 'left',
        items: [
            //其他工具
            {
                tool: 'image'
            }
        ]
    }
]

SDK接口

调用下面接口可以上传图片

drawPlugin.addImage({
    url: string,
    width: number,
    height: number
})

客户端适配

客户端需要开启一些权限，以及适配代码，才能够从客户端中选择图片资源

图片导出

互动白板可以将当前白板页的内容导出为图片。用户可以通过配置工具栏开启该功能。若用户想要自定义工具栏，也可以调用互动白板的接口。

工具栏开启图片导出

在ToolCollection.getInstance时，或者通过toolCollection.setContainerOptions函数，可以设置工具栏支持文档上传。

containerOptions: [
    {
        position: 'left',
        items: [
            //其他工具
            {
                tool: 'exportImage'
            }
        ]
    }
]

SDK接口

调用下面接口可以导出图片

drawPlugin.exportAsImage()

客户端适配

客户端需要开启一些权限，以及适配代码，才能够从客户端中选择图片资源。具体的对接方法如下：

ios

  1. 在Info.plist中设置相册请求描述信息，支持app请求相册权限

  2. 设置SDK的wkDelegate，接收webView的相关回调，根据回调信息判断是否是IMG标签，保存图片

@property(nonatomic, weak) id<NMCWhiteboardManagerWKDelegate> wkDelegate;

- (void)onDecidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
    NSString *requestString = navigationAction.request.URL.absoluteString;
    //判断是否是IMG
    if(navigationAction.navigationType == WKNavigationTypeLinkActivated && [requestString rangeOfString:@"data:image/png;base64,"].location != NSNotFound) {
        NSString *dataString = [requestString stringByReplacingOccurrencesOfString:@"data:image/png;base64," withString:@""];
        NSData *imageData = [[NSData alloc]initWithBase64EncodedString:dataString options:NSDataBase64DecodingIgnoreUnknownCharacters];;
        UIImage *image = [UIImage imageWithData:imageData];
        //TODO:
        //save image


        decisionHandler(WKNavigationActionPolicyCancel);
    }else {
        decisionHandler(WKNavigationActionPolicyAllow);
    }
}

Qt Quick(windows&macOS)

监听WebEngineView的DownloadRequested信号，并调用accept()接收该信号

    WebEngineView {
        id: webview
        anchors.fill: parent
        url: whiteboardUrl
        webChannel: channel

        property var downloads;
        profile.onDownloadRequested: {
            var arr = download.path.split('/');
            var name = arr[arr.length - 1];
            download.path = defaultDownloadPath + "/" + name;
            webview.downloads = download;
            download.accept();
        }

        profile.onDownloadFinished: {
            downloadFinished(download.path)
        }
    }

相关文档

相关产品

×

反馈成功

非常感谢您的反馈，我们会继续努力做得更好。
确定