zoukankan      html  css  js  c++  java
  • vue-cropperjs 图片裁剪上传功能使用方法记录

    引入:

    官网:https://www.npmjs.com/package/vue-cropperjs

    控制台输入:

    npm install --save vue-cropperjs

    vue 项目中引入:

    import Cropper from 'cropperjs'
    
    let projectEditVue = new Vue({
      el: '#detailEdit',
      delimiters: ['{[', ']}'],
      components: {
        Cropper,
      },
      data () {
        return {}
      }
    })
    
    Vue.use({
      projectEditVue,
    })

    初始化裁剪框:

     html:

    js:

    mounted () {
        // 初始化裁剪框
        var image = document.getElementById('image')
        this.cropper = new Cropper(image, {
          guides: false, // 是否在剪裁框上显示虚线
          aspectRatio: 420 / 213, // 设置剪裁容器的比例
          minContainerHeight: 319.5,
          minContainerWidth: 630,
          dragMode: 'move', // 移动 canvas
          zoomOnWheel: true, // 是否允许通过鼠标滚轮来缩放图片
          background: true, // 是否在容器上显示网格背景
          rotatable: true, // 是否允许旋转图片
          ready () {
            this.cropper.crop()
          },
        })
    },  

    上传图片:

        confirm () {
          let vm = this
          vm.cropper.getCroppedCanvas({
             420,
            height: 213,
            fillColor: '#fff',
            imageSmoothingEnabled: false,
            imageSmoothingQuality: 'high',
          }).toBlob(function (blob) {
            let croppedImage = new File([blob], vm.logoName, { lastModified: Date.now() })
            api.media.uploadImageTo('project_logo')({
              file: croppedImage,
            }).then((response) => {
              if (response.status === 200) {
                let res = response.data.data[0]
                vm.cropper.replace(res.download_url)
              }
            })
          })
        },
    

      

    下面说下放大缩小左右旋转的裁剪工具:

      根据 html 那张图可见,给四个工具图片绑定四个事件,分别是:zoomIn  zoomOut  rotateLeft  rotateRight, 对应的方法写法为:

    zoomIn () {
      this.cropper.zoom(-0.1)
    },
    zoomOut () {
      this.cropper.zoom(0.1)
    },
    rotateLeft () {
      this.cropper.rotate(-90)
    },
    rotateRight () {
      this.cropper.rotate(90)
    }, 
  • 相关阅读:
    3747 [POI2015]Kinoman
    1303 [CQOI2009]中位数图
    3769 [spoj 8549] BST again
    1015 [JSOI2008]星球大战starwar
    1193 [HNOI2006]马步距离
    合并Git仓库不相关历史版本解决方案
    vue-cli项目实现动态锚点定位
    jQuery加css3实现菜单栏组件(可无限添加子列表)
    JavaScript文件转成base64编码
    Ajax获取服务器响应头部信息
  • 原文地址:https://www.cnblogs.com/zhangym118/p/10986280.html
Copyright © 2011-2022 走看看