这篇文章是针对上一篇文章做出的适配性修改。
上一章剪切头像完整demo下载地址为:https://download.csdn.net/download/java558/10544752
开始之前,来张美女镇楼:
实践中发现原本的cropper框架在小米手机和华为P10系列/P20系列的剪切头像页面存在着适配问题。
小米手机上表现为宽高多出1-2px的白边;而华为P10系列手机上表现为屏幕内虚拟导航栏下滑隐藏时,会出现白色区域。
经过一系列的修改,终于解决了这些问题,修改的代码为:
1、pages下upload.js中的:
const width = device.windowWidth
const height = device.windowHeight - 50
替换为:
const width = device.windowWidth + 2
const height = device.windowHeight + 50
并且将同文件的:
data: {
cropperOpt: {
id: 'cropper',
width,
height,
scale: 2.5,
zoom: 8,
cut: {
x: (width - 300) / 2,
y: (height - 300) / 2,
width: 300,
height: 300
}
}
},
替换为:
data: {
cropperOpt: {
id: 'cropper',
width,
height,
scale: 2.5,
zoom: 8,
cut: {
x: (width - 300) / 2,
y: (height - 300 - 48 - 50) / 2,
width: 300,
height: 300
}
}
},
2、pages下upload.xml全部替换为以下代码:
<import src="../../we-cropper/dist/weCropper.wxml" />
<view class="cropper-wrapper">
<template is="weCropper" data="{{...cropperOpt}}">
</template>
</view>
3、we-cropper资源包下dist文件夹下的weCropper.wxml全部替换为以下代码:
<template name="weCropper">
<canvas class="cropper" disable-scroll="true" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" style="width:{{width}}px; height:{{height}}px; background-color: rgba(0, 0, 0, 0.8);" canvas-id="{{id}}">
<cover-view class="cropper-buttons">
<cover-view class="upload" bindtap="uploadTap">
重新选择
</cover-view>
<cover-view class="getCropperImage" bindtap="getCropperImage">
确定
</cover-view>
</cover-view>
</canvas>
</template>
至此,上面提到的所有问题都完美解决了,开心~
如果觉得还不错,来波关注呗~