H5Screenshot

功能描述

截取某html元素,输出图片base64或保存图片到本地。
html的样例使用了[AUI](http://aui.dianm.cc/doc/v/2/doc_id/16)的例子。
此功能自由度较高,根据需求灵活使用方法。

依赖的模块

若是使用zknightH5ScreenshotSaveImg()法,需使用trans模块

模块方法

zknightH5Screenshot(params, callback)

params : {
    screenshotModelId : 截取目标元素的ID
    imgType : 默认值image/png
    encoderOptions : 图片清晰度 0 - 1,默认0.92。当imgType为“image/jpeg,image/webp”时,此字段生效。
}

callback : 返回callback(imgData);(图片的base64)

zknightH5ScreenshotSaveImg(base64Img, callback)

说明:依赖trans模块,具体看trans模块使用方法。

base64Img : base64图片

callback : 返回callback(ret, err);(具体看trans模块返回信息)

快速使用

方法一

页面引入zknight_h5screenshot_common.js,调用zknightH5screenshotStartPrintBase64()。

    /**
     * 截图并输出base64
     */
    function zknightH5screenshotStartPrintBase64(){
        zknightH5Screenshot({
            screenshotModelId : 'screenshot_model',
            imgType : 'image/jpeg', 
            encoderOptions : 0.92
        }, function(ret){
            //返回的base64
            var img_base64 = ret;
//            console.log(JSON.stringify(img_base64));
            alert(JSON.stringify(img_base64));
        });
    }

方法二

        /**
     * 截图保存到本地
     */
    function zknightH5screenshotStartSaveLocal(){
        zknightH5Screenshot({
            screenshotModelId : 'screenshot_model',
            imgType : 'image/jpeg', 
            encoderOptions : 0.92
        }, function(ret){
            //返回的base64,并去除前缀
            var base64Img = ret.replace('data:image/jpeg;base64,', ''); 

            //保存到本地
            zknightH5ScreenshotSaveImg(base64Img, function(ret, err){
                if (ret.status) {
                    alert("保存成功");
                }    
            });

        });
    }

特别说明

android5.2及其以下版本不能使用。
若是使用的网络图片,建议把图片下载到本地再进行截图,防止IOS出现跨域问题,导致截图出现问题。
使用此代码建议使用同步方法去实现,异步易出现加载快慢问题,导致截图失败。
本模块使用了aui.css,若是使用zknightH5ScreenshotSaveImg()法,需使用trans模块,且依赖于apicloud运行环境。