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

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

HarmonyOS 鸿蒙Next 使用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 鸿蒙Next 使用canvas 进行图片水印操作的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
2 回复

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

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
  }

更多关于HarmonyOS 鸿蒙Next 使用canvas 进行图片水印操作的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next系统中，使用canvas进行图片水印操作通常涉及以下步骤：

  1. 加载图片：首先，通过BitmapFactory加载需要添加水印的图片。

  2. 创建Canvas：获取该Bitmap的Canvas对象，以便在其上进行绘制操作。

  3. 绘制水印：使用Canvas的drawText方法或其他绘制方法，在指定位置添加水印文字或图标。可以设置水印的颜色、字体大小、旋转角度等属性。

  4. 保存图片：完成水印添加后，将修改后的Bitmap保存到指定路径或用于显示。

示例代码框架（伪代码）：

// 注意：此示例为伪代码，具体实现需根据HarmonyOS API调整
Bitmap originalBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.your_image);
Canvas canvas = new Canvas(originalBitmap);
Paint paint = new Paint();
paint.setColor(Color.RED);
paint.setTextSize(50);
canvas.drawText("Watermark", x, y, paint);
// 保存或显示修改后的Bitmap

在HarmonyOS中，具体API可能与Android有所不同，但核心思路相似。确保你使用的是HarmonyOS的Bitmap和Canvas类，以及相应的资源加载和保存方法。

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

回到顶部