推广二维码图片生成修改

packageUser/pages/user/invite/invite.js

@@ -30,7 +30,8 @@ Page({
     prevshow: true,
     cinfo: '',
     pinfo: '',
-	wx_user:{}
+	wx_user:{},
+	userinfo:{}
   },
   onLoad: function (options) {
     wx_id = getApp().globalData.wx_id
@@ -40,6 +41,7 @@ Page({
     this.getList()
 //  this.getCount()
     this.getmonthlist()
+	this.info()
     //this.getContributionTotal()
     // wx.getUserInfo({
     //   success: res => {
@@ -59,6 +61,17 @@ Page({
 	  }
 	})
   },
+  info(){
+    var that = this
+    var url = 'v1/user/info'
+    var params = {}
+    var success = function (res) {
+      that.setData({
+      	userinfo:res.data.wx_user,
+      })
+    }
+    _request.$get(url, params, success)
+  },
   getCount: function () {
     var that = this
     var url = 'v1/user/sale_rank/list'
@@ -130,47 +143,63 @@ Page({
   //     this.getList()
   //   }
   // },
-//createCtx () {
-//  var that = this
-//  console.log('that.data.qrcode',that.data.qrcode)
-//  var ctx = wx.createCanvasContext('myCanvas')
-//  ctx.drawImage(that.data.qrcode, 0, 0,200,200)
-//  ctx.restore();
-//    ctx.save();
-//    ctx.beginPath(); //开始绘制
-//  ctx.draw(true, function callback () {
-//    that.createImage()
-//  })
-//},
-//createImage () {
-//  var that = this
-//  wx.canvasToTempFilePath({
-//    destWidth: 200,
-//    destHeight: 200,
-//    canvasId: 'myCanvas',
-//    fileType: 'jpg',
-//    success: function (res) {
-//    	console.log('createImage',res)
-//      that.setData({
-//        posterImage: res.tempFilePath
-//      })
-//    }
-//  })
-//},
-  downLoadImage () {
-    wx.showLoading({
-      title: '加载中',
-    })
-    var that = this
-    wx.downloadFile({
-      url: that.data.qrcode,
-      success: function(res) {
-        if (res.statusCode === 200) {
-          that.saveImage(res.tempFilePath)
-        }
-      }
-    })
-  },
+createCtx () {
+ var that = this
+ var headimg = '';
+ var qrcodeimg = '';
+ wx.getImageInfo({
+	src: that.data.userinfo.head,
+	success: function (res) {
+		headimg = res.path;
+		wx.getImageInfo({
+			src: that.data.qrcode,
+			success: function (res2) {
+				qrcodeimg = res2.path;
+				var ctx = wx.createCanvasContext('myCanvas')
+				ctx.fillStyle = "#FFF"
+				ctx.fillRect(0,0,500,400)
+				ctx.restore();
+				ctx.drawImage(headimg, 20, 20,60,60)
+				ctx.drawImage(qrcodeimg, 0, 100,400,400)
+				// ctx.restore();
+				//   ctx.save();
+				ctx.fillStyle = "#000"
+				ctx.font="28px Arial";
+				ctx.fillText(that.data.userinfo.nickname, 90, 60)
+				
+				  // ctx.beginPath(); //开始绘制
+				ctx.draw(true, function callback () {
+				  that.createImage()
+				})
+			}
+		})
+	}
+ })
+},
+createImage () {
+ var that = this
+ wx.canvasToTempFilePath({
+   destWidth: 400,
+   destHeight: 500,
+   canvasId: 'myCanvas',
+   fileType: 'jpg',
+   success: function (res) {
+   	console.log('createImage',res)
+     // that.setData({
+     //   posterImage: res.tempFilePath
+     // })
+	 that.saveImage(res.tempFilePath)
+	 // wx.downloadFile({
+	 //   url: res.tempFilePath,
+	 //   success: function(res) {
+	 //     if (res.statusCode === 200) {
+	 //       that.saveImage(res.tempFilePath)
+	 //     }
+	 //   }
+	 // })
+   }
+ })
+},
   saveImage (val) {
     var that = this
     wx.saveImageToPhotosAlbum({
@@ -470,5 +499,90 @@ Page({
       })
     }
     _request.$get(url, params, success)
-  }
+  },
+  downLoadImage () {
+    wx.showLoading({
+      title: '加载中',
+    })
+    var that = this
+    // wx.downloadFile({
+    //   url: that.data.qrcode,
+    //   success: function(res) {
+    //     if (res.statusCode === 200) {
+    //       that.saveImage(res.tempFilePath)
+    //     }
+    //   }
+    // })
+	
+	wx.getImageInfo({
+	  src: that.data.qrcode,
+	  success: function (res) {
+	    that.createCtx()
+	  }
+	})
+  },
+  // createCtx () {
+	 //  var that = this
+	 //  console.log('createctx',that.data.qrcode);
+    
+  //   var ctx = wx.createCanvasContext('myCanvas')
+  //   // ctx.drawImage(this.posterImage.bg.path, 0, 0, this.dpi(this.posterImage.bg.width), this.dpi(this.posterImage.bg.height))
+  //   ctx.drawImage(that.data.qrcode, 0, 0, 200, 200)
+  //   ctx.save()
+  //     ctx.translate(this.dpi(44),this.dpi(46))
+  //     ctx.save()
+  //     ctx.arc(this.dpi(60), this.dpi(59), this.dpi(40), 0, Math.PI * 2, false)
+  //     ctx.lineWidth = 1
+  //     ctx.strokeStyle = '#d4d4d4'
+  //     ctx.stroke()
+  //     ctx.clip()
+  //     ctx.drawImage(this.posterImage.head.path, this.dpi(21), this.dpi(20), this.dpi(78), this.dpi(78))
+  //     ctx.restore()
+  //     ctx.save()
+  //     ctx.textBaseline = 'middle'
+  //     ctx.font = this.dpi(24) + 'px Arial'
+  //     ctx.fillStyle = '#eab86a'
+  //     ctx.fillText('源处全球源产地的优质产品！', this.dpi(136), this.dpi(59))
+  //     ctx.restore()
+  //     ctx.drawImage(this.posterImage.project.path, this.dpi(20), this.dpi(140), this.dpi(622), this.dpi(622))
+  //     ctx.beginPath()
+  //     ctx.moveTo(this.dpi(0), this.dpi(119))
+  //     ctx.lineTo(this.dpi(662), this.dpi(119))
+  //     ctx.lineWidth = 1
+  //     ctx.strokeStyle = '#eab86a'
+  //     ctx.stroke()
+  //     ctx.closePath()
+  //     ctx.save()
+  //     ctx.restore()
+  //   ctx.restore()
+  //   ctx.draw(true, function callback (res) {
+		// console.log('over draw',res)
+  //     that.createImage()
+  //   })
+  // },
+  // createImage () {
+  //   var that = this
+  //   wx.canvasToTempFilePath({
+  //     destWidth: 750,
+  //     destHeight: 1334,
+  //     canvasId: 'myCanvas',
+  //     fileType: 'jpg',
+  //     success: function (res) {
+  //       // that.setData({
+  //       //   posterImage: res.tempFilePath
+  //       // })
+  //       // that.canvasLoading = true
+  //       // wx.hideLoading()
+		
+		// wx.downloadFile({
+		//   url: res.tempFilePath,
+		//   success: function(res) {
+		//     if (res.statusCode === 200) {
+		//       that.saveImage(res.tempFilePath)
+		//     }
+		//   }
+		// })
+  //     }
+  //   })
+  // },
 })

packageUser/pages/user/invite/invite.wxml

@@ -1,16 +1,18 @@
 <wxs module="filters" src="../calc.wxs"></wxs>
 <view class="bg">
   <view style="height: 30rpx;"></view>
+  <view style="height: 0;width: 0;overflow: hidden;position: absolute;top: -500px;">
+	<canvas class="canvas" style="width: 400px; height: 500px;background:#fff" canvas-id="myCanvas" ></canvas>
+  </view>
   <view class="user">
     <view class="user-top">
-      <image class="user-image" src="{{info.avatarUrl}}"></image>
-      <view class="user-name ellipsis">{{info.nickName}}</view>
+      <image class="user-image" src="{{userinfo.head}}"></image>
+      <view class="user-name ellipsis">{{userinfo.nickname}}</view>
       <view class="user-title" bindtap="toDetail">如何正确转发<image src="http://fohow.oss-cn-shenzhen.aliyuncs.com/static/wenhao.png"></image></view>
     </view>
     <view class="user-main">
       <image class="user-qcode" src="{{qrcode}}"></image>
-      <!--<canvas class="canvas" style="width: 200px; height: 200px" canvas-id="myCanvas" ></canvas>
-      <image src="{{posterImage}}"></image>-->
+      <!-- <image src="{{posterImage}}"></image> -->
       <view class="user-btn" bindtap="downLoadImage">保存推广码</view>
       <view class="user-about" wx:if="{{ashow}}">FOHOW新零售是凤凰高科集团2020年在中国市场启动的新业务，精选出口海外88个国家的优质产品，以最低价带给消费者，欢迎您选购和体验并向您身边的朋友推荐！</view>
       <view class="user-about" wx:if="{{!ashow}}">FOHOW新零售是凤凰高科集团2020年在中国市场启动的新业务，精选出口海外88个国家的优质产品，以最低价带给消费者，欢迎您选购和体验并向您身边的朋友推荐！</view>