微信小程序之头像裁剪,添加字幕,生成新图片下载等 解决真机调试和开发者工具 图片不显示等问题
个人感觉真机调试 和开发者工具 在处理图片上 好多人说的 不一致的问题 就是主要是 在上传文件的方式的问题 此处(最后一步在画布上进行绘画的时候)只要判断了图片的来源 并且根据不同的来源去 drawImage 那么真机调试 和开发者工具 显示的结果都是一致的,经过本人多次测试,没有出现不一致的情况
首先第一步 2个选择 1微信获取头像 2上传头像 1比较简单 直接用button组件获取一下头像 就好,此处有坑
默认获取的头像为 132* 132的 比较小 在新的画布上画的 话 要么画的比较小 要么稍微 扩大点 头像就显示 模糊了
官方文档 说的是 0 代表132* 132 经过测试 尺寸 0>132>96>64>46 此处巨坑[email protected]!! 一开始只看了文档 没测试0 !! 连续搞了一天才发现 天坑!!
2 采用的是 一个组件 we-copper
使用该组件 可以 划定 图片的 选定范围 嗯比较简单 不做详细描述
下一步 选择口号 简单的参数传递 不做详细描述
下一步 生成图片 以及下载 此处坑多 容我细细道来
首先判断 你的头像是 本地上传的 还是 直接使用的微信头像 ,
此处提供简单的判断方法 直接截取 传过来的微信头像的 前5个字符 如果是 https 那么就是 下列 2情况 否则是1情况
1如果是本地上传的 那么 可以直接在画布上 就是drawImage 上使用path
2 如果是微信头像 那么首先你要 用 wx.downfile 下载这个文件到本地在操作 ;只要是https(微信不允许请求http此处忽略) 开头的 都需要下载 下载了 在画布上 drawImage 使用下载后成功返回的 res.tempFilePath 就可实现
其余下载啥的 基本简单 没啥问题!!