在进行uniapp跨平台开发时，遇到了一个问题：
需要将当前页面所有的视图转化为图片保存进系统相册、或者进行其他功能的实现。因为做web前端开发也不到一年时间，进行过多次摸索，尝试过很多方法，最终将此问题解决。
我们都知道convas，即画布有直接的官方api将当前的context转化为image，那我们为何不采用这个方式，将我们的视图页面渲染进这个convas中呢？在此思路的明确引导下，进行了尝试，最终如愿以偿。其实，再多想一下，总结一下，普通的view视图不就是面向我们前端开发人员进行视图的配置的吗？CSS样式按照我们的所看即所写的方式实现设计效果图，渲染引擎再将这些view绘制渲染到一个convas中吗？
那么我们如何将复杂的页面视图绘制进convas呢？
我们在页面中实现一个视图dom如下：
<view class="image-cs">
<canvas canvas-id="qrcodeCanvas"></canvas>
</view>
相应的css如下：主要作用为初始化画图的大小，为以后的JS方法实现提供便利。
.image-cs{
height: 514px;
width: 300px;
}
逻辑代码如下，在合适的生命周期方法中调用canvasInit()方法，创建画布上下文。因为我的页面从下到下，分为3部分，
顶部：一个自定义的封面图片，可以为远程图片。
中间：小程序商家logo，本地图片，亦可以为远程图片
扫描二维码关注公众号，回复：
10876514 查看本文章
下部：小程序连接太阳码
增加了一个像素的边框，属于设计需要。
