cropperjs的高度过大(container height too much)

cropperjs的高度过大(container height too much)

标签(空格分隔): JavaScript


业务需要web头像裁切,用canvas写了个demo卡成一匹马,于是就去寻找现成的,发现了cropperjs这个lib,4k star。

在ionic项目中使用时(不打包app),发现高度总是远高于图片显示高度,查找Issues作者只是说给图片加最大宽度100%,这里需要注意,width: 100%的同时还必须给图片一个父容器,直接在ion-content下是没有作用的。

<ion-content>
  <input type="file" (change)="selectFile($event)">

  <div class="img-contaier">
    <img [src]="src" alt="图片 1" height="auto" width="100%" #img>
  </div>
  <img [src]="previewSrc" alt="图片 2" #preview>
  <button ion-button (click)="imgCropper()">cropper</button>
</ion-content>

import...

declare const Cropper;

@Component...

export class HomePage {
  public previewSrc: string;
  public cropper: any;
  public src: string;

  @ViewChild('img') img: ElementRef;
  @ViewChild('preview') preview: ElementRef;

  constructor(
    public navCtrl: NavController
  ) { }

  file2Base64(e) {
    const f = e;

    return new Promise((resolve, reject) => {
      if (f) {
        const reader = new FileReader();
        reader.onload = (file => function(_e) {
          resolve({ result: this.result, file: e});
        })(f);
        reader.readAsDataURL(f);
        return;
      }

      reject(`Get none files.`);
    });
  }

  selectFile(e) {
    const file = e.target.files[0];
    if (file) {
      this.file2Base64(file).then((data: any) => {
        this.src = data.result;
        if (this.cropper) this.cropper.destroy();
        this.img.nativeElement.onload = e => {
          this.cropperInit(e);
        }
      });
    }
  }

  cropperInit(e) {
    console.log(e);
    const image = e.target;
    this.cropper = new Cropper(image, {
      viewMode: 1,
      aspectRatio: 1 / 1,
      background: false
    });
  }

  imgCropper() {
    const str = this.cropper.getCroppedCanvas().toDataURL();
    this.previewSrc = str;
  }
}

图片 3

本文介绍了AngularJs4的图片剪裁组件,下面我来记录一下,有需要了解AngularJs4的图片剪裁组件的朋友可参考。希望此文章对各位有所帮助。

jQuery里有一个强大的图片剪裁插件,叫cropper.js。这是大神的GitHub地址:https://github.com/fengyuanchen/cropper

首先想在全是ts文件的angular里运用jquery的js代码插件,这时候需要一个东西,他叫桥接文件。npm是一个强大的库,已经有前人在里面封装了cropper以及所有你能想到想不到的插件,你需要做的只是安装上就好了。需要在webstorm的Terminal里敲npm install cropperJs 这样在node_modules文件夹里就会出现cropperjs的文件。有一个@types的文件夹,里面放着你需要用到相对应js插件的ts桥接文件。在Terminal里敲npm install @types/cropperjs

忘了说 在@types下有一个叫index.d.ts的文件,里面有示例:https://github.com/DefinitelyTyped/DefinitelyTyped,在types下搜cropper,有个文件cropperjs-tests.ts,就能看到一个例子,长这样:

import * as Cropper from 'cropperjs';var image = document.getElementById;var cropper = new Cropper(image, { aspectRatio: 16 / 9, crop: function { console.log; console.log; console.log; console.log; console.log; console.log; console.log;

接下来就可以写代码啦啦啦啦~~

创建一个component

import {Component, Input, AfterViewInit, ViewEncapsulation} from '@angular/core';import * as Cropper from 'cropperjs';@Component({ selector: 'cropper', templateUrl: './cropper.component.html', styleUrls: ['./cropper.component.less'], encapsulation: ViewEncapsulation.None})

本文由金沙官网线上发布于Web前端,转载请注明出处:cropperjs的高度过大(container height too much)

您可能还会对下面的文章感兴趣: