微信小程序canvas生成图片保存到本地 部分全面屏手机显示出生成的图片

问题总结：

    1，canvas生成的图片隐藏不了（下文解决）

    2，网络图片开发工具显示但是真机显示不了 （下文解决）

    3，canvas生成的图片清晰度问题 jpg （图片的质量，目前仅对 jpg 有效。取值范围为 (0, 1]，不在范围内时当作 1.0 处理）

    4, 图片等比例根据规定最大尺寸进行缩放 保证原图能在规定区域显示完全（我们的需求 也有要截取图片部分显示的要求）

生成前的效果：

生成后的效果

wxml文件代码部分

wxss文件代码部分

我第一次的写法是下面这种，这样保存的时候能捕获到canvas还能不在页面中显示出来

但是在全面屏手机上在页面最下面出现了生成图片，如下页脚底部出现了图片我明明在wxss中 width:0 height:0 overflow:hidden

最后我的解决办法是wxss修改成：

简单暴力哈哈  （尝试过z-index 但是不行的微信小程序里面原生组件最高级不生效的）

js部分

     生成图片那部分

然后用 context.drawImage api就可以完成了。具体的画图去查具体的api很方便的

我遇到过一个小问题就是 网络地址图片直接drawImage在开发工具显示正常但是真机不显示。需要把网络图片转成本地调用下图标出来的小程序api，然后就可以在真机和工具李看到了

下载图片：