FNImageClip

论坛示例

为帮助用户更好更快的使用原生插件,论坛维护了一个示例,示例中包含示例代码、知识点讲解、注意事项等,供您参考。

概述

FNImageClip 原生插件封装了图片裁剪功能。该原生插件是 imageClip 原生插件的优化版。

open

打开图片裁剪

open({params}, callback(ret, err))

params

rect:

  • 类型:JSON 类型
  • 描述:(可选项)原生插件的位置及尺寸
  • 内部字段:
{
    x: 0,                              //(可选项)数字类型;原生插件左上角的 x 坐标(相对于所属的 Window 或 Frame);默认值:0
    y: 0,                              //(可选项)数字类型;原生插件左上角的 y 坐标(相对于所属的 Window 或 Frame);默认值:0
    w: 320,                            //(可选项)数字类型;原生插件的宽度;默认值:所属的 Window 或 Frame 的宽度
    h: 480                             //(可选项)数字类型;原生插件的高度;默认值:所属的 Window 或 Frame 的高度
}

srcPath:

  • 类型:字符串类型
  • 描述:源图片路径,要求本地路径(fs://、widget://)

highDefinition:

  • 类型:布尔
  • 描述:(可选项)截图时是否截取与原图分辨率一致的图
  • 默认:false

isMinWidth:

  • 类型:布尔
  • 描述:(可选项)是否开启裁剪框不限制最小宽度
  • 默认:false

isMinHeight:

  • 类型:布尔
  • 描述:(可选项)是否开启裁剪框不限制最小高度
  • 默认:false

isHideGrid:

  • 类型:布尔
  • 描述:(可选项)是否隐藏中间横竖网格线
  • 默认:false

style:

  • 类型:JSON 类型
  • 描述:图片裁剪的样式设置
  • 内部字段:
{
    mask: '#888',                      //(可选项)字符串类型;图片裁剪控件遮罩层背景,支持 rgb,rgba,#;默认:#888
    clip: {                         
        w: 100,                        //(可选项)数字类型;裁剪区域的宽度,当 appearance 为 circular 时,w 为半径;默认:rect.w / 2
        h: 100,                        //(可选项)数字类型;裁剪区域的高度,当 appearance 为 circular 时,h 无效;默认:w
        x: 50,                         //(可选项)数字类型;裁剪区域左侧相对于裁剪控件左侧的距离;默认:(rect.w - w) / 2
        y: 50,                         //(可选项)数字类型;裁剪区域顶部相对于裁剪控件顶部的距离;默认:(rect.h - h) / 2
        borderColor: '#0f0',           //(可选项)字符串类型;裁剪区域边线颜色,支持 rgb,rgba,#;默认:透明
        borderWidth: 1,                //(可选项)数字类型;裁剪区域边线;默认:0
        appearance: 'circular',        //(可选项)字符串类型;裁剪区域的形状,支持 circular | rectangle;默认:rectangle
    }
}

mode:

  • 类型:字符串类型
  • 描述:(可选项)裁剪模式
  • 默认:all
  • 取值范围:
    • clip:裁剪框可移动或缩放,图片固定位置和大小,当 appearance 值为 circular 时,无法改变大小
    • image:图片可以移动或缩放,裁剪框固定位置和大小
    • all:裁剪框可移动或缩放,图片可移动或缩放,该模式下用户的放大操作只对图片有效,裁剪框只能通过拖动改变大小,当 appearance 值为 circular 时,无法改变大小

fixedOn:

  • 类型:字符串类型
  • 描述:(可选项)原生插件视图添加到指定 frame 的名字(只指 frame,传 window 无效)
  • 默认:原生插件依附于当前 window

callback(ret, err)

ret:

  • 类型:JSON 对象
  • 内部字段:
{
    status:		//布尔类型;操作成功状态值,true|false 
}

示例代码

var FNImageClip = api.require('FNImageClip');
FNImageClip.open({
    rect: {
        x: 0,
        y: 0,
        w: api.winWidth,
        h: api.winHeight
    },
    srcPath: 'fs://imageClip/image.png',
    style: {
        mask: '#888',
        clip: {
            w: 100,
            h: 100,
            x: 50,
            y: 50,
            borderColor: '#0f0',
            borderWidth: 1,
            appearance: 'rectangle'
        }
    },
    fixedOn: api.frameName
}, function(ret, err) {
    if (ret) {
        api.alert({
            msg: JSON.stringify(ret)
        })
    } else {
        api.alert({
            msg: JSON.stringify(err)
        })
    }
});

补充说明

FNImageClip 同时只能运行一个实例,当重复调用 open 时,会将已存在的 FNImageClip 实例弹出到当前窗口的最上层

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

save

保存截图

save({params}, callback(ret, err))

params

destPath:

  • 类型:字符串类型
  • 描述:保存图片路径,要求本地路径(fs://)

copyToAlbum:

  • 类型:布尔类型
  • 描述:(可选项)是否将结果同时保存到系统相册
  • 默认:false

quality:

  • 类型:数字类型
  • 描述:(可选项)保存图片的质量,取值范围 0 - 1,【注】只针对jpg格式图片有效
  • 默认:1

callback(ret, err)

ret:

  • 类型:JSON 对象
  • 内部字段:
{
    destPath:           //字符串类型;图片保存到指定路径后的绝对路径,若保存失败则为该参数为 undefined
    albumPath:          //字符串类型;图片保存到相册后的绝对路径,若保存失败则该参数为 undefined
}

示例代码

var FNImageClip = api.require('FNImageClip');
FNImageClip.save({
    destPath: 'fs://imageClip/result.png',
    copyToAlbum: false,
    quality: 1
}, function(ret, err) {
    if (ret) {
        api.alert({
            msg: JSON.stringify(ret)
        })
    } else {
        api.alert({
            msg: JSON.stringify(err)
        })
    }
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

close

关闭截图器

close()

示例代码

var FNImageClip = api.require('FNImageClip');
FNImageClip.close();

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

reset

重置裁剪区域,恢复到初始打开时的状态

reset()

示例代码

var FNImageClip = api.require('FNImageClip');
FNImageClip.reset();

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

论坛示例

为帮助用户更好更快的使用原生插件,论坛维护了一个示例,示例中包含示例代码、知识点讲解、注意事项等,供您参考。

是否仍需要帮助? 请保持联络!
最后更新于 2024/10/10