uni-app实现图片的上传和裁剪

Myth丶恋晨 2021-08-19 18:27 3710阅读 0赞

# uni-app实现图片的上传和裁剪 #

uni-app 实现图片的上传和裁剪，插件市场上已经有作者提供了相关的插件。这里主要介绍下我在自己开发图片上传和裁剪过程中遇到的一些问题。

## 图片上传 ##

图片上传功能比较简单，uni-app官方提供了完整的API介绍和案列。但是在使用过程中有几个问题要注意。

1.  通过uni.chooseImage可以从本地或者相机中选择一张至多张照片（具体参数设置见官网说明）[uni.chooseimage][]
2.  sizeType 设置为压缩时 仅对jpg格式的图片有效。且当一次操作多张图片时，某些图片可能会丢失压缩效果。压缩比不可更改，微信小程序只能在手机上看到压缩效果，微信开发者工具无效。（其它平台未测试）
3.  由于问题2图片压缩问题，建议在上传图片至服务器时先调用uni.compressImage方法压缩图片。同理微信小程序仅可压缩jpg格式图片。改方法微信开发者工具无效，仅真机调试有效果

# 图片裁剪 #

关于图片裁剪，网上有许多五花八门的方法。但是实现的核心都是利用canvas画布。  
关于这方面的介绍推荐几个我浏览过的比较靠谱的博客：  
[uniApp实现选择图片裁剪设置用户头像][uniApp]  
[小程序的填坑小技巧之Canvas][Canvas]  
[微信小程序 canvas 实现图片拉伸、压缩与裁剪][canvas]  
[canvas裁剪原理][canvas 1]  
[原生js+canvas实现裁剪图片的功能][js_canvas]  
以上几篇文章基本上将图片裁剪的原理和方法将的比较透彻了，下面我主要记录一下我在实现上遇到的一些问题。

## 参考组件 ##

我参考的是插件市场上[可以拖动缩放的头像截取组件][Link 1]  
但是我要强调一点，该组件有很多坑，给我的感觉像是一个半成品，里面有很多方法都存在问题或者说是版本更新带来的问题，大家慎用。我才用他的原因是因为作者才用了可拖动区域来实现裁剪，给我的感觉是比其他方法操作体验更好。

### 两个错误的方法 ###

1.  uni.createCanvasContex该接口需要传递第二个参数this,具体使用方法：`let ctx = uni.createCanvasContext("picture-canvas",this);`
2.  uni.canvasToTempFilePath同样需要第二个参数this,使用方法：`uni.canvasToTempFilePath（{ }，this）`
3.  other :作者在组件的methods定义两个方法onShow和onHide和页面的生命周期函数命名冲突，需要换个名称。  
    过段时间，代码优化完成之后再贴代码！

[uni.chooseimage]: https://uniapp.dcloud.io/api/media/image?id=chooseimage
[uniApp]: https://blog.csdn.net/qq_32958797/article/details/89202865
[Canvas]: https://blog.csdn.net/qq_40126542/article/details/80317745
[canvas]: https://www.cnblogs.com/boboweiqi/p/9523793.html
[canvas 1]: https://blog.csdn.net/qq_38702697/article/details/83689001#_182
[js_canvas]: https://blog.csdn.net/wangguang1995/article/details/78873421
[Link 1]: https://ext.dcloud.net.cn/plugin?id=92