使用 ng2-img-max 调整图像大小时出错

Question

我安装了 ng2-img-max 用于调整图像大小。我希望上传的每张图片都调整为预定义的宽度和长度。我看到大多数人在使用 angular 2/4 进行开发时使用 ng2-img-max。我尝试使用该库，然后遇到以下错误：

调整精确填充错误：

{resizedFile: File, reason: TypeError: Cannot read property 'resizeCanvas' of undefined

at http://localhost:4200/vendor.bund…, error: "PICA_ERROR"}

我尝试调试并在 Ng2PicaService.prototype.resizeCanvas (ng2-pica.service.js) 处看到以下语句之后：

var curPica = pica;
if (!curPica || !curPica.resizeCanvas) {
    curPica = window.pica;
}

我得到的 curPica 等于未定义。所以，我想这就是为什么我得到上面提到的错误。

我一直在研究解决该问题的方法，但没有成功。我需要那个库，因为我不想在我的休息服务中这样做。有人可以帮我吗？我花了很多时间试图弄清楚该怎么做，但是，也许是因为我对 angular 4 有点陌生，我找不到解决方案。我也没有发现任何人面临同样的问题。请帮我！怎么回事！

这是我的 package.json:

{
    "name": "myapp",
    "version": "1.0.0",
    "license": "MIT",
    "scripts": {
        "ng": "ng",
        "start": "ng serve",
        "build": "ng build",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e"
    },
    "private": true,
    "dependencies": {
        "@agm/core": "^1.0.0-beta.1",
        "@angular/animations": "^4.0.0",
        "@angular/common": "^4.0.0",
        "@angular/compiler": "^4.0.0",
        "@angular/core": "^4.0.0",
        "@angular/forms": "^4.0.0",
        "@angular/http": "^4.0.0",
        "@angular/platform-browser": "^4.0.0",
        "@angular/platform-browser-dynamic": "^4.0.0",
        "@angular/router": "^4.0.0",
        "@types/jquery": "^3.2.13",
        "blueimp-canvas-to-blob": "^3.14.0",
        "bootstrap": "^3.3.7",
        "core-js": "^2.4.1",
        "jquery": "^3.2.1",
        "ng2-file-upload": "^1.2.1",
        "ng2-img-max": "^2.1.5",
        "ng2-img-tools": "^1.0.5",
        "ng2-pica": "^1.0.8",
        "pica": "^4.0.0",
        "rxjs": "^5.1.0",
        "zone.js": "^0.8.4"
    },
    "devDependencies": {
        "@angular/cli": "^1.4.3",
        "@angular/compiler-cli": "^4.0.0",
        "@angular/language-service": "^4.0.0",
        "@types/jasmine": "2.5.45",
        "@types/node": "~6.0.60",
        "codelyzer": "~3.0.1",
        "jasmine-core": "~2.6.2",
        "jasmine-spec-reporter": "~4.1.0",
        "karma": "~1.7.0",
        "karma-chrome-launcher": "~2.1.1",
        "karma-cli": "~1.0.1",
        "karma-coverage-istanbul-reporter": "^1.2.1",
        "karma-jasmine": "~1.1.0",
        "karma-jasmine-html-reporter": "^0.2.2",
        "protractor": "~5.1.2",
        "ts-node": "~3.0.4",
        "tslint": "~5.3.2",
        "typescript": "~2.3.3"
    }
}

Answer 1

你应该：npm install pica 或 yarn add pica 然后：

import * as Pica from 'pica/dist/pica';
// this is the direct function of ng2-img-max using pica, you recreate it
resize(fileTarget) {
    let pica = Pica({ features: [ 'js', 'wasm', 'ww', 'cib' ] }); 

    let imageTarget = new Image();
    imageTarget.onload = (image) => {
        let currentWidth = imageTarget.naturalWidth  || imageTarget.width;
        let currentHeight = imageTarget.naturalHeight || imageTarget.height; 
        let newWidth = currentWidth;
        let newHeight = currentHeight;
        if (newWidth > this.maxWidth) {
            newWidth = this.maxWidth
            //resize height proportionally
            let ratio = this.maxWidth / currentWidth; //is gonna be <1
            newHeight = newHeight * ratio;
        }
        currentHeight = newHeight;
        if (newHeight > this.maxHeight) {
            newHeight = this.maxHeight;
            //resize width proportionally
            let ratio = this.maxHeight / currentHeight; //is gonna be <1
            newWidth = newWidth * ratio;
        }
        if(newHeight===currentHeight && newWidth === currentWidth){// no need to resize, upload now
            this.utilityLoading = false; 
            this.uploadImage(fileTarget); // this is your functions to upload after you reisze
        }
        else{
            // To canvas
            let toCanvas: HTMLCanvasElement = document.createElement('canvas');
            toCanvas.width = newWidth;
            toCanvas.height = newHeight;
            pica.resize(imageTarget, toCanvas)
            .then(result => pica.toBlob(result, 'image/jpeg', 90))
            .then((blob:Blob) => {
                this.utilityLoading = false;
                let file:any = blob;
                file.name = fileTarget.name;
                this.uploadImage(<File>file) // this is your functions to upload after you reisze
            })
            .catch(error => {
                this.utilityLoading = false;
                console.error('resizing error:' + error.message ,error);
            })
        }

    }

那么你可以这样使用：

// Compressing then resize:
this.ng2ImgMaxService.compressImage(fileTarget, this.maxSize, true)
.subscribe( 
   result => {
   this.resize(result);
   },
   err => {
   console.error('error when compressed',err)
   this.uploadImage(err.compressedFile)
      }
  )

如果你想要一个新的库来方便你，我会写，但让我知道

使用 ng2-img-max 调整图像大小时出错

Error resizing image with ng2-img-max

javascript

resize

image

angular