cropperjs的高度过大(container

2019-08-14 10:35| 发布者: |

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

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

 ion-content 
 input type="file" ="selectFile" 
 div 
 img [src]="src" alt="" height="auto" width="100%" #img 
 /div 
 img [src]="previewSrc" alt="" #preview 
 button ion-button ="imgCropper" cropper /button 
 /ion-content 
import...
declare 九卅娱乐官方网站网址const Cropper;
@Component...
export class HomePage {
 public previewSrc: string;
 public cropper: any;
 public src: string;
 @ViewChild img: ElementRef;
 @ViewChild preview: ElementRef;
 constructor { }
 file2Base64 {
 const f = e;
 return new Promise = {
 if  {
 const reader = new FileReader;
 reader.onload =  {
 resolve;
 });
 reader.readAsDataURL;
 return;
 reject;
 selectFile {
 const file = e.target.files[0];
 if  {
 this.file2Base64.then = {
 this.src = data.result;
 if  this.cropper.destroy;
 this.img.nativeElement.onload = e = {
 this.cropperInit;
 cropperInit {
 console.log;
 const image = e.target;
 this.cropper = new Cropper {
 const str = this.cropper.getCroppedCanvas.toDataURL;
 this.previewSrc = str;
}
<
>
关于我们
AB模版网成立于2014年,我们是一家专注用户体验设计开发与互联网品牌建设的设计公司,创立至今为2000多位客户提供了创新与专业的设计方案。设计服务范围包括:交互原型设计、产品视觉设计、网站设计与开发建设、移动及软件产品界面设计、图标设计、品牌及平面设计等。

联系我们

13588889999服务时间:9:00-18:00)

admin@adminbuy.cn

官方微信官方微信

部门热线

前   台:13588889999
业务部:13588889999
客服部:13588889999
技术部:13566667777
人事部:13566667777

咨询电话13588889999 返回顶部
返回顶部