快速知悉

1. skyline 相关更新 详情
2. xr-frame 详情
3. 图片裁剪接口 wx.cropImage 详情
4. 图片提取文字接口 详情
5. 人脸关键点检测 详情
6. wx.compressImage 支持按尺寸压缩 详情
7. wx.getRendererUserAgent 详情

1.skyline 相关更新

1. 新增 darkmode 支持 详情
2. 新增 API 新增图片提取文字接口 详情
3. 新增 span 组件，用于图片与文本内联布局 
4. 新增 scroll-view reverse 属性，支持反向滚动 详情
5. 新增 CSS 支持 first-child / last-child 伪类 详情
6. 新增 scale 手势回调返回更多信息
7. 新增 background-image 支持混合图片和渐变
8. 新增 API 新增 wx.getSkylineInfo 详情
9. 更新 框架 插件支持打开半屏小程序接口 详情
10. 更新 API InnerAudioContext 支持可写 currentTime 详情
11. 更新 框架 root-portal 支持 fixed 和 relative 切换 详情
12.  新增 API 支持图片裁剪接口 wx.cropImage 详情
13. 更新 组件 video 组件支持 preferredPeakBitRate 属性 详情
14. 更新 API wx.compressImage 支持按尺寸压缩 详情
15. 更新 API 小游戏支持动态设置横竖屏接口 wx.setDeviceOrientation 详情

点击查看 更新日志 官方文档

2.xr-frame组件 详情

使用介绍：xr-frame 是一套小程序官方提供的 XR/3D 应用解决方案，高性能、效果好、易用、强扩展、渐进式、遵循小程序开发标准。

2.1 xr-frame特性

• 比起目前的 Canvas 组件，xr-frame有以下显著的优势：
• 提供xml的方式来描述 3D 场景，并集成了 AR、物理、动画、粒子、后处理等等系统，上手简单，符合小程序开发规范。
• 内置完整的 PBR 效果、环境光照、阴影，原生支持 glTF 资源，提供的 xr-frame-cli 可以快速通过全景图生成环境数据。
• 混合方案，渲染性能逼近原生，xr-frame-cli 可以对外部 glTF 文件进行优化，来提高加载性能，还有完善的缓存机制保证二次进入的加载性能。
• 扩展性强，从资源到组件元素，皆可以由高阶用户自己定制，未来还可以暴露内部的渲染管线定制能力。

示例代码：

<xr-scene>
  <xr-assets>
    <!-- 加载一个 GLTF 模型 -->
    <xr-asset-load type="gltf" asset-id="gltf-model" src="..." />
  </xr-assets>
  <xr-env env-data="..." />

  <xr-node>
    <!-- 将一个 GLTF 模型渲染在 AR 场景中 -->
    <xr-ar-tracker ...>
      <xr-gltf model="gltf-model" ...></xr-gltf>
    </xr-ar-tracker>
    <xr-camera is-ar-camera ...></xr-camera>
  </xr-node>
  
  <xr-node>
    <!-- 场景光照 -->
    <xr-light type="ambient" ... />
    <xr-light type="directional" ... />
  </xr-node>
</xr-scene>

示例：

上面的例子只是一部分简略代码，我们提供了丰富的示例并开源在xr-frame-demo，可以直接扫码体验：

点击查看  xr-frame 官方文档

3.图片裁剪接口 wx.cropImage 详情

使用介绍：裁剪图片接口。

示例代码：

wx.cropImage({
  src: '', // 图片路径
  cropScale: '16:9', // 裁剪比例
})

点击查看 wx.cropImage 官方文档

4.图片提取文字接口 详情

使用介绍：VisionKit 从基础库 2.27.0 版本开始提供 OCR 能力。应用场景示例：1.文本检测、2.车牌识别、3.证件文本识别。

方法定义：OCR 检测有2种使用方法，一种是输入一张静态图片进行检测，另一种是通过摄像头实时检测。

4.1 静态图片检测

使用介绍：通过 VKSession.runOCR 接口 输入一张图像，算法检测到图像中的文字，然后通过 VKSession.on 接口 输出获取的文字内容。

示例代码：

const session = wx.createVKSession({
  track: {
    OCR: { mode: 2 } // mode: 1 - 使用摄像头；2 - 手动传入图像
  },
})

// 静态图片检测模式下，每调一次 runOCR 接口就会触发一次 updateAnchors 事件
session.on('updateAnchors', anchors => {
  console.log('anchors.text', "".concat(anchors.map(anchor=>anchor.text)))
})

// 需要调用一次 start 以启动
session.start(errno => {
  if (errno) {
    // 如果失败，将返回 errno
  } else {
    // 否则，返回null，表示成功
    session.runOCR({
      frameBuffer, // 图片 ArrayBuffer 数据。待检测图像的像素点数据，每四项表示一个像素点的 RGBA
      width, // 图像宽度
      height, // 图像高度
    })
  }
})

4.2 通过摄像头实时检测

使用介绍：算法实时检测相机中的文字内容，通过 VKSession.on 接口 实时输出文字。

示例代码：

const session = wx.createVKSession({
  track: {
    OCR: { mode: 1 } // mode: 1 - 使用摄像头；2 - 手动传入图像
  },
})

// 摄像头实时检测模式下，监测到文字时，updateAnchors 事件会连续触发 （每帧触发一次）
session.on('updateAnchors', anchors => {
  console.log('anchors.text',"".concat(anchors.map(anchor=>anchor.text)))
})

// 当文字区域从相机中离开时，会触发 removeAnchors 事件
session.on('removeAnchors', () => {
  console.log('removeAnchors')
})

// 需要调用一次 start 以启动
session.start(errno => {
  if (errno) {
    // 如果失败，将返回 errno
  } else {
    // 否则，返回null，表示成功
  }
})

点击查看 OCR检测 官方文档

5.人脸关键点检测 详情

使用介绍：VisionKit 从基础库 2.25.0 版本 (安卓微信>=8.0.25，iOS微信>=8.0.24) 开始提供人脸关键点检测，作为与 marker 能力和 OSD 能力 平行的能力接口。

方法定义：人脸关键点检测有2种使用方法，一种是输入一张静态图片进行检测，另一种是通过摄像头实时检测。

4.1 静态图片检测

使用介绍：通过 VKSession.detectFace 接口 输入一张图像，算法检测到图像中的人脸，然后通过 VKSession.on 接口 输出人脸位置坐标、106个关键点坐标以及人脸在三维坐标系中的旋转角度。

示例代码：

const session = wx.createVKSession({
  track: {
    face: { mode: 2 } // mode: 1 - 使用摄像头；2 - 手动传入图像
  },
})
// 静态图片检测模式下，每调一次 detectFace 接口就会触发一次 updateAnchors 事件
session.on('updateAnchors', anchors => {
  anchors.forEach(anchor => {
    console.log('anchor.points', anchor.points)
    console.log('anchor.origin', anchor.origin)
    console.log('anchor.size', anchor.size)
    console.log('anchor.angle', anchor.angle)
  })
})

// 需要调用一次 start 以启动
session.start(errno => {
  if (errno) {
    // 如果失败，将返回 errno
  } else {
    // 否则，返回null，表示成功
    session.detectFace({
      frameBuffer, // 图片 ArrayBuffer 数据。人脸图像像素点数据，每四项表示一个像素点的 RGBA
      width, // 图像宽度
      height, // 图像高度
      scoreThreshold: 0.5, // 评分阈值
      sourceType: 1,
      modelMode: 1,
    })
  }
})

5.2 通过摄像头实时检测

使用介绍：算法实时检测相机中的人脸，通过 VKSession.on 接口 实时输出人脸位置坐标、106个关键点坐标以及人脸在三维坐标系中的旋转角度。

示例代码：

const session = wx.createVKSession({
  track: {
    face: { mode: 1 } // mode: 1 - 使用摄像头；2 - 手动传入图像
  },
})

// 摄像头实时检测模式下，监测到人脸时，updateAnchors 事件会连续触发 （每帧触发一次）
session.on('updateAnchors', anchors => {
  anchors.forEach(anchor => {
    console.log('anchor.points', anchor.points)
    console.log('anchor.origin', anchor.origin)
    console.log('anchor.size', anchor.size)
    console.log('anchor.angle', anchor.angle)
  })
})

// 当人脸从相机中离开时，会触发 removeAnchors 事件
session.on('removeAnchors', () => {
  console.log('removeAnchors')
})

// 需要调用一次 start 以启动
session.start(errno => {
  if (errno) {
    // 如果失败，将返回 errno
  } else {
    // 否则，返回null，表示成功
  }
})

点击查看 人脸关键点检测 官方文档

6.wx.compressImage 支持按尺寸压缩 详情

使用介绍：压缩图片接口，可选压缩质量。

代码示例：

wx.compressImage({
  src: '', // 图片路径
  quality: 80, // 压缩质量
  compressedWidth:80, //压缩图片的宽度
  compressedWidth:80, //压缩图片的高度
})

点击查看 wx.compressImage 官方文档

7.wx.getRendererUserAgent 详情

使用介绍：获取 Webview 小程序的 UserAgent。

示例代码：

wx.getRendererUserAgent().then(userAgent => console.log(userAgent))

点击查看 wx.getRendererUserAgent 官方文档