微信小程序前台生成图片用于分享朋友圈最终处理方案

前段时间一直在做微信小程序的，遇到了许多的坑，其中遇到了需要前台合成图片保存到相册用于分享到朋友圈。借简书记录一下最终处理方案，先看一下最终效果

234ADFADB11E71B63B6C8B88DE493547.png

该文章的所有演示代码托管与github，代码地址，微信调试工具中访问请关闭合法域名检查，开启es6转换，真机调试请打开调试vconsole

该文章处理的问题如下：

1. 微信小程序生成图片，并保存到相册
2. 微信小程序生成图片实现响应式
3. 微信小程序canvas原生组件如何给画布增加css动画
4. 保存高清分享图方案
5. 微信小程序生成图片实现单屏适应

微信小程序生成图片，并保存到相册

首先，我们希望能实现如下功能，点击客户头像，从底部弹出一个分享弹窗，可以保存合成图片到相册，可以关闭弹层

我们将该功能封装成一个Component自己设置组件

定义wxml基本结构

<code >    <image class="canvas" src="{{imageFile}}" />    <view class="footer">      <view class="save" bindtap="handleSave">保存到相册</view>      <view class="close" bindtap="handleClose">关闭</view>    </view>  </view></view>

修改wxss样式表

.share .content {  // 省略其余定义  // 新添加缩放中心控制为顶部中心  transform-origin: 50% 0;}

整体分享遇到的坑都得到理解决，代码较多，所有的代码都托管到了github，欢迎访问运行代码地址，只有亲力亲为才能真正的掌握知识