微信小程序之头像裁剪,添加字幕,生成新图片下载等 解决真机调试和开发者工具 图片不显示等问题

个人感觉真机调试 和开发者工具 在处理图片上 好多人说的 不一致的问题 就是主要是 在上传文件的方式的问题 此处(最后一步在画布上进行绘画的时候)只要判断了图片的来源 并且根据不同的来源去 drawImage  那么真机调试 和开发者工具 显示的结果都是一致的,经过本人多次测试,没有出现不一致的情况

首先第一步 2个选择 1微信获取头像 2上传头像       1比较简单 直接用button组件获取一下头像 就好,此处有坑

默认获取的头像为 132* 132的  比较小 在新的画布上画的 话 要么画的比较小 要么稍微 扩大点 头像就显示 模糊了 

官方文档 说的是  0 代表132* 132   经过测试  尺寸 0>132>96>64>46 此处巨坑!@!!  一开始只看了文档 没测试0 !! 连续搞了一天才发现 天坑!!

2 采用的是 一个组件 we-copper 

使用该组件 可以 划定 图片的 选定范围 嗯比较简单 不做详细描述 

下一步  选择口号 简单的参数传递 不做详细描述

下一步 生成图片 以及下载 此处坑多 容我细细道来

首先判断 你的头像是 本地上传的 还是 直接使用的微信头像 ,

此处提供简单的判断方法 直接截取 传过来的微信头像的 前5个字符 如果是 https 那么就是 下列 2情况 否则是1情况

1如果是本地上传的 那么 可以直接在画布上 就是drawImage 上使用path

2 如果是微信头像  那么首先你要 用 wx.downfile 下载这个文件到本地在操作 ;只要是https(微信不允许请求http此处忽略) 开头的 都需要下载 下载了    在画布上 drawImage  使用下载后成功返回的 res.tempFilePath 就可实现

其余下载啥的 基本简单 没啥问题!!