Question

我已经安装了ng2-img-max来调整图像大小。我希望上传的每个图像都可以调整大小到预定义的宽度和长度。我发现大多数人在使用角度2/4进行开发时会使用ng2-img-max。我试着玩那个lib然后我遇到了以下错误：

调整精确填充错误：

{resizedFile：文件，原因：TypeError：无法读取未定义的属性'resizeCanvas'

在http://localhost:4200/vendor.bund ...，错误：“PICA_ERROR”}

我尝试调试并在以下语句之后在Ng2PicaService.prototype.resizeCanvas（ng2-pica.service.js）中看到它：

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

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

我一直在研究没有成功解决这个问题。我需要lib，因为我不想在我的休息服务中这样做。有人能帮助我吗？我花了很多时间试图弄清楚该怎么做但是，也许是因为我对棱角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)
      }
  )

如果你想要一个方便的新lib，我会写它但是让我知道

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

1 个答案: