uniapp小程序分享图片

uniapp小程序分享图片流程：
①、使用canvas绘图，将图片绘制到页面上，并生成一个本地路径
②、保存图片至本地
③、分享到朋友

详细介绍：

①、使用canvas绘图，将图片绘制到页面上，并生成一个本地路径

saveImage() {
      let _this = this
      uni.showLoading({
        title: '图片绘制中...',
      })
      const context = uni.createCanvasContext('myCanvas')
      context.drawImage('../../static/images/bg2.png', 0, 0, this.windowWidth, this.windowHeight)
      context.drawImage('../../static/images/QR.png', 50, 90, 200, 200)
      context.setFontSize(20)
      context.setFillStyle('#000')
      context.fillText(this.myData.name, (this.windowWidth - 20 * this.myData.name.length) / 2, 320)
      context.setFontSize(14)
      context.setFillStyle('#000')
      context.fillText(this.myData.explainInfo, (this.windowWidth - 14 * this.myData.explainInfo.length) / 2, 350)
      context.fillStyle = '#ffffff'
      //重点：这边本来保存图片是写在draw之后，但第一次保存时空白，第二次才生效，写在draw回调里面就OK了。
      context.draw(true, function() {
        setTimeout(() => {
          uni.canvasToTempFilePath(
            {
              fileType: 'png',
              canvasId: 'myCanvas',
              success: function(res) {
                console.log('结果', res)
                uni.hideLoading()
                _this.ewmImg = res.tempFilePath
              },
            },
            this
          )
        }, 1000)
      })
    },

②、保存图片至本地

保存图片至本地相册，需要用户授权

saveEwm: function(e) {
      let _this = this
      //获取相册授权
      uni.getSetting({
        success(res) {
          if (!res.authSetting['scope.writePhotosAlbum']) {
            uni.authorize({
              scope: 'scope.writePhotosAlbum',
              success() {
                //这里是用户同意授权后的回调
                _this.saveImgToLocal()
              },
              fail() {
                //这里是用户拒绝授权后的回调
                _this.openSettingBtnHidden = false
              },
            })
          } else {
            //用户已经授权过了
            _this.saveImgToLocal()
          }
        },
      })
    },
    saveImgToLocal: function(e) {
      let _this = this
      console.log('图片路径', _this.ewmImg)
      uni.showModal({
        title: '提示',
        content: '确定保存到相册吗',
        success: function(res) {
          if (res.confirm) {
            uni.saveImageToPhotosAlbum({
              filePath: _this.ewmImg,
              success: function(res) {
                uni.showToast({ title: '图片已保存' })
                // console.log(1111, filePath)
              },
            })
          } else if (res.cancel) {
          }
        },
      })
    },

③、分享到朋友

此处可能还有其他方法，但是我没找到，我采取的就是保存图片到本地，然后由用户自己分享图片给朋友或者朋友圈

最后附上完整代码，此代码仅供参考

<template>
  <view class="mycode">
    <canvas
      canvas-id="myCanvas"
      :style="'width:' + windowWidth + 'px;height:' + windowHeight + 'px;margin: 0 auto'"
    />
    <button class="btn1" @click="box_show = true">分 享</button>
    <view class="box" v-if="box_show">
      <image :src="ewmImg"></image>
      <view class="box_c">
        <view>①保存图片到相册</view>
        <view>②分享图片给朋友</view>
      </view>
      <view class="box_b">
        <button type="default" class="btn2" @click="box_show = false">取 消</button>
        <button type="primary" class="btn2" @click="saveEwm">保 存</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      url: '',
      myData: {
        name: '皮皮',
        explainInfo: '分享图片到朋友技术测试',
      },
      openSettingBtnHidden: true, //是否授权
      ewmImg: '', //这是要保存的图片
      windowWidth: 300,
      windowHeight: 430,
      box_show: false,
    }
  },
  onLoad() {
    let _this = this
    this.saveImage()
  },
  methods: {
    // 分享图片到朋友，url路径需要一个在线路径
    fx() {
      let _this = this
      console.log('点击了分享', _this.ewmImg)
      wx.downloadFile({
        url: _this.ewmImg,
        success: res => {
          wx.showShareImageMenu({
            path: res.tempFilePath,
          })
        },
        fail: err => {
          console.log('错误信息', err)
        },
      })
    },

    //微信小程序保存到相册
    handleSetting(e) {
      if (!e.detail.authSetting['scope.writePhotosAlbum']) {
        _this.openSettingBtnHidden = false
      } else {
        _this.openSettingBtnHidden = true
      }
    },
    saveEwm: function(e) {
      let _this = this
      //获取相册授权
      uni.getSetting({
        success(res) {
          if (!res.authSetting['scope.writePhotosAlbum']) {
            uni.authorize({
              scope: 'scope.writePhotosAlbum',
              success() {
                //这里是用户同意授权后的回调
                _this.saveImgToLocal()
              },
              fail() {
                //这里是用户拒绝授权后的回调
                _this.openSettingBtnHidden = false
              },
            })
          } else {
            //用户已经授权过了
            _this.saveImgToLocal()
          }
        },
      })
    },
    saveImgToLocal: function(e) {
      let _this = this
      console.log('图片路径', _this.ewmImg)
      uni.showModal({
        title: '提示',
        content: '确定保存到相册吗',
        success: function(res) {
          if (res.confirm) {
            uni.saveImageToPhotosAlbum({
              filePath: _this.ewmImg,
              success: function(res) {
                uni.showToast({ title: '图片已保存' })
                // console.log(1111, filePath)
              },
            })
          } else if (res.cancel) {
          }
        },
      })
    },

    //小程序端保存图片
    saveImage() {
      let _this = this
      uni.showLoading({
        title: '图片绘制中...',
      })
      const context = uni.createCanvasContext('myCanvas')
      context.drawImage('../../static/images/bg2.png', 0, 0, this.windowWidth, this.windowHeight)
      context.drawImage('../../static/images/QR.png', 50, 90, 200, 200)
      context.setFontSize(20)
      context.setFillStyle('#000')
      context.fillText(this.myData.name, (this.windowWidth - 20 * this.myData.name.length) / 2, 320)
      context.setFontSize(14)
      context.setFillStyle('#000')
      context.fillText(this.myData.explainInfo, (this.windowWidth - 14 * this.myData.explainInfo.length) / 2, 350)
      context.fillStyle = '#ffffff'
      //重点：这边本来保存图片是写在draw之后，但第一次保存时空白，第二次才生效，写在draw回调里面就OK了。
      context.draw(true, function() {
        setTimeout(() => {
          uni.canvasToTempFilePath(
            {
              fileType: 'png',
              canvasId: 'myCanvas',
              success: function(res) {
                console.log('结果', res)
                uni.hideLoading()
                _this.ewmImg = res.tempFilePath
              },
            },
            this
          )
        }, 1000)
      })
    },
  },
}
</script>

<style lang="less" scoped>
.mycode {
  width: 100%;
  height: 100vh;
  background-color: #fff;
  padding-top: 24rpx;
  box-sizing: border-box;
  overflow: auto;
  .btn1 {
    width: 80%;
    margin: 48rpx auto 24rpx;
    color: #fff;
    background: linear-gradient(to right, #006fff 0%, #189dff 100%);
  }
  .box {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    image {
      display: block;
      width: 300px;
      height: 400px;
      margin: 50px auto;
    }
    .box_c {
      width: 80%;
      height: 60px;
      background-color: #fff;
      border-radius: 10px;
      margin: 0 auto;
      padding-left: 20px;
      padding-top: 10px;
      box-sizing: border-box;
    }
    .box_b {
      position: fixed;
      bottom: 0;
      width: 100%;
      height: 80px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .btn2 {
        width: 40%;
      }
    }
  }
  .foot {
    position: fixed;
    width: 100%;
    text-align: center;
    font-size: 22rpx;
    font-weight: 500;
    color: #666;
    bottom: 20rpx;
    left: 0;
  }
}
</style>