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运行环境。
是否仍需要帮助？ 请保持联络！
最后更新于 2024/11/18