教程 其他 框架 组件 接口

图片编辑 1000+

接口声明

{ "name": "system.image" }

导入模块

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

接口定义

image.getImageInfo(OBJECT)

获取图片信息

参数:

参数名类型必填说明
uriString图片地址,可以是数据文件或应用内的资源。如果是应用内资源,必须使用绝对路径
successFunction成功回调
failFunction失败回调
completeFunction执行结束后的回调
success 返回值:
参数名类型说明
uriString图片地址
widthInteger图片的宽度,单位为 px
heightInteger图片的高度,单位为 px
sizeLong图片的大小,单位为 Byte
fail 返回错误代码
错误码说明
202参数错误
300I/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)

压缩图片

参数:

参数名类型必填说明
uriString图片地址,可以是数据文件或应用内的资源。如果是应用内资源,必须使用绝对路径
qualityInteger图片的压缩质量,0-100 之间,默认是 75
ratioNumber尺寸压缩倍数,必须大于 0,尺寸会变为原图的 1/ratio 大小
formatString图片保存格式,支持 JPEG,PNG,WEBP 三种格式。默认使用 JPEG 格式
successFunction成功回调
failFunction失败回调
completeFunction执行结束后的回调
success 返回值:
参数名类型说明
uriString压缩后的图片地址
fail 返回错误代码
错误码说明
202参数错误
300I/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+

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

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

参数:

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

支持的编辑操作

  1. 图片裁剪
参数名类型必填说明
actionString必须是 crop
xNumber裁剪的起始点的 x 坐标,默认是 0
yNumber裁剪的起始点的 y 坐标,默认是 0
widthNumber裁剪的图片宽度
heightNumber裁剪的图片高度
  1. 图片缩放
参数名类型必填说明
actionString必须是 scale
scaleXNumber宽度的缩放比率,缩放后宽度会变成原图的 scaleX 倍。默认是 1
scaleYNumber高度的缩放比率,缩放后高度会变成原图的 scaleY 倍。默认是 1
  1. 图片旋转
参数名类型必填说明
actionString必须是 rotate
degreeNumber旋转的角度
success 返回值:
参数名类型说明
uriString生成的图片的地址
fail 返回错误代码
错误码说明
202参数错误
300I/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)

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

参数:

参数名类型必填说明
uriString图片地址,可以是数据文件或应用内的资源。如果是应用内资源,必须使用绝对路径
successFunction成功回调
failFunction失败回调
cancelFunction取消回调   
completeFunction执行结束后的回调
success 返回值:
参数名类型说明
uriString生成的图片的地址
fail 返回错误代码:
错误码说明
202参数错误
300I/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}`)
  }
})

条匹配 "" 的结果

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