如何将Watermarkjs库与离子电容器一起使用？

Question

问题

嗨，我最近按照本指南将离子科尔多瓦项目迁移到离子电容器。

除了 Watermarkjs 库之外，一切都正常工作，我用它来为用 Android 设备的相机拍摄的照片添加水印。

该库在迁移之前工作正常，但现在每次我使用该库中定义的函数时，我都会在 Logcat 中收到此日志：

Capacitor: Handling local request: http://localhost/9j/4AAQSkZJRgABAQAAAQABAAD

函数似乎没有被正确调用。

代码

async takePicture(fieldId){
    const image = await Camera.getPhoto({
      quality:20,
      allowEditing:false,
      resultType: CameraResultType.Base64,
      source: CameraSource.Prompt
    });
  
    let finalImage = await this.addTextWatermark(image.base64String);  //problem begins here
    
    console.log("Image with watermark, " finalImage); // this is never printed out in logcat
  }

// Function that adds a watermark 
// reference: http://brianium.github.io/watermarkjs/text.html
addTextWatermark(base64String){
    let result = await watermark([base64String])
        .dataUrl(watermark.text.lowerLeft( 'Watermark text', '48px Josefin Slab', '#ffffff', 0.9) )
        .then( image  => {
          return image;
        }).catch(error => {
          return "error";
        })
    return result;
}

我尝试过...

• 在

  angular.json

  scripts部分添加watermarkjs脚本并运行

  npx cap copy

  ，如此StackOverflow问题
中所建议

angular.json

（摘录）

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "defaultProject": "app",
  "newProjectRoot": "projects",
  "projects": {
    "app": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "www",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": [
              {
                "glob": "**/*",
                "input": "src/assets",
                "output": "assets"
              },
              {
                "glob": "**/*.svg",
                "input": "node_modules/ionicons/dist/ionicons/svg",
                "output": "./svg"
              }
            ],
            "styles": [
              {
                "input": "src/theme/variables.scss"
              },
              {
                "input": "src/global.scss"
              }
            ],
            "scripts": [
              "./node_modules/watermarkjs/dist/watermark.js"  <----- Added script here
            ]
          } ...

• 为

  watermark()

  功能使用不同的输入类型。 （文件、blob 等）

我认为问题与未正确导入函数有关。

如果库与离子电容器不兼容...

有人知道这个问题的解决方法吗？

Answer 1

让originalImage = 'data:image/jpeg;base64,' + imageData.base64String;

让finalImage =等待this.addTextWatermark(originalImage);