Nhảy tới nội dung

image-cropper

Image Cropper là component cho phép crop ảnh theo tỉ lệ mong muốn.

Quét mã để trải nghiệm​

Xem code mẫu trên Tini Studio

Demo​

Trải nghiệm thử với trình giả lập bên dưới

Thuộc tính​

Thuộc tínhKiểu dữ liệuGiá trị mặc địnhMô tả
srcstringĐường dẫn cục bộ tới hình ảnh muốn crop
aspectRatiostring1:1Tỷ lệ crop ảnh mong muốn, format {w}:{h}. Ví dụ 1:1, 4:3
classNamestringThêm class cho component
idstringid của component. Dùng jsapi createCropperContext(id) để reference tới cropper
onSaveevent(e:Object) => voidCallback khi việc crop hình hoàn thành.

Sample Code​

Lưu ý

JavaScript code dưới đây được sử dụng cho tất cả các component demo, không phải là best practice.

Sử dụng image cropper ở txml

<image-cropper id="cropper-1" class="cropper" src={{imagePath}} aspectRatio={{ratio}} onSave="onCropperFinish" />

Thực hiện việc crop hình

const cropper = my.createCropperContext('cropper-1');
cropper.save();

Callback cho việc crop thành công.

onCropperFinish(e) {
    my.previewImage({
      urls: [e.uri],
      enablesavephoto: false,
      enableShowPhotoDownload: false,
      success: (res) => {
        console.log('success', res);
      },
      fail: (err) => {
        console.log('fail', err);
      },
    });
  },
}

Sample hoàn chỉnh

Page({
  data: {
    imagePath: undefined,
    ratio: '1:1'
  },
  onLoad() {
    my.chooseImage({
      count: 1,
      success: (res) => {
        this.setData({
          imagePath: res.filePaths[0]
        });
      },
      fail: (e) => {
        console.log(e);
      }
    });
  },
  onChangeRatio(e) {
    const ratio = e.target.dataset.ratio;
    this.setData({
      ratio
    });
  },
  onSave(e) {
    const cropper = my.createCropperContext('cropper-1');
    cropper.save();
  },

  onCropperFinish(e) {
    my.previewImage({
      urls: [e.uri],
      enablesavephoto: false,
      enableShowPhotoDownload: false,
      success: (res) => {
        console.log('success', res);
      },
      fail: (err) => {
        console.log('fail', err);
      }
    });
  },
  onChangePhoto() {
    my.chooseImage({
      count: 1,
      success: (res) => {
        this.setData({
          imagePath: res.filePaths[0]
        });
      },
      fail: (e) => {
        console.log(e);
      }
    });
  }
});
  <view class="page-container">
  <image-cropper id="cropper-1" class="cropper" src={{imagePath}} aspectRatio={{ratio}} onSave="onCropperFinish" />
  <view class="cropper-footer">
    <view class="cropper-footer-ratio">
      <image class="ratio-icon" mode="center" src="/images/ratio_34.png" onTap="onChangeRatio" data-ratio="3:4"></image>
      <image class="ratio-icon" mode="center" src="/images/ratio_11.png" onTap="onChangeRatio" data-ratio="1:1"></image>
      <image class="ratio-icon" mode="center" src="/images/ratio_43.png" onTap="onChangeRatio" data-ratio="4:3"></image>
    </view>
    <tu-button class="save-button" shape="pill" type="solid" onTap="onChangePhoto">Album</tu-button>
    <tu-button class="save-button" shape="pill" type="solid" onTap="onSave">Save</tu-button>
  </view>
</view>

Kết quả​

modal