微信小程序之canvas画图生成图片下载

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序之canvas画图生成图片下载相关的知识,希望对你有一定的参考价值。

要实现的功能:
技术分享图片
点击朋友圈按钮弹出分享图片:
技术分享图片
点击保存分享图片保存到手机
实现代码:
1.分享按钮点击事件

/**
   * 分享
   */
  weixinShare:function(){
    var that = this;
    console.log(111);
    share.canvasImg((res)=>{
      console.log(222);
      that.setData({
        imagePath: res.tempFilePath,
        bgShare:false,
        left:43
      });
    });
  }

2.生成图片

/**
   * 绘制分享图片
   */
  canvasImg(callback){
    //小程序二维码
    let promise1 = new Promise(function (resolve, reject) {
      /* 获得要在画布上绘制的图片 */
      wx.getImageInfo({
        src: ‘/images/qrcode.png‘,
        success: function (res) {
          console.log(res)
          resolve(res);
        }
      })
    });
    //背景图像
    let promise2 = new Promise(function (resolve, reject) {
      wx.getImageInfo({
        src: ‘/images/bg1.png‘,
        success: function (res) {
          console.log(res)
          resolve(res);
        }
      })
    });
    //用户头像
    let promise3 = new Promise(function (resolve, reject) {
      wx.getImageInfo({
        src: ‘/images/logo.png‘,
        success: function (res) {
          console.log(res)
          resolve(res);
        }
      })
    });
    Promise.all(
      [promise1, promise2, promise3]
    ).then(res => {
      const ctx = wx.createCanvasContext(‘shareWeixin‘)
      ctx.setFillStyle(‘#FFFFFF‘);
      ctx.fillRect(0,0,500,600);
      ctx.drawImage(‘../../../‘ + res[0].path, 220, 321, 100, 100)
      ctx.drawImage(‘../../../‘ + res[1].path, 0, 0, 331, 252)
      ctx.drawImage(‘../../../‘ + res[2].path, 10, 275, 30, 30)
        // 绘制文字 位置自己计算 参数自己看文档
      // ctx.setTextAlign(‘left‘)  //  位置

      ctx.setFillStyle(‘#000000‘)   //  颜色
      ctx.setFontSize(15);
      ctx.fillText(‘海贼王‘,54,300);
      ctx.setFontSize(22)           //  字号
      ctx.fillText(‘生活小记者‘, 10, 341)//  内容  不会自己换行 需手动换行
      ctx.fillText(‘快来关注校园时讯‘, 10, 377) //  内容
      ctx.setFillStyle(‘#ccc‘) 
      ctx.setFontSize(15)
      ctx.fillText(‘长按识别扫码查看详情‘,10,410);
      /* 绘制 */
      ctx.stroke()
      ctx.draw(true,setTimeout(function(){
        wx.canvasToTempFilePath({
          x: 0,
          y: 0,
          width: 600,
          height: 800,
          destWidth: 600,
          destHeight: 800,
          canvasId: ‘shareWeixin‘,
          success: function (res) {
            // wx.saveImageToPhotosAlbum({
            //   filePath: res.tempFilePath,
            // })
            callback && callback(res)
          },
          fail: function (res) {
            console.log(res)
          }
        })
      },500))
    })
  }

3.保存到手机

// 保存到手机图片
  saveToPhone:function(){
    var that = this;
    // console.log(that.data.imagePath);
    // 保存到本地
    wx.downloadFile({
      url: that.data.imagePath,
      success: function (res) {
        tempFilePaths = res.tempFilePath
        wx.saveFile({
          tempFilePath: tempFilePaths,
          success(res) {
            savedFilePath = res.savedFilePath
            // console.log(‘保存路径‘);
            // console.log(savedFilePath)
            // 保存到手机
            wx.saveImageToPhotosAlbum({
              filePath: savedFilePath,
              success(res) {
                console.log(res)
                wx.showToast({
                  title: ‘成功‘,
                  icon: ‘success‘,
                  duration: 2000
                })
              },
              fail(res) {
                console.log(‘保存到手机失败‘);
                console.log(res)
              }
            })
          }
        })        
      }, fail: function (res) {
        console.log(‘保存到本地失败‘);
        console.log(res)
      }
    })
  }

5.前端代码

<!-- 分享图片 -->
<view class=‘bg-shade‘ hidden="{{bgShare}}"></view> 
<canvas style="width: 600rpx; height: 800rpx;left:{{left}}px;" canvas-id="shareWeixin" class=‘share-bg‘></canvas>
<view hidden=‘{{bgShare}}‘ class=‘preview‘>
  <image src=‘{{imagePath}}‘ class=‘shareImg‘></image> 
  <button type=‘primary‘ size=‘default‘ bindtap=‘saveToPhone‘>保存分享图</button>
</view> 

总结:

  • 画图的时候要延迟一定事件否则会生成失败,生成一张同样大小的空白图片
  • 下载图片的时候不要直接用临时的图片链接,可以先下载本地获得链接再保存
  • 使用canvas绘图的时候不能隐藏canvas,否则会报错,所以可以设置左右上下距离让他定位到屏幕外

以上是关于微信小程序之canvas画图生成图片下载的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序canvas生成图片为空白问题

微信小程序海报 uniapp

微信小程序海报 uniapp

canvas微信小程序如何导入个人微信

微信小程序中使用ec-canvas制作环状饼图

微信小程序导出当前画布指定区域的内容并生成图片保存到本地相册(canvas)