微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决如何使用带有离子电容器的 Watermarkjs 库?

问题

嗨,我最近在 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 举报,一经查实,本站将立刻删除。