对图片增加水印经常在分享,版权保护等场景使用,在鸿蒙系统中提供了多种方,今天介绍直接对image.PixelMap对象增加水印的方法,是对原图进行的水印操作。代码如下

export function imagePixelMapAddWatermark(imagePixelMap: image.PixelMap, text: string): image.PixelMap {
  const imageInfo: image.ImageInfo = imagePixelMap.getImageInfoSync();
  const height = px2vp(imageInfo.size.height) as number;
  const width = px2vp(imageInfo.size.width) as number;
  const offScreenCanvas = new OffscreenCanvas(width, height);
  const offScreenContext = offScreenCanvas.getContext('2d');
  offScreenContext.drawImage(imagePixelMap, 0, 0, width, height);
  const displayWidth = display.getDefaultDisplaySync().width;
  const vpWidth = px2vp(displayWidth) ?? displayWidth;
  const imageScale = width / vpWidth;
  offScreenContext.textAlign = 'right';
  offScreenContext.fillStyle = '#A2000000'; // 改颜色
  // 改字体
  offScreenContext.font = 18 * imageScale + 'vp';
  const padding = 5 * imageScale;
  offScreenContext.fillText(text, width - padding, height - padding);
  return offScreenContext.getPixelMap(0, 0, width, height);
}

使用代码示例

// imagePixelMap 是原图
let addedWatermarkPixelMap = imagePixelMapAddWatermark(imagePixelMap,"水印");