小程序echarts+canvasdrawer实现页面转化图片并保存到相册

MonoLog 发布于2019-08-05 15:50 / 2328人阅读

摘要：小程序实现页面转化图片并保存到相册场景小程序测试活动，实现雷达图展示不同的结果微信头像二维码测试结果文字，最终绘制出一张图片用户保存相册。圆形头像建议切镂空图覆盖，，有很难实现效果建议查看微信小程序社区的帖子。

小程序echarts+canvasdrawer实现页面转化图片并保存到相册

场景：小程序测试活动，实现echarts雷达图展示不同的结果、微信头像、二维码、测试结果文字，最终绘制出一张图片用户保存相册。考虑到开发时间及各种坑使用了canvasdrawer组件，其中开发过程中遇到的一些问题总结。

1.安卓部分机型图片输出不执行

安卓输出图片错位问题同样异步解决

measureText注意线上版本库1.9.1+

//业务层代码
let that = this
    // 保存图片到临时的本地文件
    //注意chart初始化实例不能输出图片
    const ecComponent = this.selectComponent("#mychart-dom-graph");//获取echarts组件
    ecComponent.canvasToTempFilePath({
    //安卓机型此处不会成功回调
      success: res => {
        that.eventDraw(res.tempFilePath)
      },
      fail: res => console.log("失败", res)
});

//ec-canvas.js源码
canvasToTempFilePath(opt) {
      if (!opt.canvasId) {
        opt.canvasId = this.data.canvasId;
      }
      const system = wx.getSystemInfoSync().system
      ctx.draw(true, () => {//此处微信api在安卓部分机型不会回调 ，相反ctx.draw(false)清空画布会执行，导致echarts已经绘制画布清空，输出为空图片         
          wx.canvasToTempFilePath(opt, this);
      });  
    }
//修改后
canvasToTempFilePath(opt) {
      if (!opt.canvasId) {
        opt.canvasId = this.data.canvasId;
      }
      const system = wx.getSystemInfoSync().system
      if (/ios/i.test(system)) {
        ctx.draw(true, () => {          
          wx.canvasToTempFilePath(opt, this);          
        });  
      } else {//针对安卓机型异步获取已绘制图层
      ctx.draw(true,()=>{
        //断点打印依旧不会执行setTimeout(() => {wx.canvasToTempFilePath(opt, this);}, 1000);}});
        ctx.draw(true);
        setTimeout(() => {//延迟获取
          wx.canvasToTempFilePath(opt, this);
        }, 1000);
      }
    },

2.onReady动态修改echarts[options]失败

 onReady: function() {
    let that = this;
    setTimeout(() => {//异步解决echarts实例没有加载成功的无法设置options
      option.series[0].data[0].value = that.data.canvasListData
      chart.setOption(option);
    }, 500);
  }

//提前声明变量
let chart = null;
var option = {}

3.网络图片需下载到本地，注意配置downloadFile合法域名，尤其是微信头像链接 4.相册授权拒绝后，button不会再次弹出授权弹窗，openSetting强制打开设置开启授权。 5.圆形头像建议切镂空图覆盖，rect，clip有bug很难实现UI效果

建议查看：微信小程序社区的帖子。

6.cancvas要画2倍图，否则输出图片模糊 参考

ECharts 的微信小程序版本。

小程序在安卓手机上绘制canvas，文字错乱。

drawImage画图在Android真机上显示空白

安卓 canvas组件draw函数的回调不执行

wx.canvasToTempFilePath安卓手机无法生成图片

安卓手机获取不到canvasToTempFilePath路径的图片

canvasdrawer

最后

HTML页面可以使用 html2canvas转换节点生成图片保存

基于html2canvas实现网页保存为图片及图片清晰度优化

TIPS

由于时间限制，很多地方理解不够深刻，瑕疵很多，欢迎提出

专线服务云服务器小程序滚动到图片js php保存图片并压缩 js 图片到相册图片上传保存到服务器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/58795.html

小程序echarts+canvasdrawer实现页面转化图片并保存到相册

摘要：小程序实现页面转化图片并保存到相册场景小程序测试活动，实现雷达图展示不同的结果微信头像二维码测试结果文字，最终绘制出一张图片用户保存相册。圆形头像建议切镂空图覆盖，，有很难实现效果建议查看微信小程序社区的帖子。小程序echarts+canvasdrawer实现页面转化图片并保存到相册场景：小程序测试活动，实现echarts雷达图展示不同的结果、微信头像、二维码、测试结果文字，最终绘...

Doyle 2019-08-23 14:16 评论0 收藏0
小程序中echarts+canvas 合成图片保存下载

摘要：再网上参考了一篇文章小程序实现页面转化图片并保存到相册根据这篇文章的内容，修改源码，针对安卓机型写了兼容的配置，如果你的页面只有一个图表，就完全可以成功转换了，如果是多个请修改的源码，方法选择就可以了。最近做的小程序项目在echarts合成图片的时候遇到了一些问题，综合了很多网友的经验，在此分享一下我的经历，如有错误，欢迎指正。 1.在小程序中引入echarts组件请参考 echa...

neu 2019-08-26 10:12 评论0 收藏0
小程序中echarts+canvas 合成图片保存下载

摘要：再网上参考了一篇文章小程序实现页面转化图片并保存到相册根据这篇文章的内容，修改源码，针对安卓机型写了兼容的配置，如果你的页面只有一个图表，就完全可以成功转换了，如果是多个请修改的源码，方法选择就可以了。最近做的小程序项目在echarts合成图片的时候遇到了一些问题，综合了很多网友的经验，在此分享一下我的经历，如有错误，欢迎指正。 1.在小程序中引入echarts组件请参考 echa...

junnplus 2019-08-05 17:39 评论0 收藏0
一个小时快速搭建微信小程序

摘要：第一步搭开发环境首先，我们需要在本地搭建好微信小程序的开发环境。在微信小程序中，所有的网络请求受到严格限制，不满足条件的域名和协议无法请求。第五步配置微信小程序云端示例镜像中，已经部署好了，但是还需要在下修改配置中的域名证书私钥。「小程序」这个划时代的产品发布快一周了，互联网技术人都在摩拳擦掌，跃跃欲试。可是小程序目前还在内测，首批只发放了 200 个内测资格（泪流满面）。本以为没有...

izhuhaodev 2019-08-20 11:23 评论0 收藏0
一个小时快速搭建微信小程序

摘要：第一步搭开发环境首先，我们需要在本地搭建好微信小程序的开发环境。在微信小程序中，所有的网络请求受到严格限制，不满足条件的域名和协议无法请求。第五步配置微信小程序云端示例镜像中，已经部署好了，但是还需要在下修改配置中的域名证书私钥。「小程序」这个划时代的产品发布快一周了，互联网技术人都在摩拳擦掌，跃跃欲试。可是小程序目前还在内测，首批只发放了 200 个内测资格（泪流满面）。本以为没有...

Aldous 2019-08-05 10:12 评论0 收藏0