图片裁剪的开源库vuejs-clipper

芋头小棒槌

于 2018-12-18 11:01:55 发布

阅读量1.2k

点赞数

本文链接：https://blog.youkuaiyun.com/qq_41834059/article/details/85061708

版权

本文介绍如何使用Vue.js及其插件实现图片的裁剪功能和单位面积放大效果，通过具体代码示例展示了组件的引入和使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

功能支持裁剪和单位面积放大

template中代码

<template>
  <div class="home">
    <clipper-basic src="http://img3.imgtn.bdimg.com/it/u=1295149330,2951135297&fm=26&gp=0.jpg" preview="preview"></clipper-basic>
    <clipper-preview class="basic md" name="preview"></clipper-preview>
  </div>
</template>

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './plugins/element.js'
import Apptable from './components/zTable/index'
import VuejsClipper from 'vuejs-clipper'

Vue.config.productionTip = false

Vue.use(Apptable)
Vue.use(VuejsClipper, {
  components: {
    clipperBasic: true,
    clipperPreview: true
  }
})

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')