美文网首页
小程序生成朋友圈图片

小程序生成朋友圈图片

作者: shangyunsi | 来源:发表于2018-05-23 10:33 被阅读0次

通过getImageInfo获取图片信息, canvasToTempFilePath要放在draw方法的回调中,并通过settimeout设置一定的延迟时间,否则会生成透明图片

function(){
wx.getImageInfo({
      src: 'http://benditoutiao.oss-cn-hangzhou.aliyuncs.com/fore-end/firstblood/logo-2x.png',
success: (res) => {
        const ctx = wx.createCanvasContext('shareCanvas');
        ctx.drawImage(res.path, 0, 0, 400, 600)
        ctx.setTextAlign('center')
        ctx.setFillStyle('#000000')
        ctx.setFontSize(50)
        ctx.fillText('Hello', 100, 100)
        ctx.fillText('MINA', 100, 200)
        ctx.stroke()
        ctx.draw(false, setTimeout(() => {
          wx.canvasToTempFilePath({
            canvasId: 'shareCanvas',
            success: (res) => {
              this.setData({
                showShareImg:true,
                shareImg: res.tempFilePath, 
              });
            },
            fail: function (err) {
              console.log('失败')
              console.log(err)
            }
          })
        }, 100));
      }
    })
}
 //调用saveImage方法,将图片储存到用户相册中
  wx.saveImageToPhotosAlbum({
      filePath:this.data.shareImg,
      success:(res)=>{
          wx.showModal({
            title: '存图成功',
            content: '图片成功保存到相册',
            showCancel:false,
            confirmText:'确定',
            confirmColor:'#72B9C3',
            success: res=> {
                if (res.confirm) {
                    console.log('用户点击确定');
                }

                this.setData({
                  showShareImg:false,
                })
            }
        })
      }
    })

相关文章

网友评论

      本文标题:小程序生成朋友圈图片

      本文链接:https://www.haomeiwen.com/subject/oualjftx.html