首页 > 其他分享 >【解决方案】HarmonyOS图片添加水印

【解决方案】HarmonyOS图片添加水印

时间:2024-08-18 12:27:34浏览次数:12  
标签:string width 解决方案 waterStr 水印 HarmonyOS pixelMap let 图片

 实现思路:从相册中算选择图片,将图片展示到UI界面,利用核心方法drawImage将要添加的水印画到图片上,然后将图片保存。

1、从相册中选取图片,添加水印,并返回添加水印后的图片保存路径

async pickerAcvtor(waterStr: string[]) {
    // 实例化选择参数对象
    const options = new picker.PhotoSelectOptions()
    options.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE
    options.maxSelectNumber = 1

    // 实例化选择器对象
    const pickerView = new picker.PhotoViewPicker()
    let res = await pickerView.select(options)


    // 判断用户取消了选择图片,则组织下面代码的继续运行
    if (res.photoUris.length === 0) {
      promptAction.showToast({ message: "用户取消图片选择" })
      return
    }
    //  准备好图片的完整路径
    let ext = 'jpg'
    let fileName = Date.now().toString()
    let cacheDir = getContext().cacheDir
    let fullPath = cacheDir + '/' + fileName + '.' + ext
    //  利用fileIo拷贝图片
    let file = fileIo.openSync(res.photoUris[0], fileIo.OpenMode.READ_ONLY)
    fileIo.copyFileSync(file.fd, fullPath)
    this.imgPath = fullPath

    addWaterMarkManager.addWaterImage(this.imgPath, waterStr, this.fillColor)
      .then((pixelMap?: image.PixelMap) => {
        if (pixelMap) {
          this.pixelMap = pixelMap;
        }
      })
    return this.imgPath
  }

2、addWaterImage方法类型的封装

class AddWaterMarkManager {
  private pixelMap?: image.PixelMap = undefined;
  private TAG: string = 'imageEdit';
  // 设置水印文字显示比例
  private scale = 12.0 / 375;

  /**
   * 获取加水印图片pixelMap
   *
   * @param imageSource ImageSource 图片描述
   * @param waterStr 水印数组
   * @param imageWidth 显示控件宽度默认50
   * @returns
   */
  public async addWaterImage(imgPath: string, waterStr: string[], fillColor: string): Promise<image.PixelMap> {
    //waterstr最后的数据渲染到页面最上边
    let newStr = this.waterStrSort(waterStr)
    let imgResource = image.createImageSource(imgPath)
    // 获取图片信息
    const imageInfo = imgResource.getImageInfoSync();
    const pixelMap = await imgResource.createPixelMap({
      editable: true
    });

    let returnPixelMap = this.getPixelMap(imageInfo, pixelMap, newStr, fillColor)
    return returnPixelMap
    // return imgPath
  }

  /**
   * 获取加水印图片pixelMap
   *
   * @param imageSource ImageSource 图片描述
   * @param waterStr 水印数组
   * @param imageWidth 显示控件宽度默认50
   * @returns
   */
  public async addWaterpixelMap(pixelMap: PixelMap, waterStr: string[], fillColor: string): Promise<image.PixelMap> {
    //waterstr最后的数据渲染到页面最上边
    let newStr = this.waterStrSort(waterStr)

    // 获取图片信息
    const imageInfo = pixelMap.getImageInfoSync();

    let returnPixelMap = this.getPixelMap(imageInfo, pixelMap, newStr, fillColor)
    return returnPixelMap
  }

  private waterStrSort(strlist: string[]) {
    let newList: string[] = []
    for (let index = 0; index < strlist.length; index++) {
      newList.push(strlist[strlist.length - index-1])
    }
    return newList
  }

  private getPixelMap(imageInfo: image.ImageInfo, pixelMap: image.PixelMap, newStr: string[], fillColor: string) {
    // 这个回调的pixelMap就是当前图片的pixelMap
    let offScreenCanvas = new OffscreenCanvas(imageInfo.size.width, imageInfo.size.height)
    let OffScreenContext = offScreenCanvas.getContext("2d")
    OffScreenContext.drawImage(pixelMap, 0, 0, offScreenCanvas.width, offScreenCanvas.height)
    pixelMap.release();

    // 判断水印内容是否为空
    if (newStr != undefined && newStr.length > 0) {
      let resultString = newStr.join("\n");
      // 设置字体大小
      OffScreenContext.fillStyle = fillColor
      OffScreenContext.font = this.scale * imageInfo.size.width + "vp";
      OffScreenContext.textAlign = 'right';
      OffScreenContext.textBaseline = 'bottom';
      OffScreenContext.fillText(resultString, offScreenCanvas.width - 150, offScreenCanvas.height - 100)
    }
    // 获取新的PixelMap
    return OffScreenContext.getPixelMap(0, 0, offScreenCanvas.width, offScreenCanvas.height)
  }

  /**
   * 获取加水印图片pixelMap
   *
   * @param fd 文件id
   * @param waterStr 水印数组
   * @param imageWidth 显示控件宽度默认50
   * @returns
   */
  private async getFdWaterPixelMap(fd: number, waterStr: string[], fillColor: string) {
    const imageSourceApi = image.createImageSource(fd);
    if (!imageSourceApi) {
      console.log(this.TAG, 'imageSourceAPI created failed!');
    }
    // 获取图片信息
    const imageInfo = imageSourceApi.getImageInfoSync();
    const pixelMap = await imageSourceApi.createPixelMap({
      editable: true
    });

    let returnPixelMap = this.getPixelMap(imageInfo, pixelMap, waterStr, fillColor)
    return returnPixelMap
  }
}

const addWaterMarkManager = new AddWaterMarkManager()

export { addWaterMarkManager }

3、UI界面渲染

  build() {
    Scroll() {
      Column({ space: 20 }) {
        this.titleBuilder()

        Image(this.pixelMap)
          .objectFit(ImageFit.Contain)
          .width('100%')
          .layoutWeight(1)
          .borderRadius($r('app.float.tab_bar_item_font_size'))
        Blank().layoutWeight(1)

      }
      .width('100%')
      .align(Alignment.Bottom)
      .backgroundColor(Color.Black)
      .padding({
        top: this.topBar,
        right: 10,
        left: 10,
        bottom: 20
      })
    }
    .height('150%')
    .width('100%')
  }

  @Builder
  titleBuilder() {
    Row() {
      Image($r('app.media.ic_left_row'))
        .width($r('app.float.common_font20vp'))
        .aspectRatio(1)
        .fillColor(Color.White)
        .onClick(() => {
          router.back();
        });

      Text('选取图片').fontColor(Color.White)
        .fontSize($r('app.float.common_font14'))
        .onClick(async () => {
          let waterImgPath = await this.pickerAcvtor(this.strings)
          AlertDialog.show({ message: `返回图片路径:${waterImgPath}` });
        });

      Text('完成').fontColor(Color.White)
        .fontSize($r('app.float.common_font14'))
        .onClick(() => {
          AlertDialog.show({ message: `返回图片路径:${this.imgPath}` });
        });
    }
    .width('100%')
    .justifyContent(FlexAlign.SpaceAround)
    .padding({ right: $r('app.float.tab_bar_item_icon_size'), left: $r('app.float.tab_bar_item_icon_size') })
  }

标签:string,width,解决方案,waterStr,水印,HarmonyOS,pixelMap,let,图片
From: https://blog.csdn.net/xp1870069025/article/details/141297956

相关文章

  • 【解决方案】harmonyOS 图片压缩
    图片压缩在应用开发中是一个非常常见的需求,特别是在处理用户上传图片时,需要上传指定大小以内的图片。目前图片压缩支持jpeg、webp、png格式。本例中以jpeg图片为例介绍如何通过packing和scale实现图片压缩到目标大小以内使用说明进入页面,输入图片压缩目标大小,点击“图片压缩......
  • HarmonyOS 层叠布局:(Stack)打造灵活多变的UI界面
    在应用开发中,布局设计是用户体验的关键之一。而在HarmonyOS中,层叠布局(Stack)是一种极为灵活的布局方式。它允许我们在同一个区域内放置多个组件,并根据需求将它们叠加起来,形成丰富的视觉效果。无论是广告展示还是卡片叠加效果,层叠布局都能轻松胜任。今天,我将带大家深入了解Stack......
  • electron-forge通过Squirrel.Windows打包导致的asar文件过大的解决方案
    环境我的Eectron环境如下:"@electron-forge/cli":"^7.1.0","@electron-forge/maker-deb":"^7.1.0","@electron-forge/maker-rpm":"^7.1.0","@electron-forge/maker-squirrel":"^7.1.0",&q......
  • 数字孪生智慧工地解决方案
    1.行业背景与挑战建筑行业面临材料成本高、施工管理问题、环境污染、劳资纠纷和安全隐患等挑战。智慧工地的发展趋势需要集成统一管理、高效协同工作以及自动化和智能化。2.政策引导与新技术推动国家政策如《建筑业信息化发展纲要》和雄安新区管理办法强调了BIM和CIM技术......
  • 生鲜商城购物系统解决方案毕设毕业设计.web期末作业设计网页.css网页成品参考
     博主介绍:黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者,CSDN博客专家,在线教育专家,CSDN钻石讲师;专注大学生毕业设计教育和辅导。所有项目都配有从入门到精通的基础知识视频课程,学习后应对毕业设计答辩。项目配有对应开发文档、开题报告、任务书、P......
  • LookupError: Resource averaged_perceptron_tagger not found.解决方案
      大家好,我是爱编程的喵喵。双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学......
  • 安装git-format-staged后,Sourcetree中提交代码报错的解决方案
    pre-commit文件中内容为:git-format-staged--formatter"swiftformatstdin--stdinpath'{}'""*.swift" 在终端中,gitcommit不会报错。Sourcetree中提交具体错误:git-format-staged或者swiftformat命令找不到。解决方案一:利用Automator(自动操作)新建一个SourceTree应......
  • 2024新型数字政府综合解决方案(一)
    新型数字政府综合解决方案通过整合先进的数字技术和智能化系统,构建了一个高效、透明且响应迅速的政府服务平台,能够实现跨部门数据共享和实时信息更新。该解决方案包括智能数据分析、大数据平台和云计算服务,旨在提升政府决策的科学性和行政管理的效能。通过在线服务和自动化流程......
  • Clion控制台中文输出/报错信息乱码的最完美解决方案(无需更改注册表,beta版UTF-8)
    Clion控制台中文输出/报错信息乱码的最完美解决方案(无需更改注册表,beta版UTF-8)1.问题:clion控制台乱码2.错误解决方案:Ctrl+Shift+Alt+/,回车,打开注册表,取消勾选"run.processes.with.pty"(clion可能会卡死)3.正确方式:1.Ctrl+Alt+S打开设置2.找到编辑器Editor-文件编码Fil......
  • Git 命令大全:详细讲解与常见问题解决方案
    目录1.Git基础命令2.分支管理命令3.远程仓库管理命令4.标签管理命令5.其他常用命令6.总结Git是目前最流行的分布式版本控制系统,它使得团队协作和代码管理变得更加高效。本文将详细介绍Git的常用命令及其应用场景,并针对可能遇到的问题提供解决方案。1.Git......