tgideas / motion

Motion is a javascript library based on Zepto for mobile
http://tgideas.github.io/motion
449 stars 112 forks source link

对比ImageEditor与croppie、cropper等图片裁剪库API设计问题 #36

Open luxiaowu opened 7 years ago

luxiaowu commented 7 years ago

实现固定大小的图片裁剪

怎么让裁剪框不动,拖动图片(可放大缩小,最小不小过裁剪框) 我看croppie和cropper的API上都很清楚,区分裁剪框和容器

croppie

var vanilla = new Croppie(el, {
  viewport: {
    width: 300,
    height: 300
  },
  boundary: {
    width: 300,
    height: 300
  },
  showZoomer: false,
  // enableExif: true,
  enableOrientation: true
});
vanilla.bind({
  url: objectURL,
  orientation: 6
});
vanilla.result({
  type: 'blob',
  size: {
    width: 300,
    height: 300
  },
  // format: 'jpeg',
  // quality: 0.8
}).then(function (blob) {
  // do something with cropped blob
});

cropper

$(element).cropper({
  // width: 300,
  // height: 300,
  viewMode: 3,
  dragMode: 'move',
  autoCropArea: 1,
  restore: false,
  guides: false,
  highlight: false,
  cropBoxMovable: false,
  cropBoxResizable: false,
  aspectRatio: 1,
})

求使用 motionImageEditor的代码示例