HarmonyOS 是否有提供从相册选择照片,然后绘制水印的示例

HarmonyOS
1天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zbw_apple

参考示例如下:

import measure from '@ohos.measure';

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
  @State show: boolean = false
  @State watermarkColor: string = '#ff0000';
  @State waterTextSize: number = 14;
  @State watermarkText: string = '这是一条水印'

  build() {
    Stack() {
      Column() {
        Text(this.message)
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
          .margin({ bottom: 10 })
          .textAlign(TextAlign.Center)
          .width('100%')
        Row() {
          Button("颜色1")
            .fontSize(11)
            .onClick(() => {
              this.watermarkColor = '#00ff00'
            })
          Button("颜色2")
            .fontSize(11)
            .onClick(() => {
              this.watermarkColor = '#0000ff'
            })
        }
      }

      MiniWatermark({
        waterText: this.watermarkText,
        waterTextSize: this.waterTextSize,
        waterTextColor: this.watermarkColor
      })
    }

  }
}


@Component
export struct MiniWatermark {
  private settings: RenderingContextSettings = new RenderingContextSettings(true);
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
  private settings2: RenderingContextSettings = new RenderingContextSettings(true);
  private context2: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings2);
  @Prop @Watch('clearAndDraw') waterText: string;
  @Prop @Watch('clearAndDraw') waterTextSize: number;
  @Prop @Watch('clearAndDraw') waterTextColor: string;
  @State image: string = '';
  @State realWidth: number = 0;
  @State realHeight: number = 0;

  aboutToAppear() {
    this.initWH();
  }

  clearAndDraw() {
    this.initWH();
    this.drawText();
    this.drawWaterMark();
  }

  private initWH() {
    const textWidth = measure.measureText({
      textContent: this.waterText,
      fontSize: `${this.waterTextSize}fp`
    });
    this.realWidth = textWidth + vp2px(20);
    const textHeight = textWidth * 0.6;
    this.realHeight = textHeight + vp2px(20);
  }

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Stack() {
        Canvas(this.context2)
          .width(this.realWidth + 'px')
          .height(this.realHeight + 'px')
          .backgroundColor(Color.Green)
          .onReady(() => {
            this.context2.rotate(30 * Math.PI / 180);
            this.drawText();
          })
          .visibility(Visibility.Visible)

        Canvas(this.context)
          .width('100%')
          .height('100%')
          .backgroundColor(Color.Transparent)
          .onReady(() => {
            this.drawWaterMark();
          })
          .visibility(Visibility.Visible)
      }
      .width('100%')
      .height('100%')
      .hitTestBehavior(HitTestMode.Transparent)
    }.hitTestBehavior(HitTestMode.Transparent)
  }

  private drawWaterMark() {
    this.context.clearRect(0, 0, 6000, 6000);
    // 绘制填充类文本
    const img: ImageBitmap = new ImageBitmap(this.image);
    const pattern = this.context.createPattern(img, 'repeat');
    if (pattern) {
      this.context.fillStyle = pattern;
    }
    this.context.fillRect(0, 0, 6000, 6000);
    this.context.restore();
  }

  private drawText() {
    this.context2.rotate(-30 * Math.PI / 180);
    this.context2.clearRect(0, 0, 6000, 6000);
    this.context2.rotate(30 * Math.PI / 180);
    this.context2.font = `${fp2px(this.waterTextSize)}px`;
    this.context2.fillStyle = this.waterTextColor;
    this.context2.fillText(this.waterText, 10, 10);
    this.context2.restore();
    this.image = this.context2.toDataURL();
  }

  private drawColor() {
    this.context2.fillStyle = this.waterTextColor;
    this.context2.clearRect(0, 0, 6000, 6000);
    this.context2.rotate(30 * Math.PI / 180);
    this.context2.font = `${fp2px(this.waterTextSize)}px`;
    this.context2.fillStyle = this.waterTextColor;
    this.context2.fillText(this.waterText, 10, 10);
    this.context2.restore();
    this.image = this.context2.toDataURL();
  }
}
分享
微博
QQ
微信
回复
1天前
相关问题
HarmonyOS 是否区号选择示例
29浏览 • 1回复 待解决
HarmonyOS 关于相册选择图片上传
42浏览 • 1回复 待解决
HarmonyOS 绘制水印如何实现?
247浏览 • 1回复 待解决
HarmonyOS 删除相册某一照片
29浏览 • 1回复 待解决
HarmonyOS 是否提供Wifi通信API
30浏览 • 1回复 待解决
HarmonyOS 是否个人信息页示例
27浏览 • 1回复 待解决
HarmonyOS 是否提供倾斜属性
53浏览 • 1回复 待解决
HarmonyOS是否官方提供加锁方法
321浏览 • 1回复 待解决