原生小程序使用canvas画布放置图片并下载图片

 

 

wxml代码

<view class="download_certificate">

  <!-- <view class="certificate_img"> -->

    <!-- <image src="cloud://produce-6gykelggdea632cb.7072-produce-6gykelggdea632cb-1317432646/download.png"/> -->

    <view style="width: 700rpx;height: 500rpx;">

    <canvas type="2d" id="myCanvas" style="width: 700rpx;height: 500rpx;" />

  </view>

  <!-- </view> -->

  <van-button type="danger" size="large" custom-style="margin-top:20rpx;border-radius:20rpx;" color="#DF3535" bindtap="savaImage">下载</van-button>

</view>

js代码

 onReady() {

    this.drawCanvas()

  },

 drawCanvas() {

    //返回一个对象实例，通过实例可以获取canvas

    const query = wx.createSelectorQuery()

    query.select('#myCanvas')

      .fields({ node: true, size: true })

      .exec((res) => {

        const canvas = res[0].node

        const ctx = canvas.getContext('2d')

        this.setData({

          canvasRef: canvas

        })

        //使canvas适应各种屏幕不至于大小不同

        const dpr = wx.getSystemInfoSync().pixelRatio

        canvas.width = res[0].width * dpr // 获取宽

        canvas.height = res[0].height * dpr // 获取高

        ctx.scale(dpr, dpr)

        // 到这里就可以直接绘制

        let image = canvas.createImage(); //创建iamge实例

        image.src = this.data.src; // 引入本地图片

        image.onload = function (imginfo) {

          // 获取http图片宽高

          // const {width,height} = imginfo.path[0];

          // const aspect = width / height;

          // console.log(width,height)

          // 先不用图片宽高了

          // dpr是设备像素比

          ctx.drawImage(image, 0, 0, canvas.width / dpr, canvas.height / dpr); // 背景图

        }

      })

  },

 saveImg() {

    let that=this;

    wx.showLoading({

      title: '生成中...',

    })

    wx.canvasToTempFilePath({

      canvas: that.data.canvasRef,

      x: 0,

      y: 0,

      width: that.canvasWidth * 2,

      height: that.canvasHeight * 2,

      destWidth: that.canvasWidth * 2,

      destHeight: that.canvasHeight * 2,

      success: res => {

        wx.saveImageToPhotosAlbum({

          filePath: res.tempFilePath,

          success: res => {

            // console.log(this.saveTempFilePath)

            console.log(11111)

            wx.showModal({

              title: "保存成功！",

              content: "图片已保存到本地相册",

              showCancel: false,

              success(res) {

                if (res.confirm) {

                  wx.reLaunch({

                    url: '/pages/joinU/joinU'

                  })

                }

              }

            })

          },

          fail: err => {

            console.log(err)

          }

        })

      },

      fail: err => {

        console.log(err)

      }

    })

    setTimeout(() => {

      wx.hideLoading()

    }, 1000)

  },

当用户点击了下载图片的按钮后, 触发了以下的函数:

  savaImage() {

    let that = this;

    //获取用户保存图片权限

    wx.getSetting({

     success(res){

      if (!res.authSetting['scope.writePhotosAlbum']) {

            wx.authorize({

              scope: 'scope.writePhotosAlbum',

              success(res){

                that.saveImg()

              },

              fail(){

                wx.showModal({

                  content: '请允许相册权限,拒绝将无法正常使用小程序',

                  showCancel: false,

                  success() {

                    wx.openSetting({

                      success(settingdata) {

                        if (settingdata.authSetting["scope.writePhotosAlbum"]) {

                        } else {

                          console.log("获取权限失败")

                        }

  

                      }

                    })

                  }

                })

              }

            })

        }else{

          that.saveImg()

        }

     }

    })

  },

保存图片:

 saveImg() {

    let that=this;

    wx.showLoading({

      title: '生成中...',

    })

    wx.canvasToTempFilePath({

      canvas: that.data.canvasRef,

      x: 0,

      y: 0,

      width: that.canvasWidth * 2,

      height: that.canvasHeight * 2,

      destWidth: that.canvasWidth * 2,

      destHeight: that.canvasHeight * 2,

      success: res => {

        wx.saveImageToPhotosAlbum({

          filePath: res.tempFilePath,

          success: res => {

            // console.log(this.saveTempFilePath)

            wx.showModal({

              title: "保存成功！",

              content: "图片已保存到本地相册",

              showCancel: false,

              success(res) {

                if (res.confirm) {

                  wx.reLaunch({

                    url: '/pages/joinU/joinU'

                  })

                }

              }

            })

          },

          fail: err => {

            console.log(err)

          }

        })

      },

      fail: err => {

        console.log(err)

      }

    })

    setTimeout(() => {

      wx.hideLoading()

    }, 1000)

  },