美文网首页
小程序截图保存到相册 绘图(使用painter)

小程序截图保存到相册 绘图(使用painter)

作者: 考拉小姐咩 | 来源:发表于2020-05-14 16:11 被阅读0次

微信小程序,截屏截图,都需要重新绘制画布,生成图片.
简单的静态布局,可以直接使用canvas.
然而,大量动态数据, 动态布局, 使用canvas,实现起来就有些过于繁琐了.在实现对界面截图的过程中, 使用到了painter组件.接下来介绍一下功能实现过程中painter的使用.

.json文件

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

.wxml文件

palette: 是绘制属性,赋值后, 画布绘制保存到本地,就是按照此属性的赋值数据来的.
dancePalette: 是展示在现存界面里的布局;
在实现截图功能时, 还是觉得 wxml的布局效率比较精准, 比较高, 所以展示给用户的, 是用wxml实现的布局.并没有给dancePalette赋值,当然在调试的时候 也是可以给dancePalette直接赋和palette一样的值, 来查看绘制效果的, 具体用不用,看个人习惯和项目需求;

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

.wxss文件

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

.js文件(核心绘制代码)
注:

*绘制代码看似比较繁琐, 其实有辅助工具的哟painter-custom-poster,
可以先利用painter-custom-poster生成大概布局数据,再进行微调, 很方便*

painter-custom-poster地址

为了 方便动态赋值实现动态布局,我直接在.js文件里处理了布局数据. 如果界面相对简单, 可以独立出来一个.js 文件,导入本界面index.js文件中.

//这里额外创建了一个.js文件,将一些静态布局数据分离了出去. 所以需要做一下导入
import Card from './draw/getpic.js';
  onShow: function() {
    this.getWritePhotos();//获取微信授权保存相册
  },
//此函数就是简单的界面数据请求,不做赘述.将drawPic函数在此调用确保绘制图片的时候,数据已经拿到
getCardDetail: function(cardId) {
app.$ajax({
      url: '本页面数据网络请求接口',
      data: {
      入参名:入参
      },
      contentType: "application/json",
      method: "GET"
    }).then(res => {
        that.drawPic();
    });
}

// 绘制
  drawPic: function() {
//这里额外创建了一个.js文件,将一些静态布局数据分离了出去. 
    let card = new Card().palette();
    this.setData({
      template: card,
    });
    //绘制动态数据
    this.manageCardPainterPhoto();
  },
    //绘制动态数据
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: '生成分享图失败，请刷新页面重试'
    })
  },
//生成图片成功后会触发的函数
  onImgOK(e) {
    wx.hideLoading()
    this.setData({
      sharePath: e.detail.path,
      visible: true,
    })
  },
// 打开授权设置页面
  openSetting: function() {
    wx.openSetting();
    this.setData({
      showAuthDialog: false
    });
  },
  //获取微信授权保存相册
  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

相关文章

网友评论

      本文标题：小程序截图保存到相册 绘图(使用painter)

      本文链接：https://www.haomeiwen.com/subject/kqitohtx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|小程序截图保存到相册 绘图(使用painter)|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！