ec.uniapp-master/pages/index/author/author.vue

<template>

<!-- <view id="author">
	    <u-parse :content="info.content"  v-if="info.content" />
</view> -->
<view>
    <view class="personal_li"
                  @click="shareClick">
              <image src="../../../static/card-r.png"
                     mode="widthFix"
                     class="iconImage"></image>
              <text class="font14">分享生成图片</text>
              <image src="../../../static/home-r.png"
                     mode="widthFix"
                     class="jtIcon"></image>
            </view>
        <view class="canvasContent" v-if="canvasShow">
            <canvas canvas-id="shareCanvas" class="canvasName"></canvas>
            <view class="canvasText">图片已保存到相册，可分享给好友</view>
            <image src="../../../static/error.png" class="errorImage" @click="canvasShow = false"></image>
        </view>
</view>

</template>
<script>
import {pageLogin, getUrl,config,is} from '@/common/js/utils.js';
import uParse from '@/components/gaoyia-parse/parse.vue';

export default {
  data() {
    return {
      info: '',
	  canvasShow: false
    };
  },

	components:{
		
		uParse
	},

  onLoad() {
    /* this.getAuthor(); */
  },

  methods: {
    getAuthor() {
      wx.showLoading({
        title: "加载中",
        mask: true
      });
      this.$http.get({
        api: 'api/ibrand'
      }).then(res => {
        if (res.statusCode == 200) {
          res = res.data;

          if (res.status) {
            this.setData({
              info: res.data
            });
          } else {
            wx.showModal({
              content: res.message || '请求失败',
              showCancel: false
            });
          }
        } else {
          wx.showModal({
            content: res.message || '请求失败',
            showCancel: false
          });
        }

        wx.hideLoading();
      }).catch(err => {
        wx.hideLoading();
        wx.showModal({
          content: '请求失败',
          showCancel: false
        });
      });
    },

    setData: function (obj) {
      let that = this;
      let keys = [];
      let val, data;
      Object.keys(obj).forEach(function (key) {
        keys = key.split('.');
        val = obj[key];
        data = that.$data;
        keys.forEach(function (key2, index) {
          if (index + 1 == keys.length) {
            that.$set(data, key2, val);
          } else {
            if (!data[key2]) {
              that.$set(data, key2, {});
            }
          }

          data = data[key2];
        });
      });
    },
	 //这是一个封装好的方法 
	        promisify: api => {
	            return (options, ...params) => {
	                return new Promise((resolve, reject) => {
	                    const extras = {
	                        success: resolve,
	                        fail: reject
	                    }
	                    api({ ...options, ...extras }, ...params)
	                })
	            }
	        },
			shareClick() {         
			            const wxGetImageInfo = this.promisify(uni.getImageInfo)
			            Promise.all([
			                    // 图片目前只随机找了几张图片，后期可自行替换
			                    wxGetImageInfo({
			                            src: 'http://pics.ksudi.com/pic/2019/soms/companycard/jd2.png'   // 背景图片
			                    }),
			                    wxGetImageInfo({
			                            src: 'http://pics.ksudi.com/pic/2019/soms/companycard/st2.png'   // 二维码图片，二维码图片如需要携带参数，可根据接口将需要扫码进入页面的路径+参数传入后端，后端可根据生产小程序二维码路径，将路径放入这里就ok了,<a href="https://www.jianshu.com/p/5f96a4f91b9c" target="_blank">可参考</a>
			                    })
			            ]).then(res => {
			                    console.log(3454)
			                    const ctx = wx.createCanvasContext('shareCanvas')
			                    console.log(ctx)
			                    // 底图
			                    ctx.drawImage(res[0].path, 0, 0, 600, 700)
			                    // 作者名称
			                    ctx.setTextAlign('center')    // 文字居中
			                    ctx.setFillStyle('#000000')  // 文字颜色：黑色
			                    ctx.setFontSize(22)         // 文字字号：22px
			                    ctx.fillText('作者：张杰', 300 / 2, 100)
			                    // 小程序码
			                    const qrImgSize = 150
			                    ctx.drawImage(res[1].path, (340 - qrImgSize) / 2, 230, qrImgSize, qrImgSize)
			                    ctx.stroke()
			                    // 绘图生成临时图片
			                    console.log('res', res)
			                    ctx.draw(false,() => {
			                        this.tempFileImage()
			                    })
			                    this.canvasShow = true
			            })
			        },
			        tempFileImage() {
			            let that = this
			            uni.canvasToTempFilePath({
			                    canvasId: 'shareCanvas',
			                    success: (res) => {
			                            uni.hideLoading()
			                            that.savePic(res.tempFilePath)
			                    },
			                    fail:function () {
			                            //TODO
			                    }
			            })
			        },
					 //保存
					        savePic (filePath) {
					            console.log('filePath', filePath)
					            uni.showLoading({
					                    title: '正在保存'
					            });
					            uni.saveImageToPhotosAlbum({
					                    filePath: filePath,
					                    success: function () {
					                            uni.showToast({
					                                    title: '图片保存成功～'
					                            });
					                    },
					                    fail: function (e) {
					                            //TODO
					                    },
					                    complete: function (){
					                            uni.hideLoading()
					                    }
					            });
					        }
  }
};
</script>
<style rel="stylesheet/less" lang="less">
    @import "author";
</style>