H5Screenshot

功能描述

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

依赖的模块

  1. 若是使用zknightH5ScreenshotSaveImg()法，需使用trans模块

模块方法

zknightH5Screenshot(params, callback)

  1. params : {
  2.     screenshotModelId : 截取目标元素的ID
  3.     imgType : 默认值image/png
  4.     encoderOptions : 图片清晰度 0 - 1，默认0.92。当imgType为“image/jpeg，image/webp”时，此字段生效。
  5. }
  7. callback : 返回callback(imgData);(图片的base64)

zknightH5ScreenshotSaveImg(base64Img, callback)

说明：依赖trans模块，具体看trans模块使用方法。

base64Img : base64图片

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

快速使用

方法一

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

  1.     /**
  2.      * 截图并输出base64
  3.      */
  4.     function zknightH5screenshotStartPrintBase64(){
  5.         zknightH5Screenshot({
  6.             screenshotModelId : 'screenshot_model',
  7.             imgType : 'image/jpeg', 
  8.             encoderOptions : 0.92
  9.         }, function(ret){
  10.             //返回的base64
  11.             var img_base64 = ret;
  12. //            console.log(JSON.stringify(img_base64));
  13.             alert(JSON.stringify(img_base64));
  14.         });
  15.     }

方法二

  1.         /**
  2.      * 截图保存到本地
  3.      */
  4.     function zknightH5screenshotStartSaveLocal(){
  5.         zknightH5Screenshot({
  6.             screenshotModelId : 'screenshot_model',
  7.             imgType : 'image/jpeg', 
  8.             encoderOptions : 0.92
  9.         }, function(ret){
  10.             //返回的base64，并去除前缀
  11.             var base64Img = ret.replace('data:image/jpeg;base64,', ''); 
  13.             //保存到本地
  14.             zknightH5ScreenshotSaveImg(base64Img, function(ret, err){
  15.                 if (ret.status) {
  16.                     alert("保存成功");
  17.                 }    
  18.             });
  20.         });
  21.     }

特别说明

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