cropperjs实践及中文文档

2021-11-25  本文已影响0人  安北分享

cropperjs是一款非常强大却又简单的图片裁剪工具,它可以进行非常灵活的配置,支持手机端使用,支持包括IE9以上的现代浏览器。(关键是使用方法简单,几行代码就可以搞定)
官方文档
官网示例:https://fengyuanchen.github.io/cropper/
官方github文档:https://github.com/fengyuanchen/cropperjs
npm官方网站:https://www.npmjs.com/package/cropper

实践效果图

如图,可以对指定的图片进行裁剪,可以自己选择裁剪的交互方式,如大小、纵横比等 还可以预览裁剪区域,确认裁剪后可以生成一个包含裁剪图的canvas对象,借助canvas的toDataURL方法可以生成一张Base64格式的图片。还有另外一种不使用canvas的方式,利用该工具丰富的api可以拿到裁剪区域相对于原图的各项数据,使用这些数据进行css绝对定位即可展示裁剪后的图,该方式可以保证图片不失真和完整。

image.png

首先安装npm包:
npm i cropper -S

实践关键代码

用vue框架做了一个小demo,使用方法非常简单,关键就是要了解这个工具丰富的能力,并且知道何时使用它。

<template>
  <div class="hello">
    <p>预览</p>
    <div class="before"/>
    <button
      style="margin: 30px auto;"
      type="error"
      @click="sureSava">裁剪</button>
    <div class="container">
      <div class="img-container">
        <img
          ref="image"
          src="../../../assets/test.jpg"
          alt="">
      </div>
      <div class="afterCropper">
        <img
          :src="afterImg"
          alt="">
      </div>
    </div>
    <!-- <button @click="get"></button> -->
  </div>
</template>

<script>
import Cropper from 'cropperjs'
import 'cropperjs/dist/cropper.css'
export default {
  name: 'HelloWorld',
  data () {
    return {
      myCropper: null,
      afterImg: '',
      ingData: null
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      this.myCropper = new Cropper(this.$refs.image, {
        viewMode: 1,
        dragMode: 'none',
        initialAspectRatio: 1,
        aspectRatio: 1,
        preview: '.before',
        background: false,
        autoCropArea: 0.6,
        zoomOnWheel: false
      })
    },
    sureSava () {
      this.afterImg = this.myCropper.getCroppedCanvas({
        imageSmoothingQuality: 'high'
      }).toDataURL('image/jpeg')
      this.myCropper.getCropBoxData() // 获取裁剪框数据

      console.log(this.myCropper.getCropBoxData(), '6666')
      console.log(this.myCropper.getCanvasData(), '获取图片数据55555')
      // this.myCropper.setCropBoxData({
      //   left: 33,
      //   top: 71.60000000000002,
      //   width: 183.79999999999998,
      //   height: 183.79999999999998
      // }) // 设置裁剪框数据
    }

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.container{
  display: flex;
}
.before{
  width: 100px;
  height: 100px;
  overflow: hidden;
  /* 这个属性可以得到想要的效果 */
}
.img-container{
  height: 400px;
  overflow: hidden;
}
.afterCropper{
  flex: 1;
  margin-left: 20px;
  border: 1px solid salmon;
  text-align: center;
}
.afterCropper img{
  width: 150px;
  margin-top: 30px;
}
</style>

官方文档
官网示例:https://fengyuanchen.github.io/cropper/
官方github文档:https://github.com/fengyuanchen/cropperjs
npm官方网站:https://www.npmjs.com/package/cropper

官方文档通俗易懂,我自己按照理解简单的翻译了一下,懒得翻译的可以参考一下,可能有不准确的地方,请自行判断,尤其是对容器(container)、图片容器(canvas)、图片(image)、裁剪区域(crop box)这几个概念的区分,有几个地方可能不对,先看这张图理解下:

image

下面是文档

cropper - 裁剪图片 - IE9+

使用 cropperjs

import Cropper from 'cropperjs'
import 'cropperjs/dist/cropper.css'
this.myCropper = new Cropper('被裁剪对象', '配置对象') //返回一个cropper对象

this.myCropper.getCroppedCanvas().toDataURL('image/jpeg') //拿到裁剪后的base64的图片
this.myCropper.getCropBoxData();    //获取裁剪框数据
this.myCropper.setCropBoxData();    //设置裁剪框数据
this.myCropper.getCanvasData();      //获取图片数据
this.myCropper.setCanvasData();      //设置图片数据

配置对象

https://github.com/fengyuanchen/cropperjs
注意:第一个值为默认值

方法

注意:如果方法没有被设置返回任何值,那么它会返回一个cropper的实例 因此多个方法可以使用链式写法

事件

上一篇 下一篇

猜你喜欢

热点阅读