Write the Code. Change the World.

11月 15

cropperjs 很多年中,对处理图片裁切做的体验非常棒。几个项目中,也使用过。那时候还是使用 jquery 这种传统的方式。现在想整一个使用 vue 和 element ui 组合在一起的模板。

cropperjs: https://github.com/fengyuanchen/cropperjs

photo-editor:https://github.com/fengyuanchen/photo-editor

操作一波

先下载:

npm install cropperjs

开干,在 src/components/ 下,新建 ImageCropper 目录。在 ImageCropper 下,新建 index.vue。

准备填入 code ,简单的弹出。

<template>
<div class="cropper-container">
<el-dialog title="" :visible.sync="visible">
  <el-image
    style="width: 100px; height: 100px"
    :src="src"
    :fit="fit"></el-image>
</el-dialog>
</div>
</template>

<script>
export default {
  data() {
    return {
      visible: false
    }
  },
  props: {
    src: {
      type: String,
      default: ''
    }
  },
  mounted() {

  },
  methods: {
    open() {
      this.visible = true
    }
  }
}
</script>

<style scoped>

</style>

使用

<template>
<div>
        <div class="avatar" @click="handleAvatar">
          <el-image
          style="width: 100px; height: 100px"
          :src="form.avatar"
          :fit="fit"></el-image>
          <i class="el-icon-edit">编辑</i>
        </div>
<image-cropper>
    <image-cropper ref="avatar" :src="avatar"></image-cropper>
</div>
</template>

<script>
import ImageCropper from '@/components/ImageCropper'

export default {
  components: {
    ImageCropper
  },
  data() {
    return {
        avatar: 'https://xxxx'
    }
 },
 methods: {
    handleAvatar() {
      this.$refs.avatar.open()
    }
 }
}

先这样搞一波弹窗。然后进入正题,搞图片裁切。

发表评论

电子邮件地址不会被公开。 必填项已用*标注