image cropper
1.0.0
1.功能强大。2.性能超高超流畅，大图毫无卡顿感。3.组件化，使用简单。4.点击中间窗口实时查看裁剪结果。 "usingComponents" : {
"image-cropper" : " ../image-cropper/image-cropper "
},
"navigationBarTitleText" : "裁剪图片" ,
"disableScroll" : true < image-cropper id =" image-cropper " limit_move =" {{true}} " disable_rotate =" {{true}} " width =" {{width}} " height =" {{height}} " imgSrc =" {{src}} " bindload =" cropperload " bindimageload =" loadimage " bindtapcut =" clickcut " > </ image-cropper > Page ( {
data : {
src : '' ,
width : 250 , //宽度
height : 250 , //高度
} ,
onLoad : function ( options ) {
//获取到image-cropper实例
this . cropper = this . selectComponent ( "#image-cropper" ) ;
//开始裁剪
this . setData ( {
src : "https://raw.githubusercontent.com/1977474741/image-cropper/dev/image/code.jpg" ,
} ) ;
wx . showLoading ( {
title : '加载中'
} )
} ,
cropperload ( e ) {
console . log ( "cropper初始化完成" ) ;
} ,
loadimage ( e ) {
console . log ( "图片加载完成" , e . detail ) ;
wx . hideLoading ( ) ;
//重置图片角度、缩放、位置
this . cropper . imgReset ( ) ;
} ,
clickcut ( e ) {
console . log ( e . detail ) ;
//点击裁剪框阅览图片
wx . previewImage ( {
current : e . detail . url , // 当前显示图片的http链接
urls : [ e . detail . url ] // 需要预览的图片http链接列表
} )
} ,
} ) | свойство | тип | Значение по умолчанию | ценить | описывать | Необходимый |
|---|---|---|---|---|---|
| imgSrc | Нить | никто | Безлимитный | Адрес изображения (если это онлайн-изображение, необходимо настроить безопасное доменное имя) | нет |
| отключить_поворот | логическое значение | ЛОЖЬ | правда/ложь | Отключить ротацию пользователей (если false, рекомендуется одновременно установить для limit_move значение false) | нет |
| limit_move | логическое значение | ЛОЖЬ | правда/ложь | Ограничить диапазон перемещения изображения (рамка обрезки всегда находится внутри изображения) (если установлено значение true, рекомендуется одновременно установить для параметра Disable_rotate значение true) | нет |
| ширина | Число | 200 | Если ширина экрана превышена, она будет автоматически преобразована в ширину экрана. | Ширина рамки обрезки | нет |
| высота | Число | 200 | Если оно превышает высоту экрана, оно автоматически изменится на высоту экрана. | Высота рамки обрезки | нет |
| максимальная_ширина | Число | 300 | Максимальная ширина рамки обрезки | Максимальная ширина рамки обрезки | нет |
| максимальная_высота | Число | 300 | Максимальная высота рамки обрезки | Максимальная высота рамки обрезки | нет |
| минимальная_ширина | Число | 100 | минимальная ширина рамки обрезки | минимальная ширина рамки обрезки | нет |
| минимальная_высота | Число | 100 | Минимальная высота рамки обрезки | Минимальная высота рамки обрезки | нет |
| отключить_ширину | логическое значение | ЛОЖЬ | правда/ложь | Зафиксировать ширину рамки обрезки | нет |
| отключить_высоту | логическое значение | ЛОЖЬ | правда/ложь | Зафиксировать высоту рамки обрезки | нет |
| отключить_соотношение | логическое значение | ЛОЖЬ | правда/ложь | Блокировка соотношения кадров обрезки | нет |
| экспорт_масштаб | Число | 3 | Безлимитный | Пропорция выходного изображения (относительно размера рамки обрезки) | нет |
| качество | Число | 1 | 0-1 | Качество создаваемого изображения | нет |
| Число | центр | всегда на экране | Обрезать верхнее поле поля обрезки | нет | |
| Число | центр | всегда на экране | Левое поле поля обрезки | нет | |
img_width | Число | Ни ширина, ни высота не заданы, а меньшая сторона заполняет рамку обрезки. | Поддержка % (без добавления единицы измерения к пикселям) (устанавливается только ширина, высота адаптивная) | Ширина изображения | нет |
img_height | Число | Ни ширина, ни высота не заданы, а меньшая сторона заполняет рамку обрезки. | Поддержка % (без добавления единицы измерения к пикселям) (устанавливается только высота, ширина адаптивная) | Высота изображения | нет |
| шкала | Число | 1 | Безлимитный | Коэффициент масштабирования изображения | нет |
| угол | Число | 0 | (угол=n*90, когда limit_move=true) | Угол поворота изображения | нет |
| min_scale | Число | 0,5 | Безлимитный | Минимальный коэффициент масштабирования изображения | нет |
| max_scale | Число | 2 | Безлимитный | Максимальный коэффициент масштабирования изображения | нет |
| загрузка привязки | Функция | нулевой | имя функции | инициализация обрезки завершена | нет |
| привязка изображения | Функция | нулевой | имя функции | Изображение загружается, и возвращаемое значение — Object{width, height, path, type и т. д.} | нет |
| привязатьtapcut | Функция | нулевой | имя функции | Нажмите на среднюю рамку обрезки, верните значение Object{src,width,height}. | нет |
| имя функции | параметр | возвращаемое значение | описывать | Требуется параметр |
|---|---|---|---|---|
| загрузить | никто | никто | Вызовите интерфейс загрузки изображений wx и начните обрезку. | нет |
| pushImg | источник | никто | Вставьте изображение и начните обрезку | да |
| getImg | Функция (функция обратного вызова) | Object{url,width,height} | Обрезаем и получаем картинку (размер картинки = ширина и высота картинки * масштаб экспорта) | да |
| Х, Ю | никто | Установить положение рамки обрезки | да | |
| setCutSize | ширина, высота | никто | Установить размер рамки обрезки | да |
| SetCutCenter | никто | никто | Установите рамку обрезки в центр | нет |
| setScale | шкала | никто | Установите коэффициент масштабирования изображения (не зависит от min_scale, max_scale) | да |
| setAngle | градус | никто | Установить угол поворота изображения (с эффектом перехода) | да |
| setTransform | {x,y,угол,масштаб,cutX,cutY} | никто | Изменения изображения на основе оригинала (на масштаб влияют min_scale, max_scale) | Передавайте параметры по мере необходимости |
| imgReset | никто | никто | Сброс угла, масштаба и положения изображения (можно использовать в обратном вызове onloadImage) | нет |
Адрес демо: https://github.com/wx-plugin/image-cropper-demo.
Нажмите, чтобы импортировать фрагмент кода
Если у вас есть хорошие предложения, пожалуйста, присылайте вопросы или пиар.
