vue-img-cutter

中文文档

Vue-img-cutter — это плагин для кадрирования изображений, который можно использовать для поворота, масштабирования и обрезки изображений любого размера.

Возможности:

• Для IE9+, MSEdge, Chrome, Firefox;
• Можно настроить в строке или модально;
• Поворот, масштабирование;
• Обрезка по масштабу;
• Кадрирование исходного изображения;
• Кадрирование удалённых изображений.

Скриншот:

Демо:

https://www.ihtmlcss.com/demo/dist/#/croptool

Git:

Github: https://github.com/acccccccb/vue-img-cutter;

码云: https://gitee.com/GLUESTICK/vue-img-cutter.

Если этот проект вам полезен, пожалуйста, поставьте мне звезду :)

Метод использования:

1. Установить:

npm install vue-img-cutter@2 --save-dev # для vue2
npm install vue-img-cutter@3 --save-dev # для vue3

2. Импортировать ImgCutter.vue:

import ImgCutter from 'vue-img-cutter'
export default {
        components:{
            ImgCutter
        },
...
}

3. Написать код в шаблоне:

<ImgCutter v-on:cutDown="cutDown"></ImgCutter>

4. Solt:

<ImgCutter v-on:cutDown="cutDown">
    <template #open>
        <button>Choose image</button>
    </template>
</ImgCutter>

5. Этот метод совместим с IE9, его также можно использовать для обрезки междоменных изображений:

• Создать объект (имя, src, ширина и высота обязательны).

• this.$refs.imgCutterModal.handleOpen(The Object).

// Объект выглядит так.
let obj = {
    name: '1.jpg', //Image name
    src: 'http://url/1.jpg', // Image url
    //width:200,//Image width  remove in 2.1.9+
    //height:200,//Image height remove in 2.1.9+
};

ForIE9:function(){
    // Сначала нужно создать объект с именем и src.
    // Затем вызвать handleOpen(obj) и передать obj.
    this.$refs.imgCutterModal.handleOpen({
        name:"image.jpg",
        src:"http://imageServ.com/image.jpg",
    });
}

Описание параметров:

Таблица: Hook function

Slot (You can use slot="slot name" to custom button):

Return @cutDown:

Development:

• Оригинальная картинка
• Зеркало

Donation:

Update log:

3.0.5

• Новый prop (onImageLoadComplete): New Event: onImageLoadComplete #使用远程图片方法 有没有办法还没加载出来之前 有个loading #85.
• Новый prop (onImageLoadError): New Event: onImageLoadError.
• BugFix: # fix(other): 修复canvas.toBlob方法第二、第三个参数位置错误的情况 #84 Thanks nowo.
• Обновление LICENSE.

3.0.4

• Новый prop (accept): accept file type #可不可以在文件上传的accept 中加上webp #80.

3.0.3

• bugfix: #固定裁剪框位置时图片拖动优化建议 #74.

3.0.2

• bugfix: #note_11139264.
• bugfix: #64.
• Новый prop (quality): A Number between 0 and 1 indicating the image quality.

3.0.1

• bugfix: #I4SDOE.
• bugfix: dialog-footer default height 40px.
• bugfix: width height x и y convert to int.

3.0.0

• chore: Build tool changed to vue3.

2.2.6

• Новый prop (accept): accept file type #可不可以在文件上传的accept 中加上webp #80.

2.2.5

• Bugfix: remove this in template.

2.2.4

• Новый prop (toolBoxOverflow): Allow tool box out of picture range, default: true.

2.2.3

• Bug fix: When you set rate, the control-box didn't reach the expected position #I3OXMW.

2.2.2

• Новый prop (imgMove): Allow move img, default: true.

2.2.1

• Новый prop (fileType): Return file type, default: png.

2.2.0

• Новый prop (index): Return result with index.
• Новый prop (previewMode): Return results at any time, in case of performance problems, set this to false.
• Fix Bug: Update style.

2.1.10

• Новые функции:
  • saveCutPosition: Save last cut position and size.
  • scaleAble: Able/Disable scale image.

2.1.9

• Crop original image not need imageObj.width и imageObj.height.

2.1.8

• Новые функции: smallToUpload, If choose image size less then defined Size, return file. sizeChange must be false. #20.

2.1.7

• Fix bug: #21 cropPicture() missed params.

2.1.6

• Добавить новые функции hook: onClearAll, onPrintImg, onChooseImg.