HarmonyOS 使用canvas进行图片水印操作

1.封装个图片水印方法，供H5使用。此方法中未使用 canvas 组件去做水印操作。而是使用 OffscreenCanvasRenderingContext2D 对象创建，进行图片水印操作。

2.其中需求为，将拍照/相册选中图片作为底图，在此底图的基础上，加上文字水印。

3.文字水印没问题。

4.底图绘制绘制不出来，曾经使用 ImageBitmap 和 PixelMap ，但是都无法将底图绘制上去，最终输出的canvas 转成 base64 为【data:image/png】

示例代码：

// localUrl 为唤起 拍照/相册选中的 图片地址( file://media/Photo/366/IMG_1723107392_351/IMG_20240808_165452.jpg )
// 尝试将 图片转成 ImageBitmap 对象
let imgBitmap :ImageBitmap = new ImageBitmap(localUrl)
let settings: RenderingContextSettings = new RenderingContextSettings(true)
let imageWidthVp = 300
let imageHeightVp = 400

let offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(imageWidthVp, imageHeightVp, settings)

offContext.fillStyle = 'rgb(0,0,255)'
offContext.fillRect(0, 0, imageWidthVp, imageHeightVp)
// 将相册/拍照中获取的图片作为底图。
offContext.drawImage(imgBitmap, 0, 0, imageWidthVp, imageHeightVp, 0, 0, imageWidthVp, imageHeightVp)

// 将canvas 转成 base64 
let base64Str = offContext.toDataURL()
console.log('offContext toDataURL：' + offContext.toDataURL())

HarmonyOS

aquaa

2天前

浏览

回答 1

待解决

回答 1

按赞同

按时间

zbw_apple

可以参考如下方法，this.imageSize是图片的像素，this.screenWidth是屏幕的宽度像素，waterPostion是水印对应的坐标位置。waterPixelMap是水印view的组件截图，水印view可以拖动，然后根据位置生成最后的图片

async addTextWaterMask(pixelMap: image.PixelMap,waterPixelMap:image.PixelMap,waterPostion:Position)  {

  let imageScale = this.imageSize.height / this.screenWidth
  let settings: RenderingContextSettings = new RenderingContextSettings(true)
  let offCanvas: OffscreenCanvas = new OffscreenCanvas(this.imageSize.height, this.imageSize.width)
  let offContext = offCanvas.getContext("2d", settings)
  offContext.drawImage(pixelMap, 0, 0, offCanvas.width, offCanvas.height)
  offContext.drawImage(waterPixelMap, vp2px(waterPostion.x*imageScale), vp2px(waterPostion.y*imageScale), vp2px(120*imageScale), vp2px(90*imageScale))
  // 获取新的PixelMap,
  let pixelMapRet = offContext.getPixelMap(0, 0, offCanvas.width, offCanvas.height)
  return pixelMapRet
}

2天前

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS 使用canvas进行图片水印操作

订阅鸿蒙技术特刊，精选内容抢先看