devbox
Gausst松鼠会
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

微信小程序中把页面生成图片_lang="wxs"uni实现页面生成图片

作者：Gausst松鼠会 | 2024-05-28 23:05:08

赞

踩

lang="wxs"uni实现页面生成图片

这个问题我上网搜了一下，答案有多种，但是真正能用的没有几何。很多答案都是雷同，有的网友也不负责任，直接拿来照抄，自己也不跑一遍看看。哎，不说了，说多了全是泪。希望我们的技术达人在分享的时候，能够真实的走一遍代码，尽量能让我等小白看的懂啊。闹骚发过了，下面我们就进入正题吧(*^__^*) 嘻嘻……

今天分享的是不仅仅把页面生成图片，同时，也要满足能够识别图中的二维码。我们先来看看效果图。点击生成海报，就生成右侧图片

其中左边的图片是页面，右边是生成的图片。具体实现代码如下：

一、页面布局（wxml）

  1. <view class="am_box">
  2.  <view class="am_hysn">好友送您</view>
  3.  <view class="am_jyq">15元加油券</view>
  4.  
  5.  <!--福利开始-->
  6.   <view class="am_fuli">
  7.     <view class="am_bk">
  8.       <view class="am_title">用悦孚加油  享四大福利</view>
  9.     <view class="am_fltype">
  10.       <view class="am_type">每次加油都省钱</view>
  11.       <view class="am_type">实时查价更便捷</view>
  12.       <view class="am_type">油品保障资质全</view>
  13.       <view class="am_type">悦孚油站任你选</view>
  14.     </view>
  15.     </view>
  16.    
  17.   </view>
  18.  <!--福利结束-->
  19.  
  20.  <view class="am_result" style="{{'padding-left:' + winWidth}}">
  21.     <canvas class="canvas-poster" id="mycanvas" canvas-id="mycanvas"></canvas>
  22.   </view>
  23.   <view class="am_sub_title">油好  省钱  去悦孚</view>
  24.    <view class='am_Mselect'>
  25.         <button open-type="share" id="btn"  size="mini">
  26.             <image src="/images/share01@2x.png'" mode="aspectFill" class="am_wx"></image>
  27.           <text class="am_wxhy">微信好友</text>
  28.           </button>
  29.  
  30.         <view class="am_share" catchtap="clickSaveImg">
  31.           <image src="/images/savepic.png" mode="aspectFill" class="am_wx"></image>
  32.           <text class="am_wxhy">生成海报</text>
  33.         </view>
  34.     </view> 
  35. </view>
  36.  
  37. <!--分享开始-->
  38. <view class="sign_success_popup"  wx:if="{{canvasType}}">
  39.   <view class="popup_mask"></view>
  40.   <view class="popup_content">
  41.   <canvas class='canvas' canvas-id="hbmycanvas" id="hbmycanvas"  />
  42.   <view class="bottom-dialog-body">
  43.     <view class='Mcancel' bindtap='mCancel'><text>取消</text></view>
  44.     <view class="am_save" catchtap="saveImg">保存到本地相册</view>
  45.   </view>
  46. </view>
  47. </view>
  48.   <!--分享介绍-->

二、页面样式（wxss）

  1. .am_box {
  2.   width:100%;
  3.   height: 100%;
  4.   position: fixed;
  5.   top:0;
  6.   box-sizing: border-box;
  7.   padding:170rpx 40rpx 10rpx 40rpx;
  8.   display: flex;
  9.   flex-direction: column;
  10.   align-items: center;
  11.   background:url('背景图片') no-repeat;
  12.   background-size: 100% 100%;
  13.   overflow: hidden;
  14. }
  15.  
  16. .am_hysn {
  17.   color:#ffffff;
  18.   font-family: 'FZY3B';
  19.   font-size: 104rpx;
  20. }
  21.  
  22. .am_jyq {
  23.   color:#ffffff;
  24.   font-family: 'FZY3B';
  25.   font-weight: bold;
  26.   font-size: 120rpx;
  27.   line-height: 136rpx;
  28. text-shadow: 2rpx 3rpx 0rpx #FFAC3E;
  29. }
  30. .am_img {
  31.   width:100%;
  32.   margin:0 auto;
  33.   text-align: center;
  34.   box-sizing: border-box;
  35. }
  36. .am_img > image {
  37.   width:100%;
  38.   height:505px;
  39. }
  40. .canvas {
  41.   width: 100%;
  42.   height: -webkit-calc(100% - 44px);
  43.   height: -moz-calc(100% - 44px);
  44.   height: calc(100% - 44px);
  45. }
  46. .am_Mselect{
  47.   width:100%;
  48.  background:#ffffff;
  49.  display: flex;
  50.  justify-content: space-around;
  51.  align-items: center;
  52.  border-radius: 10rpx;
  53. }
  54. .am_wxhy {
  55.   color:#323232;
  56.   font-size:28rpx;
  57.   font-weight: 550;
  58. }
  59. .am_wx {
  60.   width:80rpx;
  61.   height:80rpx;
  62. }
  63.  
  64. #btn {
  65.   box-sizing: border-box;
  66.   display: flex;
  67.   flex-direction: column;
  68.   align-items: center;
  69.   /* padding:25rpx;*/
  70.   background:#ffffff; 
  71. }
  72. .am_share {
  73.   width:50%;
  74.   box-sizing: border-box;
  75.   display: flex;
  76.   flex-direction: column;
  77.   align-items: center;
  78.   padding:25rpx;
  79. }
  80. .bottom-positon{-webkit-transform:translateY(100%);transform:translateY(100%);}
  81. .modal{position:fixed; top:0; right:0; bottom:0; left:0; z-index:1000;}
  82. .modal-cancel{position:absolute; z-index:2000; top:0; right:0; bottom: 0; left:0; background:rgba(0,0,0,0.3);}
  83. .bottom-dialog-body{
  84.   width:100%;
  85.   box-sizing:border-box;
  86.   display:flex;
  87.   justify-content: space-around;
  88.   align-items: center;
  89.   margin-top:-5rpx;
  90. }
  91.  
  92. .Mcancel{
  93.   width:50%;
  94.   text-align: center;
  95.   background: #fff;
  96.   line-height: 80rpx;
  97.   height: 80rpx;
  98.   color:#333333;
  99.  }
  100.  
  101.  /**弹窗开始**/
  102.  .sign_success_popup {
  103.   position: fixed;
  104.   top: 0;
  105.   left: 0;
  106.   z-index: 100;
  107.   width: 100vw;
  108.   height: 100vh;
  109. }
  110.  
  111. .popup_mask {
  112.   position: absolute;
  113.   width: 100%;
  114.   height: 100%;
  115.   z-index: -1;
  116.   background: rgba(0, 0, 0, .33);
  117. }
  118.  
  119. .am_save {
  120.   width:50%;
  121.   box-sizing: border-box;
  122.   background:#19BE6B;
  123.   color:#FFFFFF;
  124.   text-align: center;
  125.   line-height: 80rpx;
  126.   height: 80rpx;
  127. }
  128.  
  129. .popup_content {
  130.   position: relative;
  131.   width: 90%;
  132.   height: 90%;
  133.   margin: 7vh auto;
  134.   padding: 20rpx 16rpx 0;
  135.   text-align: center;
  136.   outline:none;
  137.   background:transparent;
  138. }
  139.  
  140. /**弹窗结束**/
  141.  
  142. /**福利开始**/
  143. .am_fuli {
  144.   width:100%;
  145.   box-sizing: border-box;
  146.   background: #FFFFFF;
  147.  border-radius: 20rpx;
  148.  margin-top:50rpx;
  149. }
  150.  
  151. .am_bk {
  152.   width:100%;
  153.   box-sizing: border-box;
  154.   display: flex;
  155.   flex-direction: column;
  156.   align-items: center;
  157.   background:url('背景图片') no-repeat;
  158.   background-size: 100% 100%;
  159.   padding:50rpx 25rpx 50rpx 25rpx;
  160. }
  161.  
  162. .am_title {
  163.   font-size: 40rpx;
  164.   font-family: 'FZY3JW','FZY3B';
  165.   font-weight: 400;
  166.   color: #FF4200;
  167.   margin-bottom:50rpx;
  168. }
  169.  
  170. .am_fltype {
  171.   width:100%;
  172.   box-sizing: border-box;
  173.   display: flex;
  174.   justify-content: space-between;
  175.   align-items: center;
  176.   flex-wrap: wrap;
  177. }
  178.  
  179. .am_type {
  180.   width:48%;
  181.   box-sizing: border-box;
  182.   text-align: center;
  183.   height: 86rpx;
  184.   line-height: 86rpx;
  185. background: linear-gradient(180deg, #FDF0C4, #FDBE7A);
  186. border-radius: 13rpx;
  187. color:#6E3F1A;
  188. font-size: 28rpx;
  189. margin-bottom:25rpx;
  190. }
  191. /**福利结束**/
  192.  
  193. .am_result {
  194.    width: 240rpx;
  195.   height: 240rpx;
  196.   /* background: #FFFFFF;
  197.   border: 2px solid #9FCA4C;
  198.   border-radius: 25rpx;
  199.   box-sizing: border-box;  */
  200.   margin-top:30rpx;
  201.   text-align: center;
  202.   padding-left:20rpx;
  203. }
  204.  
  205. .canvas-poster {
  206.   height:200rpx;
  207.  }
  208.  
  209.  .am_sub_title {
  210.    width:100%;
  211.    box-sizing: border-box;
  212.    text-align: center;
  213.   font-size: 32rpx;
  214.   font-family: FZZhunYuan-M02;
  215.   font-weight: 400;
  216.   color: #FFFFFF;
  217.   line-height: 45rpx;
  218.   text-shadow: 1rpx 1rpx 0rpx #393939;
  219.   margin-top:0rpx;
  220.   margin-bottom:20rpx;
  221.  }

三、页面JS处理（js）

  1. const app = getApp();
  2. const util = require('../../../utils/util.js');
  3. const moment = require('../../../utils/moment.js'); //时间处理，可以从网上下载
  4. const baseUrl = getApp().globalData.baseUrl;
  5. const qrcode = require('../../../utils/weapp.qrcode'); //生成二维码，可以从网上下载
  6. Page({
  7.  
  8.   /**
  9.    * 页面的初始数据
  10.    */
  11.   data: {
  12.     title:'邀请好友得加油券',
  13.     money:15,
  14.     imgUrl:getApp().globalData.imgUrl,
  15.     _width: 0, //手机屏宽
  16.     _heigth: 0,//手机屏高
  17.     swiperHeight: 300,//主图图片高度
  18.     canvasType: false,//canvas是否显示
  19.     loadImagePath: '',//下载的图片
  20.     imageUrl: 'https://www.xx.com/uploadPath/miniapppic/fx_bg002.png', //主图网络路径
  21.     picUrl: 'https://www.xx.com/uploadPath/miniapppic/fx_pic0.png',//福利网络图片
  22.     codeUrl: '',//二维码网络路径
  23.     localImageUrl: '', //主图本地路径
  24.     localCodeUrl: '', //绘制的二维码图片本地路径
  25.     localPicUrl:'', //绘制福利图片本地路径
  26.     animationData: {},
  27.     tel:'',
  28.     winWidth:'',
  29.   },
  30.  
  31.   /**
  32.   * 生成二维码带LOGO
  33.   */
  34.  formSubmit(mobile) {
  35.   if (mobile) {
  36.    var that = this;
  37.    wx.showToast({
  38.      title: '二维码生成中...',
  39.      icon: 'loading',
  40.      duration: 1000
  41.    });
  42.    qrcode({
  43.     width:100,
  44.     height:100,
  45.     canvasId:'mycanvas',
  46.      text:'https://www.xxx.com/inviteRegister?mobile=' + mobile,
  47.      image:{
  48.       imageResource:'../../../images/am_logo.png', //logo图片
  49.       dx: 35,
  50.       dy: 35,
  51.       dWidth: 30,
  52.       dHeight: 30
  53.      },
  54.      cbResult: function(res) {
  55.          console.log('回调：',res)
  56.       }
  57.    });
  58.    setTimeout(function () {
  59.      wx.hideToast()
  60.      wx.canvasToTempFilePath({
  61.       canvasId: 'mycanvas',
  62.       success: function (res) {
  63.         console.log('临时二维码地址：',res)
  64.         var codeUrl = res.tempFilePath;
  65.         that.setData({
  66.           codeUrl: codeUrl,
  67.         });
  68.       },
  69.       fail: function (res) {
  70.         console.log(res);
  71.       }
  72.     });
  73.    }, 1000);
  74.   }
  75. },
  76.  
  77.  
  78.   /**
  79.    * 关闭弹窗
  80.    */
  81.   mCancel() {
  82.     this.setData({
  83.       canvasType:false,
  84.     });
  85.   },
  86.  
  87. //生成海报
  88.   clickSaveImg() {
  89.     let that = this
  90.     // 获取屏幕宽高
  91.     wx.showLoading({
  92.       title: '正在生成海报',
  93.     })
  94.     /*获取手机宽高*/
  95.     let imgHeigth = this.data.swiperHeight
  96.     let imgUrl = this.data.imageUrl
  97.     let qrcodeUrl = this.data.codeUrl
  98.     wx.getSystemInfo({
  99.       success(res) {
  100.         that.setData({
  101.           _width: res.windowWidth,
  102.           _heigth: res.windowHeight,
  103.           canvasType: true,
  104.         })
  105.         // 获取图片信息生成canvas
  106.         that.getImginfo([imgUrl, qrcodeUrl], 0);
  107.       }
  108.     })
  109.   },
  110.  
  111.   //把福利图片变成本地图片
  112.   getPicImgInfo() {
  113.     let that = this;
  114.     wx.getImageInfo({
  115.       src: that.data.picUrl,
  116.       success:function(res) {
  117.         console.log('把福利图片变成本地图片',res)
  118.         that.setData({
  119.           localPicUrl:res.path,
  120.         });
  121.       },
  122.       fail:function(err) {
  123.         console.log('把福利图片变成本地图片失败了：', err) 
  124.       }
  125.     })
  126.   },
  127.  
  128. // 获取图片信息
  129. getImginfo(urlArr, _type) {
  130.   let that = this;
  131.     wx.getImageInfo({
  132.       src: urlArr[_type], 
  133.       success: function (res) {
  134.         console.log('是网络图片的本地地址',res)
  135.         //res.path是网络图片的本地地址
  136.         if (_type === 0) { //背景图片
  137.           that.setData({
  138.             localImageUrl: res.path,
  139.           })
  140.           that.getImginfo(urlArr, 1)
  141.         } else {
  142.           that.setData({ //二维码
  143.             localCodeUrl: res.path,
  144.           })
  145.           // 创建canvas图片
  146.           that.createNewImg();
  147.         }
  148.       },
  149.       fail: function (res) {
  150.         //失败回调
  151.         console.log('Fail：', _type, res)
  152.       }
  153.     });
  154. },
  155.  
  156. //绘制canvas
  157. createNewImg: function () {
  158.   let _width = this.data._width,
  159.     _heigth = this.data._heigth; //屏幕宽与高
  160.  
  161.   let imgHeigth = this.data.swiperHeight, //原图片高度
  162.     scale = (_width - 40) / _width, //缩小比例
  163.     that = this;
  164.   let imgH = imgHeigth * scale; //绘制时图片显示高度  
  165.   let ctx = wx.createCanvasContext('hbmycanvas');
  166.  
  167.   //绘制图片
  168.   ctx.drawImage(that.data.localImageUrl, 0, 0, util.rpxToPx(685), util.rpxToPx(1285));
  169.  
  170.   // 绘制标题
  171.   ctx.setFontSize(35);
  172.   ctx.setFillStyle('#ffffff');
  173.   ctx.fillText('好友送您', util.rpxToPx(190), 80, imgH + 40, txtWidth);
  174.   let txtWidth = _width - 60 + 30 - 100 - 50; //文字的宽度
  175.   let bigTitle = that.data.money + '元加油券';
  176.   // 绘制大标题
  177.   ctx.setFontSize(50);
  178.   ctx.setFillStyle('#ffffff');
  179.    ctx.fillText(bigTitle, util.rpxToPx(90), 150, imgH + 65, txtWidth);
  180.   //绘制福利图片
  181.   ctx.drawImage(that.data.localPicUrl, util.rpxToPx(60),util.rpxToPx(350), util.rpxToPx(505), 220);
  182.   // 绘制二维码
  183.   ctx.drawImage(this.data.localCodeUrl, util.rpxToPx(210),  util.rpxToPx(800), 300, 100);
  184.  
  185.   // 绘制小程序名称
  186.   ctx.setFontSize(15);
  187.   ctx.setFillStyle('#ffffff');
  188.   ctx.fillText('油好  省钱  去悦孚',  util.rpxToPx(190), util.rpxToPx(1030), imgH + 105, txtWidth);
  189.   
  190.  
  191.   // 显示绘制
  192.   ctx.draw();
  193.  
  194.   //将生成好的图片保存到本地，需要延迟一会，绘制期间耗时
  195.   setTimeout(function () {
  196.     wx.canvasToTempFilePath({
  197.       canvasId: 'hbmycanvas',
  198.       success: function (res) {
  199.         var tempFilePath = res.tempFilePath;
  200.         that.setData({
  201.           loadImagePath: tempFilePath,
  202.         });
  203.       },
  204.       fail: function (res) {
  205.         console.log(res);
  206.       }
  207.     });
  208.   }, 500);
  209.   //关闭提示
  210.   wx.hideLoading();
  211. },
  212.  
  213. //保存图片
  214. saveImg() {
  215.   let that = this
  216.   wx.getSetting({
  217.     success(res) {
  218.       if (res.authSetting['scope.writePhotosAlbum']) {
  219.          // 用户已经授权
  220.          that.saveImage();
  221.       } else {
  222.         //未授权
  223.         wx.authorize({
  224.           scope: 'scope.writePhotosAlbum',
  225.           success() {
  226.             that.saveImage();
  227.           },
  228.           fail(err) {
  229.             if (err && err.errMsg.endsWith("auth deny")) {
  230.               wx.showModal({
  231.                 title: '授权添加到相册',
  232.                 content: '需要获取您的添加相册权限，请确认授权，否则分享功能无法正常使用',
  233.                 success: function (resolve) {  
  234.                   if (resolve.confirm) { // 用户同意设置授权
  235.                     wx.openSetting({
  236.                       success(res) {
  237.                         if (res && res.authSetting['scope.writePhotosAlbum']) {
  238.                           that.saveImage(); // 执行保存函数
  239.                         }
  240.                       },
  241.                       fail(res) {   // 用户拒绝设置授权
  242.                         console.log(res)
  243.                         wx.showToast({
  244.                           title: '没有权限，保存失败',
  245.                           icon:'none'
  246.                         })
  247.                       }
  248.                     })
  249.                   } else {  // 用户拒绝设置
  250.                     wx.showToast({
  251.                       title: '没有权限，保存失败',
  252.                       icon:'none'
  253.                     })
  254.                   }
  255.                 }
  256.               })
  257.             } else {
  258.               wx.showModal({
  259.                   title: '提示',
  260.                   content: '获取权限失败，将无法保存到相册哦~',
  261.                   showCancel: false,
  262.               })
  263.             }
  264.           },
  265.         });
  266.       }
  267.     },
  268.   });
  269. },
  270.  
  271.  
  272. saveImage() {
  273.   let that = this;
  274.   //不知道是什么原因，手机环境能正常显示
  275.   wx.saveImageToPhotosAlbum({  //保存图片到相册
  276.     filePath: that.data.loadImagePath, //生成图片临时路径
  277.     success: function () {
  278.         wx.showToast({
  279.             title: "图片已保存至相册！",
  280.             duration: 2000
  281.         })
  282.     }
  283. })
  284. },
  285.  
  286.  
  287.  
  288.   /**
  289.    * 生命周期函数--监听页面加载
  290.    */
  291.   onLoad(options) {
  292.     let userInfo =  wx.getStorageSync('userInfo');
  293.     let that = this;
  294.     console.log('用户：',userInfo)
  295.     if (userInfo) {
  296.        this.formSubmit(userInfo.mobile); //生成二维码
  297.        this.getPicImgInfo(); 
  298.        this.setData({
  299.          tel:userInfo.mobile
  300.        });
  301.     }  else {
  302.       util.isLogin(); //登录判断
  303.     }
  304.  
  305.     wx.getSystemInfo({
  306.       success (res) {
  307.         console.log('屏幕宽度',res)
  308.         that.setData({
  309.           winWidth:res.windowWidth/7 + 'rpx'
  310.         });
  311.       }
  312.     })
  313.   },
  314.  
  315.   /**
  316.    * 生命周期函数--监听页面初次渲染完成
  317.    */
  318.   onReady() {
  319.  
  320.   },
  321.  
  322.   /**
  323.    * 生命周期函数--监听页面显示
  324.    */
  325.   onShow() {
  326.  
  327.   },
  328.  
  329.   /**
  330.    * 生命周期函数--监听页面隐藏
  331.    */
  332.   onHide() {
  333.  
  334.   },
  335.  
  336.   /**
  337.    * 生命周期函数--监听页面卸载
  338.    */
  339.   onUnload() {
  340.  
  341.   },
  342.  
  343.   /**
  344.    * 页面相关事件处理函数--监听用户下拉动作
  345.    */
  346.   onPullDownRefresh() {
  347.  
  348.   },
  349.  
  350.   /**
  351.    * 页面上拉触底事件的处理函数
  352.    */
  353.   onReachBottom() {
  354.  
  355.   },
  356.  
  357.   /**
  358.    * 用户点击右上角分享
  359.    */
  360.   onShareAppMessage() {
  361.     return {
  362.       title: this.data.title||'邀请好友得加油券',
  363.       path: "/pages/xx/xx?mobile=" + this.data.tel + '&lx=1&id=klk',
  364.       success: function (res) {
  365.  
  366.       },
  367.       };
  368.   }
  369. })

四、utils相关函数

  1. //utils相关函数
  2.  
  3. /**
  4.  * 判断用户是否登录
  5.  */
  6.  function isLogin() {
  7. 	wx.showModal({
  8. 	title:'提示',
  9.   content:'请先登录，然后进行后续操作！',
  10.   showCancel: false, 
  11. 	success:function(res) {
  12. 		if (res.confirm) {
  13. 				wx.reLaunch({
  14. 					url:'/pages/index/index'
  15. 				})
  16. 		}
  17. 	}
  18. 	})
  19. }
  20.  
  21. //尺寸转换
  22. function rpxToPx(data = 0) {
  23.   return ((data * wx.getSystemInfoSync().windowWidth)) / 700
  24. }
  25.  
  26. module.exports = {
  27. isLogin,
  28. rpxToPx
  29. }

以上就是微信小程序生成海报的过程，本人亲测有效。里面涉及到的图片地址自己替换

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/639657
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号