WeChatアプレットはcanvasで絵を描いて共有します.

3499 ワード


【js部分】
   var ctx = "" //     canvas
   var leftMargin = "" //        
   var topMargin = "" //        
   Page({

     /**
      *        
      */
     data: {
       title: '~~',
       salary: '500-8000 / ',
       rtype: '11',
       rmoney: '20 ',
       canvasWidth: '', // canvas  
       canvasHeight: '', // canvas  
       imagePath: '' //        
     },

     /**
      *       --      
      */
     onLoad: function (options) {
       var that = this
       var sysInfo = wx.getSystemInfo({
         success: function (res) {
           that.setData({
             //        ,      80%,       5:4
             canvasWidth: res.windowWidth,
             canvasHeight: res.windowWidth * 0.8
           })
           leftMargin = res.windowWidth
           topMargin = res.windowWidth * 0.8
         },
       })
     },

     /**
      *       --          
      */
     onReady: function () {
       ctx = wx.createCanvasContext('myCanvas')
       this.addImage()
       this.tempFilePath()

     },
     //    
     addImage: function () {
       var context = wx.createContext();
       var that = this;
       var path = "/images/share.jpg";
       //        canvas,      drawImage()     ,     
       //        ,         
       ctx.drawImage(path, 0, 0, this.data.canvasWidth, this.data.canvasHeight);
       this.addTitle()
       this.addRtype()
       this.addRmoney()
       this.addSalary()
       ctx.draw()
     },
     //   
     addTitle: function () {
       var str = this.data.title
       ctx.font = 'normal bold 20px sans-serif';
       ctx.setTextAlign('center'); //     
       ctx.setFillStyle("#222222");
       ctx.fillText(str, this.data.canvasWidth / 2, 65)
     },
     //      
     addRtype: function () {
       var str = this.data.rtype
       ctx.setFontSize(16)
       ctx.setFillStyle("#ff4200");
       ctx.setTextAlign('left');
       ctx.fillText(str, leftMargin * 0.35, topMargin * 0.4)
     },
     //      
     addRmoney: function () {
       var str = this.data.rmoney
       ctx.setFontSize(16)
       ctx.setFillStyle("#222");
       ctx.setTextAlign('left');
       ctx.fillText(str, leftMargin * 0.35, topMargin * 0.5)
     },
     //    
     addSalary: function () {
       var str = this.data.salary
       ctx.setFontSize(16)
       ctx.setFillStyle("#222");
       ctx.setTextAlign('left');
       ctx.fillText(str, leftMargin * 0.35, topMargin * 0.61)
     },
     /**
      *          
      */
     onShareAppMessage: function (res) {
       // return eventHandler        
       return {
         title: this.data.title,
         path: '/pages/test/test',
         imageUrl: this.data.imagePath
       };
     },
     //    
     tempFilePath: function () {
       let that = this;
       wx.canvasToTempFilePath({
         canvasId: 'myCanvas',
         success: function success(res) {
           wx.saveFile({
             tempFilePath: res.tempFilePath,
             success: function success(res) {
               that.setData({
                 imagePath: res.savedFilePath
               });
             }
           });
         }
       });
     },

   })