vue图片裁剪与文档

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"