【微信小程序】裁剪头像插件

用户上传头像，需要裁剪成正方形，之前在网上找到的不好用，有bug，自己动手写了一个，欢迎来找bug。没bug那咱们就放心用吧。

2022-11-07新增：图片裁剪框外背景移动和停止的时候加了不同的背景透明度。

参数介绍：

imageUrl：需要裁剪的图片链接
show：是否显示裁剪图片组件

wxml调用：

<avatar-cropper imageUrl="{
    {image_url}}" bind:returnImageUrl="returnImageUrl"  show="{
    {showCutImage}}" ></avatar-cropper>

js调用：

returnImageUrl: function (e) {
   
	//e.detail.imageUrl,e.detail.showCutImage  
}

wxml代码：

<view class="container" wx:if="{
    {show}}">
  <view class="top {
    {moving?'bg-5':'bg-9'}}" style="height:{
       {
       (systemInfo.windowHeight-300)/2}}px;"></view>
  <view class="left {
    {moving?'bg-5':'bg-9'}}" style="width: {
       {
       (systemInfo.windowWidth-300)/2}}px;top: {
       {
       (systemInfo.windowHeight-300)/2}}px;height: 300px;"></view>
  <view class="right {
    {moving?'bg-5':'bg-9'}}" style="width: {
       {
       (systemInfo.windowWidth-300)/2}}px;top: {
       {
       (systemInfo.windowHeight-300)/2}}px;height: 300px;"></view>
  <view class="bottom {
    {moving?'bg-5':'bg-9'}}" style="top:{
       {
       (systemInfo.windowHeight-300)/2+300}}px;"></view>
  <canvas canvas-id="myCanvas" class="canvas">
    
  </canvas>
  <movable-area scale-area class="movable-area" style="top: {
       {
       (systemInfo.windowHeight-300)/2}}px;left