微信小程序小功能分享一( canves制图之后台base64图片转为微信临时文件)

大家好,这是我第一次分享博客,我叫小瑾轩,一名成都的程序员,小程序这两年发展迅速,尤其它的裂变分享能力很有潜力,最近一段时间一直在做电商项目,属实踩了好多坑,最近想整理一下,若有不足,欢迎评论,我们共同进步.
首先交代下背景，为突出分享，前端某些页面需要制作分享海报（受制于微信目前不支持分享至朋友圈，当然有些大佬已经有好的曲线方案，此处不做评价延伸），需要用到canvas(此处还不太熟悉的同学先去了解下canvas基本方法，小程序中canvas与h5通用方法一致)，后台传过来的图片形式大多数情况为网络存储地址（如七牛云地址）及base64地址，如果为第一种则只需进行一步图片信息识别即可在本地使用,官方有专用方法如下
wx.getImageInfo({
src: ‘后台返回的网络地址’,
success: function (res) {
// console.log(res.path)
// resolve(res);
}
})
获取到信息后,即可在成功回调中将地址再canvas中加以使用,上图中的resolve方法就是本人在进行canvas绘图过程中写的一个promise,毕竟海报需要多张图片共同请求完毕才能进行绘图,但要是后台返回base64位( 例如微信返回的小程序码 )就很麻烦了,我们需要先转一下,(有些仁爱的后台会直接帮你转给网络地址，而我刚好没有这种别人家的后台 )这个我也没搞懂为啥base64位地址不行,明明在页面做image标签显示地址还是可以的,好,那我们需要这样
// base64转本地文件地址
function base64src(base64, cb) {
var imgurl = ‘’;
const FILE_BASE_NAME = ‘tmp_base64src’;
var fileManager = wx.getFileSystemManager()
const [, format, bodyData] = /data:image/(\w+);base64,(.*)/.exec(base64) || [];
if (!format) {
return (new Error(‘ERROR_BASE64SRC_PARSE’));
}
const filePath = ${wx.env.USER_DATA_PATH}/${FILE_BASE_NAME}.${format};
const buffer = wx.base64ToArrayBuffer(bodyData);
fileManager.writeFile({
filePath,
data: buffer,
encoding: ‘binary’,
success() {
imgurl = filePath;
// console.log(imgurl)
wx.getImageInfo({
src: imgurl,
success: function (res) {
cb(res);
}
})
return imgurl
},
fail() {
return (new Error(‘ERROR_BASE64SRC_WRITE’));
},

});

}
由于此方法用处较多,所以我进行了单独分装cb()即回调方法,用语我后期拿着转后的地址进行和普通网络图片地址一样的绘图操作,在获取到base64地址后,就可以立即使用base64img(base64, resolve),
接下来我们就可以将多个promoise成功方法reselve中的地址进行使用
Promise.all(
[promise1, promise2, promise3, promise4]
).then(res => {
// 保证需要用到的图片地址均已请求完毕且可用,接下来就可以开始愉快的绘图了
}
过程还是很简单的，但是在找方法时也很头大，拗不过后台只好自己尝试和改进各种方法，其实主要方法也是网上找的，自己稍作改进，如果你也有这种大哥级后台，还是和我一样好好这样做吧，后续我会继续更新我的电商类小程序常用方法和模块，欢迎关注。

微信小程序小功能分享一( canves制图之后台base64图片转为微信临时文件)相关推荐

微信小程序将支持分享到朋友圈；美团入局社区团购；Kotlin 1.4-M3 发布 | 极客头条
整理 | 屠敏头图 | CSDN 下载自东方 IC 「极客头条」-- 技术人员的新闻圈! CSDN 的读者朋友们早上好哇,「极客头条」来啦,快来看今天都有哪些值得我们技术人关注的重要新闻吧. 一分钟 ...
nodejs实现微信小程序支付功能及相关问题总结
最近使用nodejs作为服务器,搭建了一个微信小程序.其中的微信支付功能是比较复杂的一部分.不过只要我们能掌握微信支付的工作流程,那实现这个功能也不会很难的.下面分享此次微信支付的实现经历. 开发文档 ...
html打开微信搜索页,微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)...
上效果图: 一:搜索框功能实现 1.在首页做一个搜索框的样式并实现跳转到搜索页面搜索 .search{ width: 80%; } .search_arr { border: 1px solid # ...
微信小程序实现转发分享功能（好友朋友圈）
微信小程序分享微信小程序已经支持分享到好友和朋友圈功能(安卓),用户在朋友圈打开分享的小程序页面,并不会真正的打开小程序,而是进入一个"小程序单页面模式"的页面: 微信小程序文档 ...
微信 php收藏功能实现,关于微信小程序收藏功能的实现
这篇文章主要介绍了微信小程序收藏功能的实现代码,基本功能是点击收藏后显示已收藏,在另一个页面出现目前点击收藏的项目.需要的朋友可以参考下需求点击收藏后显示已收藏,在另一个页面出现目前点击收藏的项目 ...
vc++6.0获取磁盘基本信息_微信小程序——常用功能2：微信小程序用户登录，申请用户授权并获取用户基本信息...
微信小程序--常用功能2:申请用户授权并获取用户基本信息为了更好的用户体验,很多时候我们想要获取用户的基本信息,从而实现将信息呈现到用户界面.给用户划分地域.给用户分类等功能. 但是要想获取用户信息 ...
微信小程序—页面内分享按钮用图标代替
微信小程序-页面内分享按钮用图标代替前言代码效果图前言张小龙不知道出于什么原因将打开客服会话.触发用户转发.打开授权设置页.打开"意见反馈"页面等功能全都挂载到butto ...
微信小程序开发案例分享-必背诗：从0到1，从前端到数据库
序大概在2018年8月份,突发的一个想法就是接触下微信小程序来练练手,虽说这个时间点微信小程序已经很火了,但想想古人说的话:"整就中咧,干就完啦".所以还是坚持走一遍,建一个自己 ...
【源码分享】一键打开禅意生活——电子木鱼微信小程序源码分享
为大家推荐一个在线的AI聊天:魔术AI-8080n点cn界面简洁精美,免费点开即用在快节奏的现代生活中,我们需要一种方式来减轻压力和焦虑,让我们的身心得到放松和平静.电子木鱼微信小程序是一款专门为人 ...

微信小程序小功能分享一( canves制图之后台base64图片转为微信临时文件)

微信小程序小功能分享一( canves制图之后台base64图片转为微信临时文件)相关推荐

最新文章

热门文章