devbox
凡人多烦事01
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

微信小程序分享生成海报_小程序海报分享邀请好友

作者：凡人多烦事01 | 2024-05-28 22:58:05

赞

踩

小程序海报分享邀请好友

本文转自：微信小程序实现生成海报并且保存本地 - 张正-博客园 - 博客园

html：

  1. <view>
  2.   <image src="{{img}}" class='bgImg'></image>
  3.   <text class='mine'>我的邀请码</text>
  4.   <text class='code'>{{code}}</text>
  5.   <text class='who'>谁邀请你一起吃面?</text>
  6.   <view class='inputBox'>
  7.     <input placeholder='输入朋友的验证码' class='input' bindinput='bindKeyInput'/>
  8.     <button bindtap='btnclick' class='btn'>提交</button>
  9.   </view>
  10.   <text class='tishi'>输入朋友的邀请码，朋友和你各自获得通用优惠券1张</text>
  11.   <text class='shareText'>生成海报分享至</text>
  12.   <view class='imgBox'>
  13.     <button open-type="share" class='zfbtn'><image src="{{wechat}}" class='img'></image></button>
  14.     <button class='zfbtn m_l' bindtap='formSubmit'><image src="{{quan}}" class='img'></image></button>
  15.   </view>
  16.  
  17.   <!--生成海报  -->
  18.    <!-- <view class="img-box">
  19.         
  20.     </view> -->
  21.     <view class='imagePathBox' hidden="{{maskHidden == false}}">
  22.       <image src="{{imagePath}}" class='shengcheng'></image>
  23.       <button class='baocun' bindtap='baocun'>保存相册，分享到朋友圈</button>
  24.     </view>
  25.    <view hidden="{{maskHidden == false}}" class="mask"></view> 
  26.   <view class="canvas-box">
  27.       <canvas  style="width: 375px;height: 667px;position:fixed;top:9999px" canvas-id="mycanvas"/>
  28.   </view>  
  29. </view>

css部分：

  1. .bgImg{
  2.   display: block;
  3.   width: 100%;
  4.   height: 366rpx;
  5. }
  6. .mine{
  7.   display: block;
  8.   text-align: center;
  9.   color: #333;
  10.   margin-top: 44rpx;
  11. }
  12. .code{
  13.   display: block;
  14.   text-align: center;
  15.   color: #333;
  16.   font-size: 76rpx;
  17.   font-weight: bold;
  18.   margin-top: 30rpx;
  19. }
  20. .who{
  21.   display: block;
  22.   margin-top: 80rpx;
  23.   font-size: 32rpx;
  24.   color: #333;
  25.   text-align: center;
  26. }
  27. .inputBox{
  28.   text-align: center;
  29.   margin-top: 44rpx;
  30. }
  31. .input{
  32.   text-align: center;
  33.   width: 440rpx;
  34.   height: 88rpx;
  35.   border-radius: 44rpx;
  36.   background: #f5f5f5;
  37.   font-size: 32rpx;
  38.   display: inline-block;
  39. }
  40. .btn{
  41.   width: 160rpx;
  42.   height: 88rpx;
  43.   border-radius: 44rpx;
  44.   background:linear-gradient(90deg,rgba(255,226,0,1),rgba(255,200,11,1));
  45.   box-shadow: 0px 4px 8px 0px rgba(255,200,11,0.5); 
  46.   color:#333;
  47.   font-size: 32rpx;
  48.   display: inline-block;
  49.   line-height: 88rpx;
  50.   margin-left: 40rpx;
  51. }
  52. button[class="btn"]::after {
  53.   border: 0;
  54. } 
  55. .tishi{
  56.   display: block;
  57.   text-align: center;
  58.   color: #999;
  59.   margin-top: 30rpx;
  60. }
  61. .shareText{
  62.   display: block;
  63.   text-align: center;
  64.   color: #333;
  65.   font-size: 28rpx;
  66.   margin-top: 100rpx;
  67. }
  68. .imgBox{
  69.   text-align: center;
  70.   width: 100%;
  71.   margin-top:60rpx;
  72.   padding-bottom: 120rpx;
  73. }
  74. .img{
  75.   display: inline-block;
  76.   width: 100%;
  77.   height: 100%;
  78. }
  79. .m_l{
  80.   margin-left: 180rpx;
  81. }
  82. .zfbtn{
  83.   display: inline-block;
  84.   width: 120rpx;
  85.   height: 120rpx;
  86.   border-radius: 50%;
  87.   background: transparent;
  88.   outline: none;
  89.   border: 0;
  90.   padding: 0;
  91. }
  92. button[class="zfbtn"]::after {
  93.   border: 0;
  94. } 
  95. button[class="zfbtn m_l"]::after {
  96.   border: 0;
  97. } 
  98. .imagePathBox{
  99.   width: 100%;
  100.   height: 100%;
  101.   background: rgba(0,0,0,0.7);
  102.   position: fixed;
  103.   top: 0;
  104.   left: 0;
  105.   right: 0;
  106.   bottom: 0;
  107.   z-index: 10;
  108. }
  109. .shengcheng{
  110.   width: 80%;
  111.   height: 80%;
  112.   position: fixed;
  113.   top: 50rpx;
  114.   left: 50%;
  115.   margin-left: -40%;
  116.   z-index: 10;
  117. }
  118. .baocun{
  119.   display: block;
  120.   width: 80%;
  121.   height: 80rpx;
  122.   padding: 0;
  123.   line-height: 80rpx;
  124.   text-align: center;
  125.   position: fixed;
  126.   bottom: 50rpx;
  127.   left: 10%;
  128.   background: #ffe200;
  129.   color: #333;
  130.   font-size: 32rpx;
  131.   border-radius: 44rpx;
  132. }
  133. button[class="baocun"]::after{
  134.   border: 0;
  135. }

js部分：

  1. // pages/prize/prize.js
  2. const app = getApp()
  3. Page({
  4.  
  5.   /**
  6.    * 页面的初始数据
  7.    */
  8.   data: {
  9.     img:"../../images/gobg.png",
  10.     wechat:"../../images/wechat.png",
  11.     quan:"../../images/quan.png",
  12.     code:"E7AI98",
  13.     inputValue:"",
  14.     maskHidden: false,
  15.     name:"",
  16.     touxiang:"",
  17.     code: "E7A93C"
  18.   },
  19.   //获取输入框的值
  20.   bindKeyInput:function(e){
  21.     this.setData({
  22.       inputValue: e.detail.value
  23.     })
  24.   },
  25.   //点击提交按钮
  26.   btnclick:function(){
  27.     var text = this.data.inputValue
  28.     wx.showToast({
  29.       title: text,
  30.       icon: 'none',
  31.       duration: 2000
  32.     })
  33.   },
  34.   /**
  35.    * 生命周期函数--监听页面加载
  36.    */
  37.   onLoad: function (options) {
  38.     var that = this;
  39.     wx.getUserInfo({
  40.       success: res => {
  41.         console.log(res.userInfo,"huoqudao le ")
  42.         this.setData({
  43.           name: res.userInfo.nickName,
  44.         })
  45.         wx.downloadFile({
  46.           url: res.userInfo.avatarUrl, //仅为示例，并非真实的资源
  47.           success: function (res) {
  48.             // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
  49.             if (res.statusCode === 200) {
  50.               console.log(res, "reererererer")
  51.               that.setData({
  52.                 touxiang: res.tempFilePath
  53.               })
  54.             }
  55.           }
  56.         })
  57.       }
  58.     })
  59.  
  60.   },
  61.   //将canvas转换为图片保存到本地，然后将图片路径传给image图片的src
  62.   createNewImg: function () {
  63.     var that = this;
  64.     var context = wx.createCanvasContext('mycanvas');
  65.     context.setFillStyle("#ffe200")
  66.     context.fillRect(0, 0, 375, 667)
  67.     var path = "/images/gobg.png";
  68.     //将模板图片绘制到canvas,在开发工具中drawImage()函数有问题，不显示图片
  69.     //不知道是什么原因，手机环境能正常显示
  70.     context.drawImage(path, 0, 0, 375, 183);
  71.     var path1 = that.data.touxiang;
  72.     console.log(path1,"path1")
  73.     //将模板图片绘制到canvas,在开发工具中drawImage()函数有问题，不显示图片
  74.     var path2 = "/images/txquan.png";
  75.     var path3 = "/images/heise.png";
  76.     var path4 = "/images/wenziBg.png";
  77.     var path5 = "/images/wenxin.png";
  78.     context.drawImage(path2, 126, 186, 120, 120);
  79.     //不知道是什么原因，手机环境能正常显示
  80.     // context.save(); // 保存当前context的状态
  81.  
  82.     var name = that.data.name;
  83.     //绘制名字
  84.     context.setFontSize(24);
  85.     context.setFillStyle('#333333');
  86.     context.setTextAlign('center');
  87.     context.fillText(name, 185, 340);
  88.     context.stroke();
  89.     //绘制一起吃面标语
  90.     context.setFontSize(14);
  91.     context.setFillStyle('#333333');
  92.     context.setTextAlign('center');
  93.     context.fillText("邀请你一起去吃面", 185, 370);
  94.     context.stroke();
  95.     //绘制验证码背景
  96.     context.drawImage(path3, 48, 390, 280, 84);
  97.     //绘制code码
  98.     context.setFontSize(40);
  99.     context.setFillStyle('#ffe200');
  100.     context.setTextAlign('center');
  101.     context.fillText(that.data.code, 185, 435);
  102.     context.stroke();
  103.     //绘制左下角文字背景图
  104.     context.drawImage(path4, 25, 520, 184, 82);
  105.     context.setFontSize(12);
  106.     context.setFillStyle('#333');
  107.     context.setTextAlign('left');
  108.     context.fillText("进入小程序输入朋友的邀请", 35, 540);
  109.     context.stroke();
  110.     context.setFontSize(12);
  111.     context.setFillStyle('#333');
  112.     context.setTextAlign('left');
  113.     context.fillText("码，朋友和你各自获得通用", 35, 560);
  114.     context.stroke();
  115.     context.setFontSize(12);
  116.     context.setFillStyle('#333');
  117.     context.setTextAlign('left');
  118.     context.fillText("优惠券1张哦~", 35, 580);
  119.     context.stroke();
  120.     //绘制右下角扫码提示语
  121.     context.drawImage(path5, 248, 578, 90, 25);
  122.     //绘制头像
  123.     context.arc(186, 246, 50, 0, 2 * Math.PI) //画出圆
  124.     context.strokeStyle = "#ffe200";
  125.     context.clip(); //裁剪上面的圆形
  126.     context.drawImage(path1, 136, 196, 100, 100); // 在刚刚裁剪的园上画图
  127.     context.draw();
  128.     //将生成好的图片保存到本地，需要延迟一会，绘制期间耗时
  129.     setTimeout(function () {
  130.       wx.canvasToTempFilePath({
  131.         canvasId: 'mycanvas',
  132.         success: function (res) {
  133.           var tempFilePath = res.tempFilePath;
  134.           that.setData({
  135.             imagePath: tempFilePath,
  136.             canvasHidden:true
  137.           });
  138.         },
  139.         fail: function (res) {
  140.           console.log(res);
  141.         }
  142.       });
  143.     }, 200);
  144.   },
  145.   //点击保存到相册
  146.   baocun:function(){
  147.     var that = this
  148.     wx.saveImageToPhotosAlbum({
  149.       filePath: that.data.imagePath,
  150.       success(res) {
  151.         wx.showModal({
  152.           content: '图片已保存到相册，赶紧晒一下吧~',
  153.           showCancel: false,
  154.           confirmText: '好的',
  155.           confirmColor: '#333',
  156.           success: function (res) {
  157.             if (res.confirm) {
  158.               console.log('用户点击确定');
  159.               /* 该隐藏的隐藏 */
  160.               that.setData({
  161.                 maskHidden: false
  162.               })
  163.             }
  164.           },fail:function(res){
  165.             console.log(11111)
  166.           }
  167.         })
  168.       }
  169.     })
  170.   },
  171.   //点击生成
  172.   formSubmit: function (e) {
  173.     var that = this;
  174.     this.setData({
  175.       maskHidden: false
  176.     });
  177.     wx.showToast({
  178.       title: '装逼中...',
  179.       icon: 'loading',
  180.       duration: 1000
  181.     });
  182.     setTimeout(function () {
  183.       wx.hideToast()
  184.       that.createNewImg();
  185.       that.setData({
  186.         maskHidden: true
  187.       });
  188.     }, 1000)
  189.   },
  190.  
  191.   /**
  192.    * 生命周期函数--监听页面初次渲染完成
  193.    */
  194.   onReady: function () {
  195.   
  196.   },
  197.  
  198.   /**
  199.    * 生命周期函数--监听页面显示
  200.    */
  201.   onShow: function () {
  202.     var that = this;
  203.     wx.getUserInfo({
  204.       success: res => {
  205.         console.log(res.userInfo, "huoqudao le ")
  206.         this.setData({
  207.           name: res.userInfo.nickName,
  208.         })
  209.         wx.downloadFile({
  210.           url: res.userInfo.avatarUrl, //仅为示例，并非真实的资源
  211.           success: function (res) {
  212.             // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
  213.             if (res.statusCode === 200) {
  214.               console.log(res, "reererererer")
  215.               that.setData({
  216.                 touxiang: res.tempFilePath
  217.               })
  218.             }
  219.           }
  220.         })
  221.       }
  222.     })
  223.   },
  224.  
  225.   /**
  226.    * 生命周期函数--监听页面隐藏
  227.    */
  228.   onHide: function () {
  229.   
  230.   },
  231.  
  232.   /**
  233.    * 生命周期函数--监听页面卸载
  234.    */
  235.   onUnload: function () {
  236.   
  237.   },
  238.  
  239.   /**
  240.    * 页面相关事件处理函数--监听用户下拉动作
  241.    */
  242.   onPullDownRefresh: function () {
  243.   
  244.   },
  245.  
  246.   /**
  247.    * 页面上拉触底事件的处理函数
  248.    */
  249.   onReachBottom: function () {
  250.   
  251.   },
  252.  
  253.   /**
  254.    * 用户点击右上角分享
  255.    */
  256.   onShareAppMessage: function (res) {
  257.     return {
  258.       title:"这个是我分享出来的东西",
  259.       success:function(res){
  260.         console.log(res,"转发成功")
  261.       },
  262.       fail:function(res){
  263.         console.log(res,"转发失败")
  264.       }
  265.     }
  266.   }
  267. })

 

 

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

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

  

闽ICP备14008679号