微信小程序生成海报真机踩坑

在做微信小程序生成海报时出现了几个问题
1、canvas画图保存的图片不清楚；
2、真机上画海报时网络图片不显示；
3、模拟器上可以保存海报到本地，真机上保存海报到本地不成功。

1、为了解决canvas画图不清楚的问题，我用的办法是用canvas画一个大的图，用image显示小图，保存图片的时候保存canvas画的大图即可。

2、为了解决网络图片不显示用到了wx.getImageInfo

3、既需要用户开启授权，我这里生成的canvas已经是本地的，不用wx.downloadFile，直接使用wx.saveImageToPhotosAlbum即可
我原来加上了downloadFile，结果模拟器上完全没有问题，到真机上怎么也保存不成功，还提示错误，原来是图片路径，如果为网络图片使用downloadFile。

wxml文件的内容为
<view bindtap='buttonTap'>
  生成海报按钮        
</view> 
<canvas canvas-id="shareImg" style="width:750px;height:1292px" ></canvas>
<modal title="保存到图库" confirm-text="确定"  bindconfirm="modalConfirm"  bindcancel="modalCandel" >
    <image src='{{prurl}}'></image>
</modal>

js文件
data:{
  img:'../img/bg98.png',
},
onLoad:function(){
  this.loginRoca()
},
loginRoca:function(){
  var that=this;
  wx.login({
    success:function(res){
      wx.showLoading({
        title:'加载中'
      })
      that.canvas();     //画图
      that.hideLoading();
    }
  })
},
canvas:function(){
  var that=this;
  //如果有图就用本身的图，如果没有图就用本地默认的图
  if(that.data.img == ''){
    var img = '../img/bg98.png';
  }else{
    var img = that.data.img;
  }
  let promise1 = new Promise(function(resolve,reject){
    wx.getImageInfo({
      src:img,
      success:function(res){
        if(img!='../img/bg98.png'){
          that.setData({
            img:res.path       //为了防止网络图片
          })
        }
        resolve(res);
      }
    })
  });
//提示语
  let promise2 = new Promise(function(resolve,reject){
    wx.getImageInfo({
      src:‘../../img/icon@1x.png‘,
      success:function(res){
        resolve(res);
      }
    })
  });
//二维码
  let promise3 = new Promise(function(resolve,reject){
    wx.getImageInfo({
      src:that.data.ercode,
      success:function(res){
        that.setData({
          bdcode:res.path
        });
        resolve(res);
      }
    })
  });
  Promise.all([
    promise1,promise2,promise3
  ]).then(res=>{
//里面为东西的摆放位置
    ctx.drawImage(that.data.imageUrl);   // 防止网络图片
...
    ctx.stroke();
    ctx.draw();
  })
},
buttonTap:function(){
  var that=this;
  wx.showLoading({
    title:'海报生成中'
  });
  wx.canvasToTempFilePath({
    x:0,
    y:0,
    width:750,
    height:1292,
    destWidth:750,
    destHeight:1292,
    canvasId:'shareImg',
    success:function(res){
      that.setDate({
        prurl:res.tempFilePath
      })
      wx.hideLoading();
    }
  });
},
//保存到相册
modalConfirm:function(){
  var self = this;
  var e = self.data.prurl;
//保存到相册授权
    app.getPhotosAlbum(self);     //此方法写到了app.js里方便调用
    wx.saveImageToPhotosAlbum({
      filePath:e,
      success(res){
        self.modalCandel();
        wx.showToast({
          title: '保存成功',
          icon: 'success',
          duration: 2000
        }) 
      }
    })
},

最后编辑于：2019.03.16 15:46:05