无码人妻精一区二区三区,eeuss影院www在线观看,无码精品久久久久久人妻中字,日韩av高清在线看片

項(xiàng)目中遇到需要分享到朋友圈，但是查詢api發(fā)現(xiàn)小程序并沒有提供分享到朋友圈的功能，只能實(shí)現(xiàn)通過canvas畫一張海報然后保存到本地，讓用戶主動去發(fā)朋友圈。

先看效果圖

 

首先使用微信小程序提供的canvasapi將第二張圖顯示的海報畫出來

然后調(diào)用保存本地的接口

wx.saveImageToPhotosAlbum({}）將圖片保存在本地相冊中
 
直接上代碼
 
首先是index.wxml

<view>
  <image src="{{img}}" class='bgImg'></image>
  <text class='mine'>我的邀請碼</text>
  <text class='code'>{{code}}</text>
  <text class='who'>誰邀請你一起吃面?</text>
  <view class='inputBox'>
    <input placeholder='輸入朋友的驗(yàn)證碼' class='input' bindinput='bindKeyInput'/>
    <button bindtap='btnclick' class='btn'>提交</button>
  </view>
  <text class='tishi'>輸入朋友的邀請碼，朋友和你各自獲得通用優(yōu)惠券1張</text>
  <text class='shareText'>生成海報分享至</text>
  <view class='imgBox'>
    <button open-type="share" class='zfbtn'><image src="{{wechat}}" class='img'></image></button>
    <button class='zfbtn m_l' bindtap='formSubmit'><image src="{{quan}}" class='img'></image></button>
  </view>

  <!--生成海報  -->
   <!-- <view class="img-box">
        
    </view> -->
    <view class='imagePathBox' hidden="{{maskHidden == false}}">
      <image src="{{imagePath}}" class='shengcheng'></image>
      <button class='baocun' bindtap='baocun'>保存相冊，分享到朋友圈</button>
    </view>
   <view hidden="{{maskHidden == false}}" class="mask"></view> 
  <view class="canvas-box">
      <canvas  style="width: 375px;height: 667px;position:fixed;top:9999px" canvas-id="mycanvas"/>
  </view>  
</view>

然后是index.wxss

.bgImg{
  display: block;
  width: 100%;
  height: 366rpx;
}
.mine{
  display: block;
  text-align: center;
  color: #333;
  margin-top: 44rpx;
}
.code{
  display: block;
  text-align: center;
  color: #333;
  font-size: 76rpx;
  font-weight: bold;
  margin-top: 30rpx;
}
.who{
  display: block;
  margin-top: 80rpx;
  font-size: 32rpx;
  color: #333;
  text-align: center;
}
.inputBox{
  text-align: center;
  margin-top: 44rpx;
}
.input{
  text-align: center;
  width: 440rpx;
  height: 88rpx;
  border-radius: 44rpx;
  background: #f5f5f5;
  font-size: 32rpx;
  display: inline-block;
}
.btn{
  width: 160rpx;
  height: 88rpx;
  border-radius: 44rpx;
  background:linear-gradient(90deg,rgba(255,226,0,1),rgba(255,200,11,1));
  box-shadow: 0px 4px 8px 0px rgba(255,200,11,0.5); 
  color:#333;
  font-size: 32rpx;
  display: inline-block;
  line-height: 88rpx;
  margin-left: 40rpx;
}
button[class="btn"]::after {
  border: 0;
} 
.tishi{
  display: block;
  text-align: center;
  color: #999;
  margin-top: 30rpx;
}
.shareText{
  display: block;
  text-align: center;
  color: #333;
  font-size: 28rpx;
  margin-top: 100rpx;
}
.imgBox{
  text-align: center;
  width: 100%;
  margin-top:60rpx;
  padding-bottom: 120rpx;
}
.img{
  display: inline-block;
  width: 100%;
  height: 100%;
}
.m_l{
  margin-left: 180rpx;
}
.zfbtn{
  display: inline-block;
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  background: transparent;
  outline: none;
  border: 0;
  padding: 0;
}
button[class="zfbtn"]::after {
  border: 0;
} 
button[class="zfbtn m_l"]::after {
  border: 0;
} 
.imagePathBox{
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
}
.shengcheng{
  width: 80%;
  height: 80%;
  position: fixed;
  top: 50rpx;
  left: 50%;
  margin-left: -40%;
  z-index: 10;
}
.baocun{
  display: block;
  width: 80%;
  height: 80rpx;
  padding: 0;
  line-height: 80rpx;
  text-align: center;
  position: fixed;
  bottom: 50rpx;
  left: 10%;
  background: #ffe200;
  color: #333;
  font-size: 32rpx;
  border-radius: 44rpx;
}
button[class="baocun"]::after{
  border: 0;
}

最后是index.js

// pages/prize/prize.js
const app = getApp()
Page({

  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    img:"../../images/gobg.png",
    wechat:"../../images/wechat.png",
    quan:"../../images/quan.png",
    code:"E7AI98",
    inputValue:"",
    maskHidden: false,
    name:"",
    touxiang:"",
    code: "E7A93C"
  },
  //獲取輸入框的值
  bindKeyInput:function(e){
    this.setData({
      inputValue: e.detail.value
    })
  },
  //點(diǎn)擊提交按鈕
  btnclick:function(){
    var text = this.data.inputValue
    wx.showToast({
      title: text,
      icon: 'none',
      duration: 2000
    })
  },
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  onLoad: function (options) {
    var that = this;
    wx.getUserInfo({
      success: res => {
        console.log(res.userInfo,"huoqudao le ")
        this.setData({
          name: res.userInfo.nickName,
        })
        wx.downloadFile({
          url: res.userInfo.avatarUrl, //僅為示例，并非真實(shí)的資源
          success: function (res) {
            // 只要服務(wù)器有響應(yīng)數(shù)據(jù)，就會把響應(yīng)內(nèi)容寫入文件并進(jìn)入 success 回調(diào)，業(yè)務(wù)需要自行判斷是否下載到了想要的內(nèi)容
            if (res.statusCode === 200) {
              console.log(res, "reererererer")
              that.setData({
                touxiang: res.tempFilePath
              })
            }
          }
        })
      }
    })

  },
  //將canvas轉(zhuǎn)換為圖片保存到本地，然后將圖片路徑傳給image圖片的src
  createNewImg: function () {
    var that = this;
    var context = wx.createCanvasContext('mycanvas');
    context.setFillStyle("#ffe200")
    context.fillRect(0, 0, 375, 667)
    var path = "/images/gobg.png";
    //將模板圖片繪制到canvas,在開發(fā)工具中drawImage()函數(shù)有問題，不顯示圖片
    //不知道是什么原因，手機(jī)環(huán)境能正常顯示
    context.drawImage(path, 0, 0, 375, 183);
    var path1 = that.data.touxiang;
    console.log(path1,"path1")
    //將模板圖片繪制到canvas,在開發(fā)工具中drawImage()函數(shù)有問題，不顯示圖片
    var path2 = "/images/txquan.png";
    var path3 = "/images/heise.png";
    var path4 = "/images/wenziBg.png";
    var path5 = "/images/wenxin.png";
    context.drawImage(path2, 126, 186, 120, 120);
    //不知道是什么原因，手機(jī)環(huán)境能正常顯示
    // context.save(); // 保存當(dāng)前context的狀態(tài)

    var name = that.data.name;
    //繪制名字
    context.setFontSize(24);
    context.setFillStyle('#333333');
    context.setTextAlign('center');
    context.fillText(name, 185, 340);
    context.stroke();
    //繪制一起吃面標(biāo)語
    context.setFontSize(14);
    context.setFillStyle('#333333');
    context.setTextAlign('center');
    context.fillText("邀請你一起去吃面", 185, 370);
    context.stroke();
    //繪制驗(yàn)證碼背景
    context.drawImage(path3, 48, 390, 280, 84);
    //繪制code碼
    context.setFontSize(40);
    context.setFillStyle('#ffe200');
    context.setTextAlign('center');
    context.fillText(that.data.code, 185, 435);
    context.stroke();
    //繪制左下角文字背景圖
    context.drawImage(path4, 25, 520, 184, 82);
    context.setFontSize(12);
    context.setFillStyle('#333');
    context.setTextAlign('left');
    context.fillText("進(jìn)入小程序輸入朋友的邀請", 35, 540);
    context.stroke();
    context.setFontSize(12);
    context.setFillStyle('#333');
    context.setTextAlign('left');
    context.fillText("碼，朋友和你各自獲得通用", 35, 560);
    context.stroke();
    context.setFontSize(12);
    context.setFillStyle('#333');
    context.setTextAlign('left');
    context.fillText("優(yōu)惠券1張哦~", 35, 580);
    context.stroke();
    //繪制右下角掃碼提示語
    context.drawImage(path5, 248, 578, 90, 25);
    //繪制頭像
    context.arc(186, 246, 50, 0, 2 * Math.PI) //畫出圓
    context.strokeStyle = "#ffe200";
    context.clip(); //裁剪上面的圓形
    context.drawImage(path1, 136, 196, 100, 100); // 在剛剛裁剪的園上畫圖
    context.draw();
    //將生成好的圖片保存到本地，需要延遲一會，繪制期間耗時
    setTimeout(function () {
      wx.canvasToTempFilePath({
        canvasId: 'mycanvas',
        success: function (res) {
          var tempFilePath = res.tempFilePath;
          that.setData({
            imagePath: tempFilePath,
            canvasHidden:true
          });
        },
        fail: function (res) {
          console.log(res);
        }
      });
    }, 200);
  },
  //點(diǎn)擊保存到相冊
  baocun:function(){
    var that = this
    wx.saveImageToPhotosAlbum({
      filePath: that.data.imagePath,
      success(res) {
        wx.showModal({
          content: '圖片已保存到相冊，趕緊曬一下吧~',
          showCancel: false,
          confirmText: '好的',
          confirmColor: '#333',
          success: function (res) {
            if (res.confirm) {
              console.log('用戶點(diǎn)擊確定');
              /* 該隱藏的隱藏 */
              that.setData({
                maskHidden: false
              })
            }
          },fail:function(res){
            console.log(11111)
          }
        })
      }
    })
  },
  //點(diǎn)擊生成
  formSubmit: function (e) {
    var that = this;
    this.setData({
      maskHidden: false
    });
    wx.showToast({
      title: '裝逼中...',
      icon: 'loading',
      duration: 1000
    });
    setTimeout(function () {
      wx.hideToast()
      that.createNewImg();
      that.setData({
        maskHidden: true
      });
    }, 1000)
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
   */
  onReady: function () {
  
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面顯示
   */
  onShow: function () {
    var that = this;
    wx.getUserInfo({
      success: res => {
        console.log(res.userInfo, "huoqudao le ")
        this.setData({
          name: res.userInfo.nickName,
        })
        wx.downloadFile({
          url: res.userInfo.avatarUrl, //僅為示例，并非真實(shí)的資源
          success: function (res) {
            // 只要服務(wù)器有響應(yīng)數(shù)據(jù)，就會把響應(yīng)內(nèi)容寫入文件并進(jìn)入 success 回調(diào)，業(yè)務(wù)需要自行判斷是否下載到了想要的內(nèi)容
            if (res.statusCode === 200) {
              console.log(res, "reererererer")
              that.setData({
                touxiang: res.tempFilePath
              })
            }
          }
        })
      }
    })
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面隱藏
   */
  onHide: function () {
  
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面卸載
   */
  onUnload: function () {
  
  },

  /**
   * 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
   */
  onPullDownRefresh: function () {
  
  },

  /**
   * 頁面上拉觸底事件的處理函數(shù)
   */
  onReachBottom: function () {
  
  },

  /**
   * 用戶點(diǎn)擊右上角分享
   */
  onShareAppMessage: function (res) {
    return {
      title:"這個是我分享出來的東西",
      success:function(res){
        console.log(res,"轉(zhuǎn)發(fā)成功")
      },
      fail:function(res){
        console.log(res,"轉(zhuǎn)發(fā)失敗")
      }
    }
  }
})

代碼里面有一部分不是關(guān)于生成圖片的，沒有去詳細(xì)分，可以看情況去刪減。

到此就完成了canvas畫海報并且保存相冊功能

其中用到的圖片