HarmonyOS 鸿蒙Next图片拼接如何实现

发布于 1周前 作者 yibo5220 来自 鸿蒙OS

HarmonyOS 鸿蒙Next图片拼接如何实现 需求, 截屏时在截屏图片底部自动拼接应用的二维码以及描述文字的图片;

我用的是 componentSnapshot 组件截图;

尝试过的方案: 在截图时在对应 id 的容器内部用 if 控制显示二维码的图片, 截图完毕再隐藏掉 ; 然而没有效果, 截图还是 没有拼接的样子 ;

function build() {
  Column({ space: 25 }) {
    Column() {
      Image($r('app.media.icon')).width(150).aspectRatio(1)
      if (this.flag) {
        Image($r('app.media.icon')).width(150).aspectRatio(1)
      }
    }.id('img')

    Image(this.pixelImage).width(150).border({ width: 1 })

    Button('分享')
      .padding(25)
      .onClick(() => {
        this.shardData()
      })
  }.width('100%').height('100%')
  .justifyContent(FlexAlign.Center)
}

function shardData() {
  this.flag = true
  componentSnapshot.get('img', (err, pixmap: image.PixelMap) => {
    this.pixelImage = pixmap
    this.flag = false
  })
}

更多关于HarmonyOS 鸿蒙Next图片拼接如何实现的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
3 回复

class JoinPicture { /**

  • RGBA与BGRA编码互换，前后统一编码后，就不需要转换了
  • @param data
  • @returns */ rgba2BGRA(data: ArrayBuffer): ArrayBuffer { let length: number = data.byteLength; let tempBuffer: ArrayBuffer = new ArrayBuffer(length); let rgbaData = new DataView(data); let bgraData = new DataView(tempBuffer); for (let i = 0; i < length; i += 4) { bgraData.setUint8(i, rgbaData.getUint8(i + 2)); bgraData.setUint8(i + 1, rgbaData.getUint8(i + 1)); bgraData.setUint8(i + 2, rgbaData.getUint8(i)); bgraData.setUint8(i + 3, rgbaData.getUint8(i + 3)); } return bgraData.buffer }

// 这里是横向排列拼接，且每张小图的高度一致，可以根据需要修改这部分逻辑 async join(picturePaths: Array<string>, joinPath: string, callback: Function) { try { if (picturePaths.length < 2) { console.info(‘PictureJoinTogether 需要拼接的图片数量不足’) return; } const tempPath = picturePaths[0]; const imageSource = image.createImageSource(tempPath); const imageInfo = await imageSource.getImageInfo(); const singleWidth = imageInfo.size.width; const singleHeight = imageInfo.size.height;

  const combineOpts: image.InitializationOptions = {
    alphaType: 0,
    editable: true,
    // 注意上下格式统一
    pixelFormat: image.PixelMapFormat.BGRA_8888,
    size: { width: singleWidth * picturePaths.length, height: singleHeight }
  }
  const singleOpts: image.DecodingOptions = {
    editable: true,
    desiredPixelFormat: image.PixelMapFormat.BGRA_8888,
    desiredSize: { width: singleWidth, height: singleHeight }
  };
  const combineColor = new ArrayBuffer(combineOpts.size.width * combineOpts.size.height * 4);
  let singleColor = new ArrayBuffer(singleOpts.desiredSize!.width * singleOpts.desiredSize!.height * 4);
  const newPixelMap = await image.createPixelMap(combineColor, combineOpts);
  for (let x = 0; x < picturePaths.length; x++) {
    //读取小图
    //图片应用沙箱路径
    let singlePath = picturePaths[x];
    let imageSource = image.createImageSource(singlePath);
    const singlePixelMap = await imageSource.createPixelMap(singleOpts);
    await singlePixelMap.readPixelsToBuffer(singleColor);
    //写入大图
    let area: image.PositionArea = {
      pixels: singleColor,
      offset: 0,
      stride: singleWidth * 4,
      region: {
        size: { height: singleHeight, width: singleWidth },
        x: singleWidth * x,
        y: 0
      }
    }
    await newPixelMap.writePixels(area);
  }
  let combinePixelMap = newPixelMap;
  //保存大图
  const saveResult = await this.save(combinePixelMap, joinPath)
  saveResult && callback();
} catch (err) {
  console.error('PictureJoinTogether join error: ' + JSON.stringify(err))
}

}

async save(pixelMap: image.PixelMap | undefined, path: string) { if (pixelMap === undefined) { return false; } const imagePackerApi: image.ImagePacker = image.createImagePacker(); let packOpts: image.PackingOption = { format: “image/jpeg”, quality: 100 }; const packingArrayBuffer = await imagePackerApi.packing(pixelMap, packOpts); console.info(‘packing succeeded.’); let file = fs.openSync(path, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE); fs.writeSync(file.fd, packingArrayBuffer, { offset: 0 }) fs.closeSync(file.fd) return true } }

可以试一下这种方式来拼接图片

更多关于HarmonyOS 鸿蒙Next图片拼接如何实现的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


好的, 感谢 我试试,

在HarmonyOS（鸿蒙）系统中实现图片拼接，可以利用鸿蒙提供的图形处理API或者利用Canvas进行绘制。以下是一个简要的实现思路：

  1. 加载图片：首先，通过鸿蒙的媒体库或者资源文件加载需要拼接的图片。这通常涉及到Bitmap类或者相应的图片加载API。

  2. 创建画布：创建一个足够大的Canvas对象，该对象的大小应足以容纳所有要拼接的图片。Canvas对象提供了绘制图形和图像的方法。

  3. 绘制图片：利用Canvas的drawBitmap方法，将需要拼接的图片按顺序绘制到Canvas上。可以通过设置不同的起始坐标来控制图片在Canvas上的位置。

  4. 保存结果：绘制完成后，可以将Canvas的内容保存为一个新的Bitmap对象，这个Bitmap对象就是拼接后的图片。

  5. 显示或保存：最后，可以将拼接后的图片显示在界面上，或者保存到设备的存储中。

示例代码（伪代码）：

// 假设已经加载了图片bitmap1, bitmap2
Bitmap resultBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(resultBitmap);
canvas.drawBitmap(bitmap1, 0, 0, null);
canvas.drawBitmap(bitmap2, bitmap1.getWidth(), 0, null);
// resultBitmap即为拼接后的图片

注意：上述代码为示意性伪代码，具体实现需根据鸿蒙API进行调整。

如果问题依旧没法解决请联系官网客服, 官网地址是 https://www.itying.com/category-93-b0.html，

回到顶部