vue+cropperjs实现图片裁剪功能——PC端+移动端——技能提升

矫情吗；* 2022-09-04 11:51 423阅读 0赞

最近发现了一个图片裁剪的插件cropperjs，这个插件非常的强大，能够实现多种功能：

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

cropperjs官网：https://fengyuanchen.github.io/cropper/

我并未深入研究此插件，此篇文章只简单介绍一下等比例的裁剪功能及使用步骤。

1.安装`cropperjs`插件

npm install cropperjs --save-dev

安装完插件后，由于此插件并非很多页面都要用到，因此可以不在main.js主入口文件中全局引入，可以在需要使用图片裁剪功能的地方单独引入即可。

2.`template`部分代码

页面部分，有个原图部分+裁剪按钮+裁剪区域+裁剪后的图片部分。

<div class="before"></div>
<el-button @click="sureSava">裁剪</el-button>
<div class="container">
  <div class="img-container">
    <img src="@/assets/401_images/401.gif" ref="image" alt="" />
  </div>
  <div class="afterCropper">
    <img :src="afterImg" alt="" />
  </div>
</div>

3.`js`部分代码

import Cropper from "cropperjs";
import "cropperjs/dist/cropper.css";
export default{ 
    data(){ 
        return{ 
             myCropper: null,
               afterImg: "",
        }
    },
    created(){ 
        this.$nextTick(()=>{ 
            this.init();
        })
    },
    methods:{ 
        init(){ 
            this.myCropper = new Cropper(this.$refs.image,{ 
                viewMode:1,
                dragNode:'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');
        }
    }
}

4.`css`部分

.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;
}