微信网页vue-cropper剪裁图片及其Android 端无法显示问题

1. 需求描述

vue框架下的微信网页，需要在微信体系下，实现选择手机图片裁剪上传，选择vue-cropper来实现。

2.实现流程

2.1 配置微信JSSDK权限，调用相册，获取图片

首先需要采用微信的JSSDK来在微信中实现调用相册，并且选择图片的功能。具体实现步骤为这篇文章

2.2 安装vue-cropper插件并引用

安装插件：npm install vue-cropper
创建组件photoCutBox.vue 并在其中引用：

import { VueCropper }  from 'vue-cropper'

2.3 按照需求自定义配置，完成剪裁组件

自定义配置：

<template>
  <div class="photocutbox" v-if="isShowCut">
    <div class="phcut_wrap">
      <div class="phcut_wrap_box">
        <VueCropper ref="cropper"
            :img="imgurl"
            :fixedNumber="cutSize"
            :outputSize="option.size"
            :outputType="option.outputType"
            :info="true"
            :full="option.full"
            :canMove="option.canMove"
            :canMoveBox="option.canMoveBox"
            :original="option.original"
            :autoCrop="option.autoCrop"
            :fixed="option.fixed"
            :centerBox="option.centerBox"
            :infoTrue="option.infoTrue"
            :fixedBox="option.fixedBox"
            :autoCropWidth="option.autoCropWidth"
            :autoCropHeight="option.autoCropHeight"
				>

        </VueCropper>
      </div>

      <div class="phcut_wrap_bottom">
        <div @click="clickCancel">取消</div>
        <div @click="clickOK">确定</div>
      </div>
    </div>
  </div>
</template>

2.4 在页面调用组件

在需要页面中调用组件，并使用。

import photoCutBox from '@/components/photoCutBox'


components:{photoCutBox}

<photoCutBox :imgurl="cutimgurl" :isShowCut.sync="isShowCut" :cutSize="[1,1]" @finish="cutPhotoFinish"></photoCutBox>

按照逻辑，通过wx.chooseImage选择图片后，将该方法返回的localIds传入剪裁框，并且控制剪裁框显示，将出现剪裁框。

点击确定，调用vue-cropper中的方法，获取图片Base64数据.

//获取截图的base64 数据
this.$refs.cropper.getCropData((data) => {
  console.log(data)  
})

最终获得剪裁后的图片Base64数据。

3.Android 图片无法显示问题

测试发现iOS中功能正常，但Android中剪裁框无法显示选择的图片。

3.1 原因

在微信的JSSDK中，wx.chooseImage 调用相册选择图片接口，返回的是localIds（返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片）。该id在android的img标签中是可以直接用src赋值呈现图片的，而iOS中需要通过其转成Base64数据才可以在img标签显示。
经过测试：在Android中，vue-cropper的图片呈现img标签，是无法显示localIds的id的图片的，需要跟iOS一样，需要转换成base64数据才能显示，这就是Android无法显示的原因。

3.2 解决方法

iOS端在wx.chooseImage 后需要调用wx.getLocalImgData来转换成Base64来显示。那么Android端也要转换成Base64来才能在vue-cropper中显示，那么也调用wx.getLocalImgData。但Android 中调用该方法返回的数据是不正确的，因为缺少base64数据头，因此需要做如下处理：

        this.$wx.getLocalImgData({
          localId: ids, // 图片的localID
          success:res=>{
            var localData = res.localData; //localData是图片的base64数据，可以用img标签显示
            if(!this.$store.state.isIphone){ // Android端处理数据
              localData = localData.replace(/\r|\n/g, '').replace('data:image/jgp', 'data:image/jpeg')
              localData = "data:image/jpg;base64," + localData;
            }
            return localData;
          }
        });

用此方法转换的Base64数据，将可以在vue-cropper中显示。解决android 中无法显示图片的问题。