图片编辑 1000+

接口声明

{"name": "system.image"}

导入模块

import image from '@system.image'const image = require('@system.image')

接口定义

image.getImageInfo(OBJECT)

获取图片信息

参数:

参数名 类型 必填 说明
uri String 图片地址,可以是数据文件或应用内的资源。如果是应用内资源,必须使用绝对路径
success Function 成功回调
fail Function 失败回调
complete Function 执行结束后的回调
success返回值:
参数名 类型 说明
uri String 图片地址
width Integer 图片的宽度,单位为px
height Integer 图片的高度,单位为px
size Long 图片的大小,单位为Byte
fail返回错误代码
错误码 说明
202 参数错误
300 I/O错误
301 文件路径不存在

示例:

image.getImageInfo({
  uri: 'internal://tmp/abc.jpg',
  success: function (data) {
    console.log(`handling success: size = ${data.size}`)
  },
  fail: function (data, code) {
    console.log(`handling fail, code = ${code}`)
  }
})

image.compressImage(OBJECT)

压缩图片

参数:

参数名 类型 必填 说明
uri String 图片地址,可以是数据文件或应用内的资源。如果是应用内资源,必须使用绝对路径
quality Integer 图片的压缩质量,0-100之间,默认是75
ratio Number 尺寸压缩倍数,必须大于0,尺寸会变为原图的1/ratio大小
format String 图片保存格式,支持JPEG,PNG,WEBP三种格式。默认使用JPEG格式
success Function 成功回调
fail Function 失败回调
complete Function 执行结束后的回调
success返回值:
参数名 类型 说明
uri String 压缩后的图片地址
fail返回错误代码
错误码 说明
202 参数错误
300 I/O错误
301 文件路径不存在

示例:

image.compressImage({
  uri: 'internal://tmp/abc.jpg',
  quality: 80,
  radio: 2, // 变为原图的1/2大小
  format: 'JPEG',
  success: function (data) {
    console.log(data.uri)
  },
  fail: function (data, code) {
    console.log(`handling fail, code = ${code}`)
  }
})

image.applyOperations(OBJECT) 1000+

对图片按顺序执行编辑操作。

在顺序执行编辑操作列表中的操作时,上一步操作生成的结果会作为下一步操作的输入,坐标系也是以上一步操作生成的结果的左上角为坐标原点重新确定的。

参数:

参数名 类型 必填 说明
uri String 图片地址,可以是数据文件或应用内的资源。如果是应用内资源,必须使用绝对路径
operations ObjectArray 编辑操作列表,按照先后顺序执行。如果未提供,则不会执行编辑操作,仅重新保存图片
quality Integer 图片的压缩质量,0-100之间,默认是75
format String 图片保存格式,支持JPEG,PNG,WEBP三种格式。默认使用JPEG格式
success Function 成功回调
fail Function 失败回调
complete Function 执行结束后的回调

支持的编辑操作

1) 图片裁剪

参数名 类型 必填 说明
action String 必须是crop
x Number 裁剪的起始点的x坐标,默认是0
y Number 裁剪的起始点的y坐标,默认是0
width Number 裁剪的图片宽度
height Number 裁剪的图片高度

2) 图片缩放

参数名 类型 必填 说明
action String 必须是scale
scaleX Number 宽度的缩放比率,缩放后宽度会变成原图的scaleX倍。默认是1
scaleY Number 高度的缩放比率,缩放后高度会变成原图的scaleY倍。默认是1

3) 图片旋转

参数名 类型 必填 说明
action String 必须是rotate
degree Number 旋转的角度
success返回值:
参数名 类型 说明
uri String 生成的图片的地址
fail返回错误代码
错误码 说明
202 参数错误
300 I/O错误
301 文件路径不存在

示例:

image.applyOperations({
  uri: 'internal://cache/123.png',
  operations: [
    {
      action: 'scale',
      scaleX: 0.5,
      scaleY: 0.5
    },
    {
      action: 'crop',
      width: 200,
      height: 200
    },
    {
      action: 'rotate',
      degree: 90,
    }
  ],
  quality: 90,
  format: 'webp',
  success: function (data) {
    console.log(`handling success: ${data.uri}`)
  },
  fail: function (data, code) {
    console.log(`handling fail, code = ${code}`)
  }
})

image.editImage(OBJECT)

打开编辑器来编辑图片。目前支持选择图片范围并裁剪。

参数:

参数名 类型 必填 说明
uri String 图片地址,可以是数据文件或应用内的资源。如果是应用内资源,必须使用绝对路径
success Function 成功回调
fail Function 失败回调
cancel Function 取消回调   
complete Function 执行结束后的回调
success返回值:
参数名 类型 说明
uri String 生成的图片的地址
fail返回错误代码:
错误码 说明
202 参数错误
300 I/O错误
301 文件路径不存在

示例:

image.editImage({
  uri: 'internal://cache/123.png',
  success: function (data) {
    console.log(`handling success: ${data.uri}`)
  },
  cancel: function () {
    console.log('handling cancel')
  },
  fail: function (data, code) {
    console.log(`handling fail, code = ${code}`)
  }
})

条匹配 "" 的结果

    没有搜索到与 "" 相关的内容