HarmonyOS 鸿蒙Next 画布画出来的图片如何添加背景条水印

发布于 1周前 作者 yuanlaile 最后一次编辑是 5天前 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 画布画出来的图片如何添加背景条水印

官方示例代码添加水印的，保存图片添加水印，我的效果是，有个透明的背景条，背景条上加水印，这个背景条加不上，如何处理？

export function addWatermark(
  imagePixelMap: ImagePixelMap,
  text: string = ‘watermark’,
  drawWatermark?: (OffscreenContext: OffscreenCanvasRenderingContext2D) => void
): image.PixelMap {
  const height = px2vp(imagePixelMap.height);
  const width = px2vp(imagePixelMap.width);
  const offScreenCanvas = new OffscreenCanvas(width, height);
  const offScreenContext = offScreenCanvas.getContext(‘2d’);
  offScreenContext.drawImage(imagePixelMap.pixelMap, 0, 0, width, height);

  if (drawWatermark) {
    drawWatermark(offScreenContext);
  } else {
    offScreenContext.globalAlpha = 0.4;
    offScreenContext.fillStyle = “#80EE0077”
    offScreenContext.fillRect(0, 0, 200, 200)
    let imageData = offScreenCanvas.transferToImageBitmap()
    offScreenContext.transferFromImageBitmap(imageData)
    
}

Harmonyos Next教程
5 回复 
/** 添加水印 **/
static async addWatermark(context: Context, totalHeight: number,
  offCanvasCtx: OffscreenCanvasRenderingContext2D): Promise<OffscreenCanvasRenderingContext2D> {
  // TODO:知识点:通过canvas绘制水印
  const displayData = display.getDefaultDisplaySync();
  let watermark = await getContext(context).resourceManager.getMediaContent($r("app.media.xxx"))
  let arrayBuffers = watermark.buffer.slice(watermark.byteOffset, watermark.byteLength + watermark.byteOffset)
  let imageSources: image.ImageSource = image.createImageSource(arrayBuffers);
  const infos = await imageSources.getImageInfo()
  let logoHeight = px2vp(infos.size.height);
  let logoWidth = px2vp(infos.size.width);
  let heightNumber = totalHeight / logoHeight;
  let widthNumber = px2vp(displayData.width) / logoWidth;
  let allHeight = 0;
  let img: ImageBitmap = new ImageBitmap("./common/xxxxxxx.png");
  for (let i = 0; i < heightNumber; i++) {
    offCanvasCtx.drawImage(img, 0, allHeight);
    let allWidth = 0;
    for (let i = 0; i < widthNumber; i++) {
      offCanvasCtx.drawImage(img, allWidth, allHeight);
      allWidth += logoWidth;
    }
    allHeight += logoHeight;
  }
  return offCanvasCtx
}

刚好在做水印，你这个直接用就行了

// 调用： await SnapshotUtils.addWatermark(context, totalHeight, offCanvasCtx);

插眼

在HarmonyOS 鸿蒙Next中，若想在画布画出的图片上添加背景条水印，可以通过以下方式实现：

首先，使用Canvas组件绘制水印。通过CanvasRenderingContext2D对象设置水印的样式（如填充色、字体大小、文本对齐方式等），并利用fillText方法在画布上绘制水印文本。注意要计算好水印在画布上的布局，使其形成背景条效果。

其次，将绘制好水印的画布作为图片的背景。这可以通过将水印画布设置为图片的背景层，或者使用Stack层叠布局将水印画布放置在图片下方实现。

最后，确保水印不影响图片的主要内容显示和用户的交互体验。在设置水印时，可以调整水印的透明度、字体大小和布局方式等参数，以达到最佳效果。

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

回到顶部