精华内容
下载资源
问答
  • Vue.use(window['vue-cropper'].default) nuxt 使用方式 if(process.browser) { vueCropper = require('vue-cropper') Vue.use(vueCropper.default) } < vueCropper ref =" cropper " :img =" option.img " ...
  • npm install vue-cropper 父组件 <template> <div> <el-button @click="dialogVisible = true">上传头像</el-button> <avatar-cropper :dialogVisible.sync="dialogVisible" @...

    安装 文档

    npm install vue-cropper
    

    父组件

    <template>
      <div>
        <el-button @click="dialogVisible = true">上传头像</el-button>
        <avatar-cropper :dialogVisible.sync="dialogVisible" @closeAvatarDialog="closeAvatarDialog"></avatar-cropper>
      </div>
    </template>
    
    <script>
      import avatarCropper from '@/components/avatarCropper'
      export default {
        components: {
          avatarCropper
        },
        data() {
          return {
            dialogVisible: false
          }
        },
        methods: {
          closeAvatarDialog(data) {
    	console.log(data)
            this.dialogVisible = false
          }
        }
      }
    </script>
    
    

    子组件

    <template>
      <el-dialog
        title="裁剪头像"
        :visible.sync="dialogVisible"
        :show-close="false"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        @close="closeDialog"
        width="600px"
      >
        <div class="avatar-container">
          <!-- 待上传图片 -->
          <div v-show="!options.img">
            <el-upload
              class="upload"
              ref="upload"
              action=""
              :on-change="upload"
              accept="image/png, image/jpeg, image/jpg"
              :show-file-list="false"
              :auto-upload="false"
            >
              <el-button slot="trigger" size="small" type="primary" ref="uploadBtn">
                选择图片
              </el-button>
            </el-upload>
            <div>支持jpg、png格式的图片,大小不超过5M</div>
          </div>
          <!-- 已上传图片 -->
          <div v-show="options.img" class="avatar-crop">
            <vueCropper
              v-if="dialogVisible"
              class="crop-box"
              ref="cropper"
              :img="options.img"
              :autoCrop="options.autoCrop"
              :fixedBox="options.fixedBox"
              :canMoveBox="options.canMoveBox"
              :autoCropWidth="options.autoCropWidth"
              :autoCropHeight="options.autoCropHeight"
              :centerBox="options.centerBox"
              :fixed="options.fixed"
              :fixedNumber="options.fixedNumber"
              :canMove="options.canMove"
              :canScale="options.canScale"
            ></vueCropper>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <div class="reupload" @click="reupload">
            <span v-show="options.img">重新上传</span>
          </div>
          <div>
            <el-button @click="closeDialog">取 消</el-button>
            <el-button type="primary" @click="getCrop">确 定</el-button>
          </div>
        </span>
      </el-dialog>
    </template>
    
    <script>
    import { VueCropper } from 'vue-cropper'
    export default {
      components: {
        VueCropper
      },
      name: 'avatarCropper',
      props: {
        dialogVisible: {
          type: Boolean,
          default: false
        }
      },
      data() {
        return {
          // vueCropper组件 裁剪配置信息
          options: {
            img: '', // 原图文件
            autoCrop: true, // 默认生成截图框
            fixedBox: false, // 固定截图框大小
            canMoveBox: true, // 截图框可以拖动
            autoCropWidth: 200, // 截图框宽度
            autoCropHeight: 200, // 截图框高度
            fixed: true, // 截图框宽高固定比例
            fixedNumber: [1, 1], // 截图框的宽高比例
            centerBox: true, // 截图框被限制在图片里面
            canMove: false, // 上传图片不允许拖动
            canScale: false // 上传图片不允许滚轮缩放
          }
        }
      },
    
      methods: {
        // 读取原图
        upload(file) {
          const isIMAGE = file.raw.type === 'image/jpeg' || file.raw.type === 'image/png'
          const isLt5M = file.raw.size / 1024 / 1024 < 5
          if (!isIMAGE) {
            this.$message({
              showClose: true,
              message: '请选择 jpg、png 格式的图片',
              type: 'warning'
            })
            return false
          }
          if (!isLt5M) {
            this.$message({
              showClose: true,
              message: '图片大小不能超过 5MB',
              type: 'warning'
            })
            return false
          }
          let reader = new FileReader()
          reader.readAsDataURL(file.raw)
          reader.onload = e => {
            this.options.img = e.target.result // base64
          }
        },
        // 获取截图信息
        getCrop() {
          // 获取截图的 base64 数据
          // this.$refs.cropper.getCropData((data) => {
          //   this.$emit('closeAvatarDialog', data)
          //   this.closeDialog()
          // });
          // 获取截图的 blob 数据
          this.$refs.cropper.getCropBlob(data => {
            this.$emit('closeAvatarDialog', data)
            this.closeDialog()
          })
        },
        // 重新上传
        reupload() {
          this.$refs.uploadBtn.$el.click()
        },
        // 关闭弹框
        closeDialog() {
          this.$emit('update:dialogVisible', false)
          this.options.img = ''
        }
      }
    }
    </script>
    
    <style lang="scss" scoped>
    .dialog-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      .reupload {
        color: #409eff;
        cursor: pointer;
      }
    }
    .avatar-container {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 560px;
      height: 400px;
      background-color: #f0f2f5;
      margin-right: 10px;
      border-radius: 4px;
      .upload {
        text-align: center;
        margin-bottom: 24px;
      }
      .avatar-crop {
        width: 560px;
        height: 400px;
        position: relative;
        .crop-box {
          width: 100%;
          height: 100%;
          border-radius: 4px;
          overflow: hidden;
        }
      }
    }
    </style>
    
    
    展开全文
  • // 警告! 如果您仍使用测试版(<1.0.0),请阅读。...import { Cropper } from 'vue-advanced-cropper' import 'vue-advanced-cropper/dist/style.css' ; new Vue ( { el : '#app' , data : {
  • 在用户上传前在before-upload钩子获取files文件,然后中断上传操作 ...然后在openCropper方法中用FileReader对读取文件并打开自己的cropper组件 openCropper (file) { var _this = this var reader = new FileR

    在用户上传前在before-upload钩子获取files文件,然后中断上传操作

    beforeAvatarUpload (files) {
      this.filename = files.name
      this.openCropper(files)
      return false
    }
    

    然后在openCropper方法中用FileReader对读取文件并打开自己的cropper组件

    openCropper (file) {
      var _this = this
      var reader = new FileReader()
      reader.onload = e => {
        let data
        if (typeof e.target.result === 'object') {
          // 把Array Buffer转化为blob 如果是base64不需要
          data = window.URL.createObjectURL(new Blob([e.target.result]))
        } else {
          data = e.target.result
        }
        _this.option.img = data
        _this.$refs.dialog.showDialog = true
      }
      // 转化为base64
      // reader.readAsDataURL(file)
      // 转化为blob
      reader.readAsArrayBuffer(file)
    },
    

    这是我cropper的界面和配置,不展开细讲

    <custom-dialog title="封面裁剪"
                   ref="dialog"
                   width="50%"
                   @confirm="handleConfirm"
                  :dialogConfig="{ showFooter: true, name: '确定', headCenter: true }">
    	 <div class="cropper-w">
    	   <div class="cropper"
    	        :style="{ width: '320px', height: '180px' }">
    	     <vueCropper ref="cropper"
    	                 v-if="crap"
    	                 :img="option.img"
    	                 :outputSize="option.size"
    	                 :outputType="option.outputType"
    	                 :info="option.info"
    	                 :full="option.full"
    	                 :canMove="option.canMove"
    	                 :canMoveBox="option.canMoveBox"
    	                 :original="option.original"
    	                 :autoCrop="option.autoCrop"
    	                 :autoCropWidth="option.autoCropWidth"
    	                 :autoCropHeight="option.autoCropHeight"
    	                 :fixedBox="option.fixedBox"></vueCropper>
    	   </div>
    	   <div class="tips">tips:滚动鼠标滚轮可进行缩放操作</div>
    	 </div>
    </custom-dialog>
    
    option: {
       img: '', // 裁剪图片的地址
       info: false, // 裁剪框的大小信息
       outputSize: 1, // 剪切后的图片质量(0.1-1)
       full: true, // 输出原图比例截图 props名full
       outputType: 'png', // 裁剪生成额图片的格式
       canMove: true, // 能否拖动图片
       original: false, // 上传图片是否显示原始宽高
       canMoveBox: false, // 能否拖动截图框
       autoCrop: true, // 是否默认生成截图框
       autoCropWidth: 320,
       autoCropHeight: 180,
       fixedBox: true // 截图框固定大小
     },
    

    用户上传成功后点确定就会调用handleConfirm方法

    handleConfirm () {
      // 上传图片(点击上传按钮)
      if (!this.option.img) {
        return
      }
      // 输出
      // if (this.outputType !== 'blob') {
      this.$refs.cropper.getCropBlob((data) => {
        if (data.size > 2097152) {
          this.showMsg('图片大于2M,请进行裁剪或重新选择')
        }
        let blob = window.URL.createObjectURL(data)
        this.downImg = blob
        var base64;
        var img = new Image()
        img.src = blob
        var _that = this
        img.onload = function () {
          var that = this
          //生成比例
          var w = that.width,
            h = that.height,
            scale = w / h
          h = w / scale
          //生成canvas
          var canvas = document.createElement('canvas')
          var ctx = canvas.getContext('2d')
          canvas.width = w
          canvas.height = h
          ctx.drawImage(that, 0, 0, w, h)
          // 生成base64
          _that.cropperPic = canvas.toDataURL('image/jpeg', 0.8)
          _that.$refs.dialog.showDialog = false
          let files = _that.transformToFiles(_that.cropperPic, _that.filename)
          _that.temporaryCloseCropper = true
          _that.$refs.upload.$children[0].handleChange({ target: { files: [files] } })
        }
      })
    },
    

    transformToFiles方法是我在网上找的一个将base64转成files的方法

    transformToFiles (dataurl, filename) {
       var arr = dataurl.split(','),
         mime = arr[0].match(/:(.*?);/)[1],
         bstr = atob(arr[1]),
         n = bstr.length,
         u8arr = new Uint8Array(n)
       while (n--) {
         u8arr[n] = bstr.charCodeAt(n)
       }
       return new File([u8arr], filename, { type: mime })
     }
    

    然后最后,我们拿到新的file需要重新调用el-upload的上传方法

    _that.$refs.upload.$children[0].handleChange({ target: { files: [files] } })
    

    这样就可以继续上传了!

    展开全文
  • vue-cropper vue-image-crop-upload 这两种的样式分别如下所示: 首先是vue-image-crop-upload,我们能够发现其实这个截图有点类似于我们需要裁减头像的时候,才需要使用的,而针对于特定的矩形,可能没办法达到...

    前言

    这两天想给图片添加一个图片裁剪的功能,因为之前的图片都是直接上传的,很多图片肯定在前台显示的时候,都不能很好的达到我们想要的效果,因此就需要我们在对个别图片进行细微调整,已达到我们的目的。

    图片裁剪

    关于图片裁剪我在github中找到了两种

    • vue-cropper
    • vue-image-crop-upload

    这两种的样式分别如下所示:

    首先是vue-image-crop-upload,我们能够发现其实这个截图有点类似于我们需要裁减头像的时候,才需要使用的,而针对于特定的矩形,可能没办法达到我们的效果

    其次我们再看 vue-cropper图片裁剪,它是可以根据我们的实际需求进行裁剪,所以综上可能下面这块比较适合现在的项目需求,但是我们也可以使用上面的这款作为头像裁剪的组件。

    裁剪后的效果:

    引入Vue-cropper

    安装依赖

    npm install vue-cropper --save
    

    页面引入

    import { VueCropper } from 'vue-cropper'
    

    申明组件

     components: {
        VueCropper,
     },
    

    完整代码

    <!-- 裁剪图片 -->
    <template>
      <div class="wrapper">
        <div class="model" v-show="model" @click="model = false">
          <div class="model-show">
            <img :src="modelSrc" alt="">
          </div>
        </div>
        <div class="content">
    
          <div class="show-info">
            <h2>自动生成截图框 固定比例 w : h => 4 : 3</h2>
            <div class="test">
              <vueCropper ref="cropper2"
                          :img="example2.img"
                          :outputSize="example2.size"
                          :outputType="example2.outputType"
                          :info="example2.info"
                          :canScale="example2.canScale"
                          :autoCrop="example2.autoCrop"
                          :autoCropWidth="example2.autoCropWidth"
                          :autoCropHeight="example2.autoCropHeight"
                          :fixed="example2.fixed"
                          :fixedNumber="example2.fixedNumber"
                          :enlarge="4"></vueCropper>
            </div>
            <label class="btn" for="upload2">上传</label>
            <input type="file" id="upload2" style="position:absolute; clip:rect(0 0 0 0);"
                   accept="image/png, image/jpeg, image/gif, image/jpg" @change="uploadImg($event,2)">
            <button @click="finish2()" class="btn">裁剪</button>
          </div>
        </div>
    
      </div>
    </template>
    
    <script>
      import { VueCropper } from 'vue-cropper'
      // import * as OSS from 'ali-oss';
      export default {
        components: {
          VueCropper,
        },
        data() {
          return {
            model: false,
            modelSrc: '',
            crap: false,
            previews: {},
            form: {
              head: ''
            },
            example2: {
              //img的路径自行修改
              img: '$oss.url + \'/\' + form.head ',
              info: true,
              size: 1,
              outputType: 'jpeg',
              canScale: true,
              autoCrop: true,
              // 只有自动截图开启 宽度高度才生效
              autoCropWidth: 300,
              autoCropHeight: 250,
              fixed: true,
              // 真实的输出宽高
              infoTrue: true,
              fixedNumber: [4, 3]
            },
            downImg: '#'
          }
        },
        methods: {
          //点击裁剪,这一步是可以拿到处理后的地址
          finish2() {
            this.$refs.cropper2.getCropData((data) => {
              this.modelSrc = data
              this.model = false;
              //裁剪后的图片显示
              this.example2.img = this.modelSrc;
              // this.toBlob(data)
              // console.log(data)
              // console.log(this.toBlob(data))
    
              //将图片上传服务器中
    
            })
    
          },
    
          uploadImg(e, num) {
            //上传图片
            this.example2.img = ''
            var file = e.target.files[0]
            if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
              alert('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种')
              return false
            }
            var reader = new FileReader()
            reader.onload = (e) => {
              let data
              data = e.target.result
              if (typeof e.target.result === 'object') {
                // 把Array Buffer转化为blob 如果是base64不需要
                data = window.URL.createObjectURL(new Blob([e.target.result]))
              } else {
                data = e.target.result
              }
              if (num === 1) {
                this.option.img = data
              } else if (num === 2) {
                this.example2.img = data
              }
            }
            // 转化为base64
            // reader.readAsDataURL(file)
            // 转化为blobcs
            reader.readAsArrayBuffer(file)
          },
          // base64转blob
          toBlob(ndata) {
            //ndata为base64格式地址
            console.log(ndata)
            let arr = ndata.split(','),
              mime = arr[0].match(/:(.*?);/)[1],
              bstr = atob(arr[1]),
              n = bstr.length,
              u8arr = new Uint8Array(n);
            while (n--) {
              u8arr[n] = bstr.charCodeAt(n);
            }
            return new Blob([u8arr], {
              type: mime
            })
          }
        },
    
      }
    </script>
    
    <style>
      * {
        margin: 0;
        padding: 0;
      }
    
      .content {
        margin: auto;
        max-width: 585px;
        margin-bottom: 100px;
      }
    
      .test-button {
        display: flex;
        flex-wrap: wrap;
      }
    
      .btn {
        display: inline-block;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        background: #fff;
        border: 1px solid #c0ccda;
        color: #1f2d3d;
        text-align: center;
        box-sizing: border-box;
        outline: none;
        margin: 20px 10px 0px 0px;
        padding: 9px 15px;
        font-size: 14px;
        border-radius: 4px;
        color: #fff;
        background-color: #50bfff;
        border-color: #50bfff;
        transition: all .2s ease;
        text-decoration: none;
        user-select: none;
      }
    
      .des {
        line-height: 30px;
      }
    
      code.language-html {
        padding: 10px 20px;
        margin: 10px 0px;
        display: block;
        background-color: #333;
        color: #fff;
        overflow-x: auto;
        font-family: Consolas, Monaco, Droid, Sans, Mono, Source, Code, Pro, Menlo, Lucida, Sans, Type, Writer, Ubuntu, Mono;
        border-radius: 5px;
        white-space: pre;
      }
    
      .show-info {
        margin-bottom: 50px;
      }
    
      .show-info h2 {
        line-height: 50px;
      }
    
      /*.title, .title:hover, .title-focus, .title:visited {
            color: black;
        }*/
    
      .title {
        display: block;
        text-decoration: none;
        text-align: center;
        line-height: 1.5;
        margin: 20px 0px;
        background-image: -webkit-linear-gradient(left, #3498db, #f47920 10%, #d71345 20%, #f7acbc 30%, #ffd400 40%, #3498db 50%, #f47920 60%, #d71345 70%, #f7acbc 80%, #ffd400 90%, #3498db);
        color: transparent;
        -webkit-background-clip: text;
        background-size: 200% 100%;
        animation: slide 5s infinite linear;
        font-size: 40px;
      }
    
      .test {
        height: 285px;
      }
    
      .model {
        position: fixed;
        z-index: 10;
        width: 100vw;
        height: 100vh;
        overflow: auto;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.8);
      }
    
      .model-show {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100vw;
        height: 100vh;
      }
    
      .model img {
        display: block;
        margin: auto;
        max-width: 80%;
        user-select: none;
        background-position: 0px 0px, 10px 10px;
        background-size: 20px 20px;
        background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee 100%), linear-gradient(45deg, #eee 25%, white 25%, white 75%, #eee 75%, #eee 100%);
      }
    
      .c-item {
        display: block;
        padding: 10px 0;
        user-select: none;
      }
    
      @keyframes slide {
        0% {
          background-position: 0 0;
        }
    
        100% {
          background-position: -100% 0;
        }
      }
    
      @media screen and (max-width: 1000px) {
        .content {
          max-width: 90%;
          margin: auto;
        }
    
        .test {
          height: 400px;
        }
      }
    </style>
    
    展开全文
  • vue+图片裁剪vue-cropper以及api

    千次阅读 2019-12-19 17:29:26
    因为项目需要,需要实现一个上传完图片,对图片进行二次处理的需求,就使用了vue-cropper来实现这个功能,总的来说还是感觉非常不错的软件,这里分享下我的使用方法,以及vue-cropper的api(见最下) 实现效果: ...

    前言:

            因为项目需要,需要实现一个上传完图片,对图片进行二次处理的需求,就使用了vue-cropper来实现这个功能,总的来说还是感觉非常不错的软件,这里分享下我的使用方法,以及vue-cropperapi(见最下)

    实现效果:

    实现步骤:

    步骤一:项目中安装 vue-cropper

    npm install vue-cropper

    步骤二:在main.js中注册(经测试,单独页面注册可能会出不来)

    import VueCropper from 'vue-cropper' 
    
    Vue.use(VueCropper)
    

    步骤三:在页面使用,这里直接提供封装好的组件 vue-cropper.vue(源代码在下面)

    1、template部分

    2、js部分

    源代码:

    <template>
      <div class="cropper-component">
            <!-- 工具箱部分 -->
            <div class="btn-box">
                <label class="btn" for="uploads">选择图片</label>
                <input type="file" id="uploads" :value="imgFile"
                    style="position:absolute; clip:rect(0 0 0 0);width: 1px;"
                    accept="image/png, image/jpeg, image/gif, image/jpg"
                    @change="uploadImg($event,'blob', 1)">
    
                <Button type="primary" icon="ios-add" title="放大" @click="changeScale(1)"/>
                <Button type="primary" icon="ios-remove" title="缩小" @click="changeScale(-1)"/>
                <Button type="primary" title="左旋转" @click="rotateLeft"><span style="font-weight: 500;">↺</span></Button>
                <Button type="primary" title="右旋转" @click="rotateRight"><span style="font-weight: 500;">↻</span></Button>
                <!-- <Button type="primary" title="下载" @click="down('blob')"><span style="font-weight: 500;">↓</span></Button> -->
                <!-- <div class="btn" @click="finish('blob')">上传头像</div> -->
            </div>
            <!-- 展示内容部分 -->
            <div class="show_box">
              <!-- 展示选中图片 -->
              <div class="cropper">
                  <vueCropper
                      ref="cropper"
                      :img="option.img"
                      :outputSize="option.size"
                      :outputType="option.outputType"
                      :info="option.info"
                      :full="option.full"
                      :canMove="option.canMove"
                      :canMoveBox="option.canMoveBox"
                      :original="option.original"
                      :autoCrop="option.autoCrop"
                      :autoCropWidth="option.autoCropWidth"
                      :autoCropHeight="option.autoCropHeight"
                      :fixedBox="option.fixedBox"
                      @realTime="realTime"
                      @imgLoad="imgLoad"
                  ></vueCropper>
              </div>
              <!-- 展示缩略图 -->
              <div class="preview-box" v-if="previews.url">
                  <div>预览:</div>
                  <div :style="previews.div" class="preview">
                      <img :src="previews.url" :style="previews.img"/>
                  </div>
              </div>
            </div>
      </div>
    </template>
    <script>
    export default {
        name: 'cropper',
        data() {
            return {
                //剪切图片上传
                crap: false,
                previews: {},
                option: {
                    img: '', // 裁剪图片的地址
                    info: true, // 裁剪框的大小信息
                    outputSize: 1, // 剪切后的图片质量(0.1-1)
                    full: true, // 输出原图比例截图 props名full
                    outputType: 'jpg', // 裁剪生成额图片的格式
                    canMove: true,  // 能否拖动图片
                    original: false,  // 上传图片是否显示原始宽高
                    canMoveBox: true,  // 能否拖动截图框
                    autoCrop: true, // 是否默认生成截图框
                    autoCropWidth: 150,
                    autoCropHeight: 150,
                    fixedBox: true // 截图框固定大小
                },
                fileName:'',  // 本机文件地址
                downImg: '#',
                imgFile:'',
                uploadImgRelaPath:'', // 上传后的图片的地址(不带服务器域名)
            }
        },
        methods: {
          // 放大/缩小
          changeScale(num) {
            num = num || 1;
            this.$refs.cropper.changeScale(num);
          },
          // 坐旋转
          rotateLeft() {
            this.$refs.cropper.rotateLeft();
          },
          // 右旋转
          rotateRight() {
            this.$refs.cropper.rotateRight();
          },
          // 上传图片(点击上传按钮)
          finish(type) {
            let formData = new FormData();
            // 输出
            if (type === 'blob') {
              this.$refs.cropper.getCropBlob((data) => {
                let img = window.URL.createObjectURL(data);
                formData.append('images', data);
                this.$emit('postFile',formData);
              })
            } else {
              this.$refs.cropper.getCropData((data) => {
                formData.append('images', data);
                this.$emit('postFile',formData);
              })
            }
          },
          // 实时预览函数
          realTime(data) {
            this.previews = data;
          },
          // 下载图片
          down(type) {
            var aLink = document.createElement('a');
                aLink.download = 'author-img';//文件名
            if (type === 'blob') {
              // 获取截图的blob数据
              this.$refs.cropper.getCropBlob((data) => {
                this.downImg = window.URL.createObjectURL(data);//生成blob格式图片路径
                aLink.href = window.URL.createObjectURL(data);
                aLink.click();
              })
            } else {
              // 获取截图的base64 数据
              this.$refs.cropper.getCropData((data) => {
                this.downImg = data;
                aLink.href = data;
              })
            }
          },
          // 选择本地图片
          uploadImg(e, type, num) {//num代表第几个
            // 上传图片
            var file = e.target.files[0];
            this.fileName = file.name;
            if (!/\.(jpg)$/.test(e.target.value)) {
              this.$Message.info('证件照图片必须是jpg格式');
              return false;
            }
            let reader = new FileReader();
                reader.onload =(e) => {
                  let data = '';//生成图片地址
                  if (typeof e.target.result === 'object') {
                    if(type == 'blob'){
                      // 把Array Buffer转化为blob 如果是base64不需要
                      data = window.URL.createObjectURL(new Blob([e.target.result]));
                    }
                  }
                  else {
                    data = e.target.result;
                  }
                  if (num === 1) {
                    this.option.img = data;
                  }
                }
                if(type == 'blob'){
                  // 转化为blob
                  reader.readAsArrayBuffer(file);
                }else{
                  // 转化为base64
                  reader.readAsDataURL(file);
                }
    
    
          },
          //图片加载的回调 imgLoad 返回结果success, error
          imgLoad (msg) {
            console.log('imgLoad')
            console.log(msg)
          },
          //刷新-清除截图-目前尚未用到
          refeshImg(type){
            if(type == 'start'){
              this.$refs.cropper.startCrop() //开始截图
            }else if(type == 'end'){
              this.$refs.cropper.stopCrop() //停止截图
            }else if(type == 'clear'){
               this.$refs.cropper.clearCrop() //清除截图
            }
    
          }
        }
      }
    </script>
    <style lang="less">
      .cropper-component {
          width: 100%;
          margin: 0 auto;
          position: relative;
          //工具箱部分
          .btn-box {
              margin: 20px 0;
              .btn {
                  padding:0 10px;
                  height:32px;
                  line-height:32px;
                  text-align: center;
                  border-radius: 4px;
                  background-color: #0d8b8e ;
                  color: #fff;
                  cursor: pointer;
                  display: inline-block;
                  vertical-align: bottom;
              }
          }
          //展示内容部分
          .show_box{
            display: flex;
            justify-content: space-between;
            // 展示选中图片
            .cropper {
                width: 260px;
                height: 260px;
            }
            // 展示缩略图
            .preview-box {
                top: 60px;
                right: 10px;
                .preview {
                    width: 150px;
                    height: 150px;
                    // border-radius: 50%;//这里预览是否需要变成圆的
                    border: 1px solid #ccc;
                    background-color: #ccc;
                    margin: 5px;
                    overflow: hidden;
                }
            }
          }
    
      }
    </style>
    

    API文档:

    这里内置方法的话,我是可以提供可供拷贝的代码:

    内置方法 通过this.$refs.cropper 调用
    this.$refs.cropper.startCrop() 开始截图
    this.$refs.cropper.stopCrop() 停止截图
    this.$refs.cropper.clearCrop() 清除截图
    this.$refs.cropper.changeScale() 修改图片大小 正数为变大 负数变小
    this.$refs.cropper.getImgAxis() 获取图片基于容器的坐标点
    this.$refs.cropper.getCropAxis() 获取截图框基于容器的坐标点
    this.$refs.cropper.goAutoCrop 自动生成截图框函数
    this.$refs.cropper.rotateRight() 向右边旋转90度
    this.$refs.cropper.rotateLeft() 向左边旋转90度
    图片加载的回调 imgLoad 返回结果success, error
    获取截图信息
    this.$refs.cropper.cropW 截图框宽度
    
    this.$refs.cropper.cropH 截图框高度

    完整api入口

    到这里就结束了,有兴趣的朋友可以留言一起交流哈

    展开全文
  • npm install vue-cropper # cropper.vue <template> <div style="width: auto; height: 500px;"> <vue-cropper ref="cropper" :img="option.img" :outputSize="option.size" :outputType=...
  • cropper头像裁剪(移动端)
  • vant-vue-cropper-h5.rar

    2021-05-25 11:48:34
    vant-vue-cropper-h5.rar 移动端裁剪demo 搭配 vant 免c币下载地址: https://download.lllomh.com/cliect/#/product/L525143961636235
  • Vue头像作物 :girl: 一个简单而优雅...$ npm i vue-avatar-cropper 用法 < button id = " pick-avatar " >Select an image</ button > < avatar-cropper @ uploaded = " handleUploaded " tri
  • 安装npm install --save vue-advanced-cropper yarn添加vue-advanced-cropper如果要使用CDN,请阅读相应的文档部分用法从'vue'导入{Vue} import Vue从'vue-advanced-cropper'导入{Cropper}新的Vue ({el:'#a
  • 一个vue的图片裁剪组件,实现了缩放裁剪,自定义裁剪尺寸,以及iphone和部分安卓机型的照片角度纠正
  • vue-cropper图片裁剪插件,axios发送请求 用vue的项目里需要对图片进行裁剪,于是使用了cropperjs,在使用的过程中也踩过一些坑,以下是在.vue文件里cropperjs的使用方法和经验教训总结
  • 使用elementui + vue-cropper进行图片的上传、裁剪、压缩组件 使用elementui + vue-cropper进行图片的上传、裁剪、压缩组件
  • cropper.vue

    2021-10-26 09:57:31
    vue-cropper结合elemeni-ui制作的图片剪裁工具, 可进行图片的缩放, 旋转, 预览, 随意剪裁等功能
  • 前端工作中,经常需要图片裁剪的场景,cropper.js是一款优秀的前端插件,api十分丰富。 本文是在vue-cli项目下封装图片裁剪插件,效果图如下: 话不多说,看步骤吧。 第一步:准备开发环境 cropper.js是基于jquery...
  • 一、项目预览。 效果: 一个手指拖动,可以移动图片,两个手指拖动可以缩放。 下载该项目: ...git clone ...1.复制“vue-image-cropper”项目中的 ./src/components/imageCropper.vue文件 (imageCroppe.
  • 插件地址 : ...1.npm install vue-cropper 安装 2.main.js使用 import VueCropper from 'vue-cropperVue.use(VueCropper) 3.选择图片 //选择图片 selectImage(){ ...
  • vue+cropper+vux 移动端图片裁剪 刚好项目需要用到图片裁剪功能
  • import v3Cropper from 'vue3-cropperjs' import 'vue3-cropperjs/dist/v3cropper.css' components: { v3Cropper } main.js里面使用 import v3Cropper from 'vue3-cropperjs' import 'vue3-cropperjs/dist/v3cropp
  • 今天做项目遇到了这样一个需求:对于要上传的图片进行裁剪,于是发现了一个好的工具----vue-cropper 首先下载vue-cropper npm install vue-cropper 引入vue-cropper import { VueCropper } from 'vue-cropper' ...
  • import { VueCropper } from 'vue-cropper' components: { VueCropper, }, main.js里面使用 import Vu 需要使用外层容器包裹并设置宽高 使用 注意: 需要关掉本地的mock服务, 不然图片转化会报错 组件内使用 ...
  • 本篇文章主要介绍了vue移动端裁剪图片结合插件Cropper的使用实例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • Vue中使用Cropper.js裁剪图片 Cropper.js是一款很好用的图片裁剪工具,可以对图片的尺寸、宽高比进行裁剪,满足诸如裁剪头像上传、商品图片编辑之类的需求。 github: https://github.com/fengyuanchen/cropperjs ...
  • vue-cropper的使用

    万次阅读 2018-12-07 20:36:35
    vue-cropper的使用 vue-cropper官方链接:https://github.com/xyxiao001/vue-cropper 项目中使用 ``` npm install vue-cropper yarn add vue-cropper ``` <template> <el-dialog title="图片...
  • Vue <template> <div class="cropper-component"> <div class="info-item"> <div class="btn-box"> <label class="btn" for="uploads">选择图片</label> <input id=...
  • vue-quick-cropper A mobile image cropping upload plugin for Vue. (styles like WeChat, single finger moving two-finger zoom)--vue的移动端图片裁剪上传插件(样式仿照微信,可单 vue-quick-cropper A mobile...
  • vue---vueCropper实现图像裁剪

    千次阅读 2020-02-19 22:01:14
    在main.js中或使用到的组件中引入vue-cropper ①main.js: import Vue from 'vue' import VueCropper from 'vue-cropper' Vue.use(VueCropper) ②组件中 3.使用VueCropper 为了方便测试,已注释后台联调代码部分。...
  • 1、需求:制作一个vue版本的图片剪裁组件,并将剪裁的图片返回 2、思路:使用cropperjs制作一个剪裁组件 3、实现: 引入依赖 npm install cropperjs 引入到页面 import Cropper from "cropperjs" 页面代码展示 <...
  • Vue.use(window['vue-cropper'].default) nuxt 使用方式 if(process.browser) { vueCropper = require('vue-cropper') Vue.use(vueCropper.default) } <vueCropper ref="cropper" :img="option.img" :...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,498
精华内容 599
关键字:

croppervue

vue 订阅