欢迎您光临深圳塔灯网络科技有限公司!
电话图标 余先生:13699882642

网站百科

为您解码网站建设的点点滴滴

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

发表日期:2019-10 文章编辑:小灯 浏览次数:1142

小程序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倍图,否则输出图片模糊

参考

最后

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

TIPS

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

本页内容由塔灯网络科技有限公司通过网络收集编辑所得,所有资料仅供用户学习参考,本站不拥有所有权,如您认为本网页中由涉嫌抄袭的内容,请及时与我们联系,并提供相关证据,工作人员会在5工作日内联系您,一经查实,本站立刻删除侵权内容。本文链接:http://www.dengtar.com/23960.html
相关小程序
 八年  行业经验

多一份参考,总有益处

联系深圳网站公司塔灯网络,免费获得网站建设方案及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

业务热线:余经理:13699882642

Copyright ? 2013-2018 Tadeng NetWork Technology Co., LTD. All Rights Reserved.