애플릿 - 사진을 업로드 사진을 잘립니다

일부는 당신이 원하는 형태의 사진을 업로드 할 때 때때로 우리는 이러한 제품의 사진을 아바타를 업로드, 그것은 고정 된 폭과 죽음의 높이를 사진, 그는 고정하지 않을 경우 거의 열 다르지 보지 않는다, 변형 것 그들이 동일하지 않습니다 높은 넓은 것, 완전히 불편보기 흉한 찾습니다. 당신이 일치되도록 그래서 이러한 접근의 생각은, 자신이 원하는 이미지 크기의 크기로 절단 사진의 선택에 자르기 도구를 사용하여, 현실을 보자!

wxml :

< 뷰 클래스 = "wancll 패딩 15 wancll-BG 백색 wancll 폰트 크기 14" > 
  < 뷰 클래스 = "wancll 패딩 -1- -5- wancll 패딩-B-10" >商品图片: </ 뷰 > 
  < 뷰 클래스 = "comlist 화상은 플렉스 wancll 패딩-L-5" > 
    < 뷰 클래스 = '화상리스트' WX : 만약 = "{{imgs.length}}" WX : 대 = "{ imgs {}} " WX : 키 ="키 " > 
      < ZAN-배지 catchtap = 'deleltImage' 데이터 ID = '인덱스 {{}}> X </ ZAN-배지> 
      < 뷰 클래스 = '부가 영상' catchtap를 = 'previewImage' 데이터 ID = '{{인덱스}} " > 
        < 화상 클래스 ='최대 IMG ' SRC ="{{항목}} " 모드 ="aspectFill "  /> 
      </ 뷰 > 
    </ 뷰 > 
    < 뷰 클래스 = '부가 영상' catchtap = 'addImage를' > + </ 뷰 > 
  </ 뷰 > 
</ 뷰 >

wxss

.comlist 이미지 { 
  디스플레이 : 플렉스 ; 
  플렉스 랩 : 랩
 } 
.comlist 이미지 이미지입니다 목록 { 
  마진 오른쪽 : 20rpx ;
} 
.comlist 화상 .up-IMG { 
  폭 : 100rpx ; 
  높이 : 100rpx ;
} 
.comlist 화상 .add 이미지 { 
  폭 : 100rpx ; 
  높이 : 100rpx ; 
  패딩 : 10rpx ; 
  디스플레이 : 플렉스 ; 
  정당화-내용 : 센터 ; 
  정렬-항목 : 센터 ; 
  국경 : 1 픽셀의 고체 #ccc ; 
  경계 반경 : 5px ; 
  폰트 크기 : 50rpx ;
}

JS :

데이터 {imgs []}

  // 화상 추가 
  {)를 addImage (
     IF ( 이 본 .data.imgs.length> =. 5 ) {
      APP.util.toast는 ( '제품 이미지는 5 개 이상이 될 수 없습니다' )
       반환
    }
    wx.chooseImage ({
      수 : 1 ,
      SizeType이 : [ , '원본' '압축'], // 여부를 원본 또는 압축 된 관점을 지정할 수 있습니다, 두 개의 기본이있다 
      SOURCETYPE : [ '카메라', '앨범'], // 당신은 앨범 또는 카메라의 소스를 지정할 수 있습니다 모두 기본이 
      : 성공 기능을 {(RES)을
         // img 태그 디스플레이 사진의 src 속성으로, tempFilePath을 로컬 파일 경로 선택한 사진의 목록을 반환 
        var에 tempFilePaths의 =의 res.tempFilePaths;
        wx.navigateTo ({
          URL : "/ 페이지 / UploadImg / 인덱스 SRC =?"+ tempFilePaths
        });
      }
    });

  },
  // 이미지 미리보기 
  previewImage (전자) {
    ID하자 = APP.util.getDataSet (예, 'ID를' )
    wx.previewImage ({
      전류 : 이 [ID]를 .data.imgs
      : URL을 이 .data.imgs,
    })
  },
  // 미리보기 이미지 삭제 
  {deleltImage (전자)
    ID하자 = APP.util.getDataSet (예, 'ID를' )
    도착하자 = 이 .data.imgs을
    arr.splice (ID, 1 );
    이 .setData ({
      imgs : 도착
    })
  },

Uplo adImg.rar는 \ 페이지 폴더에 다운로드

weCropper.js 다운로드는 그냥 폴더가 도입 될 수 넣어

애플릿 - 사진을 업로드 사진을 잘립니다

추천