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的实例 因此多个方法可以使用链式写法

事件

上一篇 下一篇

猜你喜欢

热点阅读