photoClip

功能描述

图片裁剪保存,用例见 photoClip.html

依赖的插件

./libs/iscroll-zoom.js
./libs/hammer.min.js
./libs/lrz.all.bundle.js
./libs/PhotoClip.js

快速使用

选择本地图片(相机/图库)

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) {
                api.alert({msg: JSON.stringify(ret)});
            } else {
                api.alert({msg: JSON.stringify(err)});
            }
        });
    } else {
        api.alert({msg: 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 {
        api.alert({msg: JSON.stringify(err)});
    }
})
是否仍需要帮助? 请保持联络!
最后更新于 2024/05/29