欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序繪制圖片發(fā)送朋友圈

 更新時(shí)間:2019年07月25日 14:41:49   作者:進(jìn)階的碼農(nóng)  
這篇文章主要為大家詳細(xì)介紹了微信小程序繪制圖片發(fā)送朋友圈,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了微信小程序繪制圖片發(fā)送朋友圈的具體代碼,供大家參考,具體內(nèi)容如下

這種生成圖片的效果是很常見(jiàn)的,實(shí)現(xiàn)起來(lái)也不難,跟原生js的差不多。需要注意的就是canvas標(biāo)簽上不要加太多的css,后果呢就是導(dǎo)致canvas不顯示,還有呢就是canvas組件的優(yōu)先級(jí)是最高的,所以會(huì)覆蓋掉下面的所有內(nèi)容,解決方法呢就是使用:

使用上面這兩個(gè)組件是可以蓋在canvas上面的。

注意:canvas繪制不支持網(wǎng)絡(luò)圖片,需要將網(wǎng)絡(luò)圖片保存成本地圖片

 onLoad: function(options) {
    var grade = options.grade;
    this.setData({
      grade: grade
    })
    this.loading();
 
  },
  //檢測(cè),網(wǎng)絡(luò)圖片是否下載完成
  loading: function() {
    var _this = this;
    wx.showLoading({
      title: '生成中...',
    })
    timer = setInterval(function() {
      var avatarUrl = _this.data.avatarUrl;
      var qc_code = _this.data.qc_code;
      if (avatarUrl != null && qc_code != null) {
        wx.hideLoading();
        clearInterval(timer);
        _this.draw();
      }
    }, 500)
  },
  //保存到相冊(cè)
  saveImage: function() {
    var imagePath = this.data.imagePath;
    wx.saveImageToPhotosAlbum({
      filePath: imagePath,
      success: function(res) {
        console.log(res)
      },
      fail: function(res) {
        console.log(res)
      }
    })
 
  },
  //將用戶頭像下載為本地路徑
  downImage: function(img) {
    var _this = this;
    wx.getImageInfo({
      src: img,
      success: function(res) {
        console.log(res.path)
        _this.setData({
          avatarUrl: res.path
        })
 
      }
    })
  },
  //下載小程序二維碼
  downImage2: function (img) {
    var _this = this;
    wx.getImageInfo({
      src: img,
      success: function (res) {
        console.log(res.path)
        _this.setData({
          qc_code: res.path
        })
 
      }
    })
  },
  //生成canvas圖片
  draw: function() {
    var _this = this;
    var context = wx.createCanvasContext('firstCanvas');
    var userInfo = wx.getStorageSync('userInfo');
    var award ;
    // 性別
    var gender = userInfo.gender;
    //背景圖片
    var bg = '../../images/icon-cj.png';
    //得分
    var grade = 0 ^ _this.data.grade;
    var width;
    var height;
    if (grade >= 0 && grade <= 30) {
      if(gender == 2){
        award = '../../images/zbzxlp.png';
      }else{
        award = '../../images/zbzxlg.png';
      }
    }else if(grade >= 31 && grade <= 60){
      if (gender == 2) {
        award = '../../images/zklp.png';
      } else {
        award = '../../images/zklg.png';
      }
    } else if (grade >= 61 && grade <= 80){
      if (gender == 2) {
        award = '../../images/zmlp.png';
      } else {
        award = '../../images/whlg.png';
      }
    }else{
      if (gender == 2) {
        award = '../../images/wmlp.png';
      } else {
        award = '../../images/wmlg.png';
      }
    }  
    if (award == '../../images/zbzxlp.png' || award == '../../images/zbzxlg.png'){
      width = 156;
      height= 25;
    }else{
      width = 103;
      height = 25;
    }  
    //二維碼
    var qc_code = _this.data.qc_code;
    // 用戶頭像
    var avatarUrl = _this.data.avatarUrl;
    //獲取設(shè)備的基本信息
    wx.getSystemInfo({
      success: function(res) {
        //繪制背景圖
        context.drawImage(bg, 0, 0, 350, 468);
        // 繪制獎(jiǎng)項(xiàng)
        context.drawImage(award,180 - (width / 2),212 - (height / 2),width,height);
        //繪制二維碼
        context.drawImage(qc_code, 175 - (92 / 2), 385 - (108 / 2), 92, 107);
        //繪制得分
        context.setFontSize(28); //字體大小
        context.fillStyle = '#4fc089';
        context.setTextAlign('center')
        context.fillText(grade, 177, 48)
        // 繪制姓名
        context.setFontSize(16);
        context.fillStyle = '#000000';
        context.setTextAlign('center')
        context.fillText(userInfo.nickName, 167, 180);
        // 繪制頭像
        context.drawImage(avatarUrl, 72, 157, 33, 33);
 
        context.draw(false, function() {
          setTimeout(function() {
            wx.canvasToTempFilePath({
              width: 350,
              height: 468,
              destWidth: 700,
              destHeight: 936,
              canvasId: 'firstCanvas',
              success: function(res) {
                var tempFilePath = res.tempFilePath;
                console.log("圖片"+tempFilePath);
                _this.setData({
                  imagePath: tempFilePath,
                  isCanvas: true
                });
                _this.upload(tempFilePath);
 
              },
              fail: function(res) {
                console.log(res);
              }
            });
          }, 1000);
        });
      },
    })
  },

因?yàn)槲业捻?xiàng)目需要,我上面做個(gè)很多判斷,那些東西不需要管,重點(diǎn)就是,繪制圖片drawimage方法 和繪制文字的方法,我的繪制方法是讓他們根據(jù)canvas上的一個(gè)坐標(biāo)點(diǎn)居中繪制的,這個(gè)可以看一下。

還有就是,生成圖片的尺寸要比畫(huà)的尺寸大一倍,這樣圖片不會(huì)失真,比較清楚,也就是這個(gè)方法:

wx.canvasToTempFilePath() 前兩個(gè)參數(shù)是canvas的大小,然后是生成圖片的大小,canvas的ID

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論