浅析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)
    })
},