htmltoImage

功能描述

页面内容生成图片，用例见 htmltoImage.html

demo文件请在ApiCloud环境测试，若要在浏览器测试把api部分和页面加载的远程图片注释掉即可。

概述

本模块依赖于于html2Canvas.js，在html2Canvas项目基础上优化了要生成图片的区域，包含本地图片和远程图片无法加载的部分问题。

依赖的模块

./libs/html2Canvas.js ./libs/htmltoImage.js

快速使用

将指定部分内容生成image对象或者base64 htmltoImage.init({params}, callback(res));

params

el

• 类型：object
• 默认值：body
• 描述：要生成图片的区域dom isImageObject
• 类型：布尔值
• 默认值：false

• 描述：要生成图片的区域dom

  callback(res, err)

  res：

• 类型：JSON对象

• 内部字段：

  {
    ret: 1  // int类型，1生成成功
    msg: '', // 生成结果信息，成功
    base64str: '',  // 字符串类型 生成的base64图片字符串
    imageObject：'' // object类型，生成的图片image对象，可直接显示在页面
  }

  err：

• 类型：JSON对象

• 内部字段：

  {
    ret: 0  // int类型，0生成失败
    msg: '', // 生成结果信息，失败
  }

  base64字符串前缀截取

  要将生成的base64图片保存到手机里，需要截取base64字符串的前缀 htmltoImage.cutprefixBase64(base64Str);

  base64Str

  base64Str

• 类型：字符串类型
• 描述：图片的base64字符串

拓展使用

使用 trans 模块将生成的图片保存到系统相册

htmltoImage.init({
    'el': document.getElementById('main'),
    'isImageObject': true,
}, function(res, err){
    if(res) {
        alert(JSON.stringify(res));
        var base64Str1 = htmltoImage.cutprefixBase64(res.base64str);
        var trans = api.require('trans');
        trans.saveImage({
            base64Str: base64Str1,
            album: true,
            imgName: new Date().getTime() + ".png"
        }, function(ret, err) {
            if (ret.status) {
                alert(JSON.stringify(ret));
            } else {
                alert(JSON.stringify(err));
            }
        });
    } else {
        alert(JSON.stringify(err));
    }
})

将生成的图片对象显示到页面

htmltoImage.init({
    'el': document.getElementById('main'),
    'isImageObject': true,
}, function(res, err){
    if(res) {
        alert(JSON.stringify(res));
        document.getElementById("main").append(ret.imageObject);
    } else {
        alert(JSON.stringify(err));
    }
})