浅析uniapp如何做图片裁剪及遇到问题 uni.canvasToTempFilePath 在APP下返回的是临时路径，如何把路径转为base64的解决方案

一、图片裁剪

　　推荐一款轻量级图片裁剪插件 kpsImageCuster：https://ext.dcloud.net.cn/plugin?id=1076。

　　其原理就是利用 uni.canvasToTempFilePath() 把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径。

　　官方介绍见文档：uni.canvasToTempFilePath(object, component)

setTimeout(() => { this.targetContext.drawImage(this.url, x, y, width, height, 0, 0, tw, th); this.targetContext.draw(false, () => { uni.canvasToTempFilePath({ canvasId: "target", success: (res) => { var path = res.tempFilePath; // #ifdef H5
                if (this.blob) { path = this.parseBlob(path); } // #endif
                this.$emit("ok", { path: path }); }, fail: (ev) => { console.log(ev); }, complete: () => { uni.hideLoading(); } }, this); }); }, 100);

二、解决uni-app在App端上传图片时路径转Base64的问题

　　在用uni-app开发项目的时候大家都会遇到这么一个问题，就是上传图片时在App上拿到的是文件路径，然而后端要接收的却是Base64字符串。但是在App端又无法调用Web Api（例如：Blob fileReader 等），这里推荐一款可以直接将Path转为Base64的插件。

　　image-tools：插件地址  ——  https://www.npmjs.com/package/image-tools

　　uniapp的插件：https://ext.dcloud.net.cn/plugin?id=123

　　其实就是一个工具类 js，可以选取里面的方法直接拿的用

import { pathToBase64 } from '@/utils/image-tools.js'
// 需要注意的是方法返回均是 promise，得使用promise的写法
saveImg(e) { if(!e || !e.path) return pathToBase64(e.path).then(res => { this.uploadImg(res) }) },