如何使用带有离子电容器的 Watermarkjs 库？

编程问答 2022-05-15

问题描述

问题

嗨，我最近在 this guide 之后将一个离子cordova 项目迁移到离子电容器。

除了 Watermarkjs library 之外，我一切正常，我用它为 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（摘录）

{
  "$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 等）

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

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

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

androidandroidangularangularcapacitorionic-frameworkwatermark