HarmonyOS鸿蒙Next中多个PixelMap如何从上到下拼接为一个PixelMap

如何把多个PixelMap从上到下拼接为一个PixelMap,目的是把拼接后的PixelMap保存到相册里

10 回复

已解决,代码如下:

const headerPixelMap = await componentSnapshot.get('poster_header')
const contentPixelMap = await componentSnapshot.get('poster_content')
const footerPixelMap = await componentSnapshot.get('poster_footer')
if (headerPixelMap && contentPixelMap && footerPixelMap) {
  let pixelMaps: Array<PixelMap> = [headerPixelMap, contentPixelMap, footerPixelMap]
  let combinedOpts: image.InitializationOptions = {
    size: {
      width: headerPixelMap.getImageInfoSync().size.width,
      height: headerPixelMap.getImageInfoSync().size.height + contentPixelMap.getImageInfoSync().size.height +
      footerPixelMap.getImageInfoSync().size.height
    }
  }
  let combinedPixelMap: image.PixelMap = image.createPixelMapSync(combinedOpts)
  let y = 0
  for (let pixel of pixelMaps) {
    const width = pixel.getImageInfoSync().size.width
    const height = pixel.getImageInfoSync().size.height
    let buffer: ArrayBuffer = new ArrayBuffer(width * height * 4)
    pixel.readPixelsToBufferSync(buffer)
    buffer = ImageUtil.rgba2bgra(buffer)
    let area: image.PositionArea = {
      pixels: buffer,
      offset: 0,
      stride: width * 4,
      region: { size: { width: width, height: height }, x: 0, y: y }
    }
    combinedPixelMap.writePixelsSync(area)
    y += height
  }

  let helper = photoAccessHelper.getPhotoAccessHelper(getContext(this))
  helper.createAsset(photoAccessHelper.PhotoType.IMAGE, 'png', async (err, uri) => {
    let destFile = fs.openSync(uri, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE)
    ImageUtil.savePixelMap2Album(combinedPixelMap, destFile)
    promptAction.showToast({ message: '图片已保存至本地相册', bottom: 450 })
  })
} else {
  promptAction.showToast({ message: '图片保存失败', bottom: 450 })
}
/**
 * RGBA与BGRA编码互换
 * @param original
 * @returns
 */
static rgba2bgra(original: ArrayBuffer): ArrayBuffer {
  let length: number = original.byteLength
  let newBuffer: ArrayBuffer = new ArrayBuffer(length)
  let originalDataView = new DataView(original)
  let newDataView = new DataView(newBuffer)
  for (let i = 0; i < length; i += 4) {
    newDataView.setUint8(i, originalDataView.getUint8(i + 2))
    newDataView.setUint8(i + 1, originalDataView.getUint8(i + 1))
    newDataView.setUint8(i + 2, originalDataView.getUint8(i))
    newDataView.setUint8(i + 3, originalDataView.getUint8(i + 3))
  }
  return newDataView.buffer
}

更多关于HarmonyOS鸿蒙Next中多个PixelMap如何从上到下拼接为一个PixelMap的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


图片大一点 rgba2bgra 运行会变慢;有没有别的转码方式咧;

创建长图image.createPixelMapSync的时候传入pixelFormatimage.PixelMapFormat.BGRA_8888
读取沙盒小图片imageSource.createPixelMap的时候传入参数desiredPixelFormatimage.PixelMapFormat.BGRA_8888,
然后将小图pixelMap转成ArrayBuffer
然后将小图ArrayBuffer循环使用writePixelsSync写入长图pixelMap

长图和小图使用同一个PixelMapFormat可以确保保存后的图片不变色,

const pixelMap = await ImageUtils.getRawFilePixelMap(‘image/xxxx.png’); const ImageInfo = await pixelMap.getImageInfo() // 通过OffscreenCanvasRenderingContext2D绘制水印 const offScreenCanvas = new OffscreenCanvas(ImageInfo.size.width, ImageInfo.size.height); const offScreenContext: OffscreenCanvasRenderingContext2D = offScreenCanvas.getContext(‘2d’); const imageScale = offScreenCanvas.width / display.getDefaultDisplaySync().width;

offScreenContext.fillText(ImageData.issuingAuthority, 175, 212,350); offScreenContext.fillText(ImageData.validityTerm, 175, 247,350);

获取拼接后的内容: const backPixelMapRes: image.PixelMap = offScreenContext.getPixelMap(0, 0, offScreenCanvas.width, offScreenCanvas.height);

拿到拼接的pixelMap后使用fs模块保存到图片就可以了

ImageData从哪里来咧??

ImageData.validityTerm这里是文本参数,来源是我自己封装的方法传过来的数据对象,可以自己封装的,

找HarmonyOS工作还需要会Flutter的哦,有需要Flutter教程的可以学学大地老师的教程,很不错,B站免费学的哦:BV1S4411E7LY/?p=17

实现一个Canvas然后按照你的拼接逻辑,把PixelMap绘制上,然后用系统截图组件截图下?

在HarmonyOS鸿蒙Next中,可以通过PixelMapUtils类的mergePixelMaps方法将多个PixelMap从上到下拼接为一个PixelMap。首先,创建一个PixelMap数组,将需要拼接的PixelMap按顺序放入数组中。然后,调用mergePixelMaps方法,传入数组和拼接方向(如Direction.VERTICAL),即可生成拼接后的PixelMap。确保所有PixelMap的宽度一致,以避免拼接时出现异常。

回到顶部