vue-drag-screenshot

A Vue component to drag-screenshot
一个图片裁剪工具

demo演示

demo

安装

 npm install vue-drag-screenshot -S

使用

 // ES6
 import vuedragscreenshot from 'vue-drag-screenshot'
 Vue.use(vuedragscreenshot)
 <vue-screenshot 
    v-model="parentValue"
    :width="500"
    :height="500"
    :imageSrc='imageSrc'
    :control  = 'control'
    >
</vue-screenshot>
control  : {
    narrow   : true,  // 缩小
    clears   : true,  // 清除
    restore  : true,  // 还原
    blowup   : true,  // 放大
    wheel    : true,  // 滚轮缩放 ** 新增
    uniform  : true,  // uniform状态 ** 新增
    dragBox  : {      // 新增拖拽盒子固定尺寸/比例** 新增
        width   : 160,
        height  : 90,
    }
}

wheel

滚动属性，当滚动属性开启时，支持滚轮放大图片；

uniform

当uniform属性开启时，每次截取区域截图都会自动居中滚轮放大会由图片转至放大选框

v-model

实时刷新的截图

    // ES6
    <img :src="parentValue"/>

Props