小程序截圖保存到相冊 繪圖(使用painter)

微信小程序,截屏截圖,都需要重新繪制畫布,生成圖片.
簡單的靜態(tài)布局,可以直接使用canvas.
然而,大量動態(tài)數(shù)據(jù), 動態(tài)布局, 使用canvas,實現(xiàn)起來就有些過于繁瑣了.在實現(xiàn)對界面截圖的過程中, 使用到了painter組件.接下來介紹一下功能實現(xiàn)過程中painter的使用.

.json文件

{
  "navigationBarTitleText": "圖片名片",
  "backgroundColor": "#f5f5f5",
  "usingComponents": {
    "painter": "/pages/components/painter/painter"
  }
}

.wxml文件

palette: 是繪制屬性,賦值后, 畫布繪制保存到本地,就是按照此屬性的賦值數(shù)據(jù)來的.
dancePalette: 是展示在現(xiàn)存界面里的布局;
在實現(xiàn)截圖功能時, 還是覺得 wxml的布局效率比較精準(zhǔn), 比較高, 所以展示給用戶的, 是用wxml實現(xiàn)的布局.并沒有給dancePalette賦值,當(dāng)然在調(diào)試的時候 也是可以給dancePalette直接賦和palette一樣的值, 來查看繪制效果的, 具體用不用,看個人習(xí)慣和項目需求;

<painter
palette="{{template}}"
bind:imgOK="onImgOK" 
/>

.wxss文件

painter{width: 100%;height: 1264rpx;}

.js文件(核心繪制代碼)
注:

*繪制代碼看似比較繁瑣, 其實有輔助工具的喲painter-custom-poster,
可以先利用painter-custom-poster生成大概布局數(shù)據(jù),再進行微調(diào), 很方便*

painter-custom-poster地址

為了 方便動態(tài)賦值實現(xiàn)動態(tài)布局,我直接在.js文件里處理了布局數(shù)據(jù). 如果界面相對簡單, 可以獨立出來一個.js 文件,導(dǎo)入本界面index.js文件中.

//這里額外創(chuàng)建了一個.js文件,將一些靜態(tài)布局數(shù)據(jù)分離了出去. 所以需要做一下導(dǎo)入
import Card from './draw/getpic.js';
  onShow: function() {
    this.getWritePhotos();//獲取微信授權(quán)保存相冊
  },
//此函數(shù)就是簡單的界面數(shù)據(jù)請求,不做贅述.將drawPic函數(shù)在此調(diào)用確保繪制圖片的時候,數(shù)據(jù)已經(jīng)拿到
getCardDetail: function(cardId) {
app.$ajax({
      url: '本頁面數(shù)據(jù)網(wǎng)絡(luò)請求接口',
      data: {
      入?yún)⒚?入?yún)?      },
      contentType: "application/json",
      method: "GET"
    }).then(res => {
        that.drawPic();
    });
}

// 繪制
  drawPic: function() {
//這里額外創(chuàng)建了一個.js文件,將一些靜態(tài)布局數(shù)據(jù)分離了出去. 
    let card = new Card().palette();
    this.setData({
      template: card,
    });
    //繪制動態(tài)數(shù)據(jù)
    this.manageCardPainterPhoto();
  },
    //繪制動態(tài)數(shù)據(jù)
manageCardPainterPhoto: function() {
    let that = this;
    let card = this.data.template;
    // 用戶信息
    card.views.push({
      "type": "image",
      "url": `${that.data.cardInfo.headImg}`,
      "css": {
        "width": "160rpx",
        "height": "160rpx",
        "top": "88rpx",
        "left": "300rpx",
        "rotate": "0",
        "borderRadius": "80rpx",
        "borderWidth": "1rpx",
        "borderColor": "#fff",
        "shadow": "",
        "mode": "scaleToFill"
      }
    }, {
      "type": "text",
      "text": `${that.data.cardInfo.userName}`,
      "css": {
        "color": "#fff",
        "background": "rgba(0,0,0,0)",
        "width": "690rpx",
        "height": "118rpx",
        "top": "264rpx",
        "left": "30rpx",
        "rotate": "0",
        "borderRadius": "",
        "borderWidth": "",
        "borderColor": "#000000",
        "shadow": "",
        "padding": "0px",
        "fontSize": "44rpx",
        "fontWeight": "bold",
        "maxLines": "1",
        "lineHeight": "62rpx",
        "textStyle": "fill",
        "textDecoration": "none",
        "fontFamily": "",
        "textAlign": "center"
      }
    }, {
      "type": "text",
      "text": `${that.data.cardInfo.companyName}`,
      "css": {
        "color": "#fff",
        "background": "rgba(0,0,0,0)",
        "width": "690rpx",
        "height": "37rpx",
        "top": "376rpx",
        "left": "30rpx",
        "rotate": "0",
        "borderRadius": "",
        "borderWidth": "",
        "borderColor": "#000000",
        "shadow": "",
        "padding": "0px",
        "fontSize": "26rpx",
        "fontWeight": "normal",
        "maxLines": "1",
        "lineHeight": "37rpx",
        "textStyle": "fill",
        "textDecoration": "none",
        "fontFamily": "",
        "textAlign": "center"
      }
    }, {
      "type": "text",
      "text": `${that.data.cardInfo.phone}`,
      "css": {
        "color": "#fff",
        "background": "rgba(0,0,0,0)",
        "width": "690rpx",
        "height": "37rpx",
        "top": "410rpx",
        "left": "30rpx",
        "rotate": "0",
        "borderRadius": "",
        "borderWidth": "",
        "borderColor": "#000000",
        "shadow": "",
        "padding": "0px",
        "fontSize": "26rpx",
        "fontWeight": "normal",
        "maxLines": "1",
        "lineHeight": "37rpx",
        "textStyle": "fill",
        "textDecoration": "none",
        "fontFamily": "",
        "textAlign": "center"
      }
    });

    //用戶身份
    if (that.data.identityList.length > 0) {
      let identityCount = that.data.identityList.length;
      let margin_L = (750 - 84 - (84 + 24) * (identityCount - 1)) / 2;
      for (let i = 0; i < that.data.identityList.length; i++) {
        card.views.push({
          "type": "text",
          "text": `${that.data.identityList[i]}`,
          "css": {
            "color": "#fff",
            "background": "rgba(255,255,255,0.1)",
            "width": "84rpx",
            "height": "28rpx",
            "top": "332rpx",
            "left": `${margin_L + i * (84 + 24)}rpx`,
            "rotate": "0",
            "borderRadius": "14rpx",
            "borderWidth": "",
            "borderColor": "#000000",
            "shadow": "",
            "padding": "0px",
            "fontSize": "20rpx",
            "fontWeight": "normal",
            "maxLines": "1",
            "lineHeight": "28rpx",
            "textStyle": "fill",
            "textDecoration": "none",
            "fontFamily": "",
            "textAlign": "center"
          }
        });
      }
    }
    // let views = card.views;
    // let brand_top = 528;
    let shop_top = 528;
    // //品牌
    if (this.data.brandList.length > 0) {
      card.views.push({
        "type": "text",
        "text": `品牌${that.data.brandNum}個`,
        "css": {
          "color": "#000000",
          "background": "rgba(0,0,0,0)",
          "width": "230rpx",
          "height": "31rpx",
          "top": "528rpx",
          "left": "260rpx",
          "rotate": "0",
          "borderRadius": "",
          "borderWidth": "",
          "borderColor": "#000000",
          "shadow": "",
          "padding": "0px",
          "fontSize": "28rpx",
          "fontWeight": "bold",
          "maxLines": "1",
          "lineHeight": "30rpx",
          "textStyle": "fill",
          "textDecoration": "none",
          "fontFamily": "",
          "textAlign": "center"
        }
      });
      for (let i = 0; i < that.data.brandList.length; i++) {
        if (i === 3) {
          card.views.push({
            "type": "rect",
            "css": {
              "background": "#fff",
              "width": "144rpx",
              "height": "144rpx",
              "top": "592rpx",
              "left": `${62 + i * (144 + 16)}rpx`,
              "rotate": "0",
              "borderRadius": "0",
              "borderWidth": "1rpx",
              "borderColor": "#e5e5e5",
              "shadow": "",
              "color": "#fff"
            }
          }, {
            "type": "text",
            "text": "···",
            "css": {
              "color": "#333",
              "background": "#fff",
              "width": "144rpx",
              "height": "34rpx",
              "top": "648rpx",
              "left": `${62 + i * (144 + 16)}rpx`,
              "rotate": "0",
              "borderRadius": "",
              "borderWidth": "",
              "borderColor": "#000000",
              "shadow": "",
              "padding": "0px",
              "fontSize": "24rpx",
              "fontWeight": "normal",
              "maxLines": "1",
              "lineHeight": "34rpx",
              "textStyle": "fill",
              "textDecoration": "none",
              "fontFamily": "",
              "textAlign": "center"
            }
          })
        } else {
          let model = that.data.brandList[i];
          let brandName = that.appendBrandName([model.brandName, model.brandNameEn, model.brandNameOther]);
          card.views.push({
            "type": "rect",
            "css": {
              "background": "#fff",
              "width": "144rpx",
              "height": "144rpx",
              "top": "592rpx",
              "left": `${62 + i*(144+16)}rpx`,
              "rotate": "0",
              "borderRadius": "0",
              "borderWidth": "1rpx",
              "borderColor": "#e5e5e5",
              "shadow": "",
              "color": "#fff"
            }
          }, {
            "type": "image",
            "url": `${model.brandLogo}`,
            "css": {
              "width": "112rpx",
              "height": "112rpx",
              "top": "593rpx",
              "left": `${78 + i * (144 + 16)}rpx`,
              "rotate": "0",
              "borderRadius": "0",
              "borderWidth": "1rpx",
              "borderColor": "#fff",
              "shadow": "",
              "mode": "scaleToFill"
            }
          }, {
            "type": "text",
            "text": `${brandName}`,
            "css": {
              "color": "#333",
              "background": "rgba(0,0,0,0)",
              "width": "144rpx",
              "height": "27rpx",
              "top": "704rpx",
              "left": `${62 + i * (144 + 16)}rpx`,
              "rotate": "0",
              "borderRadius": "",
              "borderWidth": "",
              "borderColor": "#000000",
              "shadow": "",
              "padding": "0px",
              "fontSize": "24rpx",
              "fontWeight": "normal",
              "maxLines": "1",
              "lineHeight": "27rpx",
              "textStyle": "fill",
              "textDecoration": "none",
              "fontFamily": "",
              "textAlign": "center"
            }
          });
        }
      }
      shop_top = 776;
      that.setData({
        template: card
      })
    }
    //店鋪
    if (this.data.shopList.length > 0) {
      card.views.push({
        "type": "text",
        "text": `店鋪${that.data.shopNum}個`,
        "css": {
          "color": "#000000",
          "background": "rgba(0,0,0,0)",
          "width": "230rpx",
          "height": "31rpx",
          "top": `${shop_top}rpx`,
          "left": "260rpx",
          "rotate": "0",
          "borderRadius": "",
          "borderWidth": "",
          "borderColor": "#000000",
          "shadow": "",
          "padding": "0px",
          "fontSize": "28rpx",
          "fontWeight": "bold",
          "maxLines": "1",
          "lineHeight": "30rpx",
          "textStyle": "fill",
          "textDecoration": "none",
          "fontFamily": "",
          "textAlign": "center"
        }
      });
      for (let i = 0; i < that.data.shopList.length; i++) {
        if (i === 3) {
          card.views.push({
            "type": "rect",
            "css": {
              "background": "#fff",
              "width": "304rpx",
              "height": "112rpx",
              "top": `${shop_top + 64 + parseInt(i / 2) * 128}rpx`,
              "left": `${62 + i % 2 * 320}rpx`,
              "rotate": "0",
              "borderRadius": "12rpx",
              "borderWidth": "1rpx",
              "borderColor": "#e5e5e5",
              "shadow": "",
              "color": "#fff"
            }
          }, {
            "type": "text",
            "text": "···",
            "css": {
              "color": "#333",
              "background": "#fff",
              "width": "304rpx",
              "height": "34rpx",
              "top": `${shop_top + 64 + parseInt(i / 2) * 128 + 39}rpx`,
              "left": "382rpx",
              "rotate": "0",
              "borderRadius": "",
              "borderWidth": "",
              "borderColor": "#000000",
              "shadow": "",
              "padding": "0px",
              "fontSize": "24rpx",
              "fontWeight": "bold",
              "maxLines": "1",
              "lineHeight": "34rpx",
              "textStyle": "fill",
              "textDecoration": "none",
              "fontFamily": "",
              "textAlign": "center"
            }
          })

        } else {
          let model = that.data.shopList[i];
          let level_img = "/images/shoplevelicons/shoplevel_" + model.shopLevel + ".png";
          card.views.push({
            "type": "rect",
            "css": {
              "background": "#fff",
              "width": "304rpx",
              "height": "112rpx",
              "top": `${shop_top + 64 + parseInt(i / 2) * 128}rpx`,
              "left": `${62 + i % 2 * 320}rpx`,
              "rotate": "0",
              "borderRadius": "14rpx",
              "borderWidth": "1rpx",
              "borderColor": "#e5e5e5",
              "shadow": "",
              "color": "#fff"
            }
          }, {
            "type": "rect",
            "css": {
              "background": "#fff",
              "width": "80rpx",
              "height": "80rpx",
              "top": `${shop_top + 64 + parseInt(i / 2) * 128 + 16}rpx`,
              "left": `${62 + i % 2 * 320 + 16}rpx`,
              "rotate": "0",
              "borderRadius": "42rpx",
              "borderWidth": "1rpx",
              "borderColor": "#e5e5e5",
              "shadow": "",
              "color": "#f8f8f8"
            }
          }, {
            "type": "image",
            "url": `${model.shopImg}`,
            "css": {
              "width": "80rpx",
              "height": "80rpx",
              "top": `${shop_top + 64 + parseInt(i / 2) * 128 + 16}rpx`,
              "left": `${62 + i % 2 * 320 + 16}rpx`,
              "rotate": "0",
              "borderRadius": "42rpx",
              "borderWidth": "1rpx",
              "borderColor": "#fff",
              "shadow": "",
              "mode": "scaleToFill"
            }
          }, {
            "type": "text",
            "text": `${model.shopName}`,
            "css": {
              "color": "#333",
              "background": "rgba(0,0,0,0)",
              "width": "180rpx",
              "height": "31rpx",
              "top": `${shop_top + 64 + parseInt(i / 2) * 128 + 16}rpx`,
              "left": `${62 + i % 2 * 320 + 112}rpx`,
              "rotate": "0",
              "borderRadius": "",
              "borderWidth": "",
              "borderColor": "#000000",
              "shadow": "",
              "padding": "0px",
              "fontSize": "28rpx",
              "fontWeight": "bold",
              "maxLines": "1",
              "lineHeight": "30rpx",
              "textStyle": "fill",
              "textDecoration": "none",
              "fontFamily": "",
              "textAlign": "left"
            }
          }, {
            "type": "image",
            "url": `${level_img}`,
            "css": {
              "width": "auto",
              "height": "24rpx",
              "top": `${shop_top + 64 + parseInt(i / 2) * 128 + 64}rpx`,
              "left": `${62 + i % 2 * 320 + 112}rpx`,
              "rotate": "0",
              "borderRadius": "0",
              "borderWidth": "1rpx",
              "borderColor": "#fff",
              "shadow": "",
              "mode": "auto"
            }
          });
        }
      }
    }
    // 底部二維碼
    card.views.push({
      "type": "image",
      "url": `${that.data.qrCodeUrl}`,
      "css": {
        "width": "180rpx",
        "height": "180rpx",
        "top": "1100rpx",
        "left": "516rpx",
        "rotate": "0",
        "borderRadius": "",
        "borderWidth": "1rpx",
        "borderColor": "#fff",
        "shadow": "",
        "mode": "scaleToFill"
      }
    });
    that.setData({
      template: card
    })
  },
  onImgErr(e) {
    wx.hideLoading()
    wx.showToast({
      title: '生成分享圖失敗瓶埋，請刷新頁面重試'
    })
  },
//生成圖片成功后會觸發(fā)的函數(shù)
  onImgOK(e) {
    wx.hideLoading()
    this.setData({
      sharePath: e.detail.path,
      visible: true,
    })
  },
// 打開授權(quán)設(shè)置頁面
  openSetting: function() {
    wx.openSetting();
    this.setData({
      showAuthDialog: false
    });
  },
  //獲取微信授權(quán)保存相冊
  getWritePhotos: function() {
    let that = this;
    wx.getSetting({
      success(res) {
        if (!res.authSetting['scope.writePhotosAlbum']) {
          wx.authorize({
            scope: 'scope.writePhotosAlbum',
            success() {
              that.setData({
                writePhotosAlbum: true
              });
            },
            fail() {
              that.setData({
                writePhotosAlbum: false
              });
            }
          });
        } else {
          that.setData({
            writePhotosAlbum: true
          });
        }
      }
    });
  },

界面wxml布局效果圖---> 保存到相冊的畫布效果圖


截屏2020-05-14下午4.09.29.png
截屏2020-05-14下午4.10.31.png
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌弃鸦，老刑警劉巖泌参，帶你破解...
    沈念sama閱讀 217,185評論 6贊 503
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異，居然都是意外死亡宣赔，警方通過查閱死者的電腦和手機，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,652評論 3贊 393
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門瞪浸，熙熙樓的掌柜王于貴愁眉苦臉地迎上來儒将，“玉大人，你說我怎么就攤上這事对蒲」澄茫” “怎么了？”我有些...
    開封第一講書人閱讀 163,524評論 0贊 353
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵蹈矮，是天一觀的道長砰逻。 經(jīng)常有香客問我，道長泛鸟，這世上最難降的妖魔是什么蝠咆？ 我笑而不...
    開封第一講書人閱讀 58,339評論 1贊 293
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮北滥，結(jié)果婚禮上刚操，老公的妹妹穿的比我還像新娘。我一直安慰自己再芋，他們只是感情好菊霜，可當(dāng)我...
    茶點故事閱讀 67,387評論 6贊 391
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著济赎，像睡著了一般鉴逞。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上联喘，一...
    開封第一講書人閱讀 51,287評論 1贊 301
  • 城市分裂傳說
    那天华蜒，我揣著相機與錄音辙纬，去河邊找鬼豁遭。 笑死，一個胖子當(dāng)著我的面吹牛贺拣，可吹牛的內(nèi)容都是我干的蓖谢。 我是一名探鬼主播，決...
    沈念sama閱讀 40,130評論 3贊 418
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼譬涡，長吁一口氣：“原來是場噩夢啊……” “哼闪幽！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起涡匀，我...
    開封第一講書人閱讀 38,985評論 0贊 275
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤盯腌，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后陨瘩，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體腕够，經(jīng)...
    沈念sama閱讀 45,420評論 1贊 313
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡级乍，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,617評論 3贊 334
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了帚湘。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片玫荣。...
    茶點故事閱讀 39,779評論 1贊 348
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖大诸，靈堂內(nèi)的尸體忽然破棺而出捅厂，到底是詐尸還是另有隱情，我是刑警寧澤资柔，帶...
    沈念sama閱讀 35,477評論 5贊 345
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布焙贷，位于F島的核電站，受9級特大地震影響贿堰，放射性物質(zhì)發(fā)生泄漏盈厘。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點故事閱讀 41,088評論 3贊 328
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一官边、第九天 我趴在偏房一處隱蔽的房頂上張望沸手。 院中可真熱鬧，春花似錦注簿、人聲如沸契吉。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,716評論 0贊 22
  • 一樁弒父案诡渴，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽捐晶。三九已至，卻和暖如春妄辩，著一層夾襖步出監(jiān)牢的瞬間惑灵，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,857評論 1贊 269
  • 情欲美人皮
    我被黑心中介騙來泰國打工眼耀， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留英支，地道東北人。 一個月前我還...
    沈念sama閱讀 47,876評論 2贊 370
  • 代替公主和親
    正文 我出身青樓哮伟，卻偏偏與公主長得像干花，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子楞黄，可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,700評論 2贊 354