Skip to content
移动端图片裁剪工具
Branch: master
Clone or download
Teo
Latest commit fa55cc3 Mar 25, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist fix: 修复比例参数无效问题 Mar 25, 2019
src fix: 修复比例参数无效问题 Mar 25, 2019
.babelrc init Feb 14, 2019
.gitignore init Feb 14, 2019
LICENSE
README.md
index.html fix: 修复比例参数无效问题 Mar 25, 2019
package.json
rollup.config.js init Feb 22, 2019

README.md

Clipic.js

avatar avatar

移动端图片裁剪工具,适用于上传头像并裁剪成指定尺寸

用手机访问此页面体验:https://teojs.github.io/clipic

或者用手机扫此二维码进入

avatar

npm 方式

$ npm install clipic

在 vue 项目里使用

// xxx.vue
<template>
  <img :src="base64" />
  <input type="file" name="file" accept="image/*" @change="uploadImg" />
</template>
<script>
  import Clipic from 'clipic'
  const clipic = new Clipic()
  export default {
    data () {
      return {
        base64: ''
      }
    }
    methods: {
      uploadImg(event) {
        const files = event.files
        const reader = new FileReader()
        reader.readAsDataURL(files[0])
        reader.onload = img => {
          clipic.getImage({
            width: 500,
            height: 400,
            src: img.target.result,
            onDone: base64 => {
              this.base64 = base64
            }
          })
        }
        event.value = ''
      }
    }
  }
</script>

cdn 方式

<!-- xxx.html -->
<script src="https://unpkg.com/clipic/dist/clipic.min.js"></script>
<script>
  var clipic = new Clipic()
  clipic.getImage({
    width: 500,
    height: 400,
    // ratio: 4 / 3,
    src: 'xxx',
    type: 'jpeg',
    quality: 0.8,
    onDone: function(base64) {
      // ...
    },
    onCancel: function() {
      // ...
    }
  })
</script>

参数说明

  • width:Number (默认:500) -- 裁剪宽度
  • height:Number (默认:500) -- 裁剪高度
  • ratio:Number (可选) -- 裁剪的比例,当传入ratiowidth/height将无效
  • src:String (必传) -- 需要裁剪的图片,可以是图片链接,或者 base64
  • type:String (默认:jpeg) -- 裁剪后图片的类型,仅支持 jpeg/png 两种
  • quality:Number (默认:0.9) -- 压缩质量
  • buttonText:Array (默认:['取消', '重置', '完成']) -- 底部三个按钮文本
You can’t perform that action at this time.