小程序分享海报2020-08-09

其他 2020-10-03 18:39:29 阅读次数: 0

效果图
2.png

1.png

#HB.js

// pages/prize/prize.js
const app = getApp()
const context = wx.createCanvasContext('myCanvas')
Page({

  /**
   * 页面的初始数据
   */
  data: {
    img: "../images/HB/gobg.png",
    imgm: "../images/HB/gobgm.png",
    wechat: "../images/HB/wechat.png",
    quan: "../images/HB/quan.png",
    code: "8",
    maskHidden: false,
    name: "",
    touxiang: ""
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log("options", options)
    this.setData({
      site: options.site,
      code: options.value
    })
    var that = this;
        // 判断用户是否授权登录
        wx.getSetting({
          success: function (res) {
            // 判断是否授权
            if (res.authSetting['scope.userInfo']) {
              //获取用户信息
              wx.getUserInfo({
                success: function (res) {
                  //用户已经授权过，添加用户信息
                  // var that = this
                  //wx.setStorageSync('nickName', res.userInfo.nickName)
                  //wx.setStorageSync('avatarUrl', res.userInfo.avatarUrl)
                }
              });
            } else {
              wx.showToast({
                title: '请授权登录！',
                icon: 'none',
                duration: 1500,
                success: function () {
                  //定时器，未授权1.5秒后跳转授权页面
                  setTimeout(function () {
                    wx.reLaunch({
                      url: '../index/index',
                    })
                  }, 1500);
                }
              })
            }
          }
        })
    wx.getUserInfo({
      success: res => {
        console.log(res.userInfo, "huoqudao le ")
        this.setData({
          name: res.userInfo.nickName,
        })
        wx.downloadFile({
          url: res.userInfo.avatarUrl, //仅为示例，并非真实的资源
          success: function (res) {
            // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
            if (res.statusCode === 200) {
              console.log(res, "reererererer")
              that.setData({
                touxiang: res.tempFilePath
              })
            }
          }
        })
      }
    })

  },
  //将canvas转换为图片保存到本地，然后将图片路径传给image图片的src
  createNewImg: function () {
    var that = this;
    var context = wx.createCanvasContext('mycanvas');
    context.setFillStyle("#ffe200")
    context.fillRect(0, 0, 375, 667)
    var path = "../images/HB/gobg.png";
    //将模板图片绘制到canvas,在开发工具中drawImage()函数有问题，不显示图片
    //不知道是什么原因，手机环境能正常显示
    context.drawImage(path, 0, 0, 375, 183);
    var path1 = this.data.touxiang;
    console.log(path1, "path1")
    //将模板图片绘制到canvas,在开发工具中drawImage()函数有问题，不显示图片
    var path2 = "../images/HB/bg.png";
    var path3 = "../images/HB/heise.png";
    var path4 = "../images/HB/wenxin.png";
    var path5 = "../images/HB/sm.png";
    var path6 = "../images/HB/MA.jpg";
    context.drawImage(path2, 126, 186, 120, 120);
    //不知道是什么原因，手机环境能正常显示
    context.save(); // 保存当前context的状态

    var name = that.data.name;
    //绘制名字
    context.setFontSize(24);
    context.setFillStyle('#333333');
    context.setTextAlign('center');
    context.fillText(name, 185, 340);
    context.stroke();
    //绘制一起吃面标语
    context.setFontSize(16);
    context.setFillStyle('#333333');
    context.setTextAlign('center');
    context.fillText("邀你一起入职美团" + "大陆" + "专送骑手", 185, 370);
    context.stroke();
    //绘制验证码背景
    context.drawImage(path3, 48, 390, 280, 84);
    //绘制code码
    context.setFontSize(40);
    context.setFillStyle('#ffe200');
    context.setTextAlign('center');
    context.fillText("首月8元起", 185, 435);
    context.stroke();
    //绘制左下角文字背景图
    context.drawImage(path4, 25, 520, 184, 82);
    context.setFontSize(12);
    context.setFillStyle('#333');
    context.setTextAlign('left');
    context.fillText("正常干7000---9000元/月", 35, 540);
    context.stroke();
    context.setFontSize(12);
    context.setFillStyle('#333');
    context.setTextAlign('left');
    context.fillText("用心干8000---10000元/月", 35, 560);
    context.stroke();
    context.setFontSize(12);
    context.setFillStyle('#333');
    context.setTextAlign('left');
    context.fillText("努力干1W+++++", 35, 580);
    context.stroke();
    //绘制右中二维码
    context.drawImage(path6, 260, 513, 64, 60); // 左 上 宽 高
    //绘制右下角扫码提示语
    context.drawImage(path5, 248, 578, 90, 25);
    //绘制头像
    context.arc(186, 246, 50, 0, 2 * Math.PI) //画出圆
    context.strokeStyle = "#ffe200";
    context.clip(); //裁剪上面的圆形
    context.drawImage(path1, 136, 196, 100, 100); // 在刚刚裁剪的园上画图
    context.draw();
    //将生成好的图片保存到本地，需要延迟一会，绘制期间耗时
    setTimeout(function () {
      wx.canvasToTempFilePath({
        canvasId: 'mycanvas',
        success: function (res) {
          var tempFilePath = res.tempFilePath;
          that.setData({
            imagePath: tempFilePath,
            canvasHidden: true
          });
        },
        fail: function (res) {
          console.log(res);
        }
      });
    }, 200);
  },
  //点击保存到相册
  baocun: function () {
    var that = this
    wx.saveImageToPhotosAlbum({
      filePath: that.data.imagePath,
      success(res) {
        wx.showModal({
          content: '图片已保存到相册，赶紧晒一下吧~',
          showCancel: false,
          confirmText: '好的',
          confirmColor: '#333',
          success: function (res) {
            if (res.confirm) {
              console.log('用户点击确定');
              /* 该隐藏的隐藏 */
              that.setData({
                maskHidden: false
              })
            }
          },
          fail: function (res) {
            console.log(11111)
          }
        })
      }
    })
  },
  //点击生成
  formSubmit: function (e) {
    var that = this;
    this.setData({
      maskHidden: false
    });
    wx.showToast({
      title: '海报正在过来',
      icon: 'loading',
      duration: 1000
    });
    setTimeout(function () {
      wx.hideToast()
      that.createNewImg();
      that.setData({
        maskHidden: true
      });
    }, 1000)
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    var that = this;
    wx.getUserInfo({
      success: res => {
        console.log(res.userInfo, "huoqudao le ")
        this.setData({
          name: res.userInfo.nickName,
        })
        wx.downloadFile({
          url: res.userInfo.avatarUrl, //仅为示例，并非真实的资源
          success: function (res) {
            // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
            if (res.statusCode === 200) {
              console.log(res, "reererererer")
              that.setData({
                touxiang: res.tempFilePath
              })
            }
          }
        })
      }
    })
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function (res) {
    return {
      title: "美团专送,"+this.data.site+"站点直聘骑手,"+this.data.code+"元/单起！",
      success: function (res) {
        console.log(res, "转发成功")
      },
      fail: function (res) {
        console.log(res, "转发失败")
      }
    }
  }
})

#HB.wxml

<view class="UCenter-bg">
	<image src="{
   
   {touxiang}}" class="UCenter-bg image " mode="widthFix"></image>
	    <view class="text-xl">{
   
   {name}}
    </view>
</view>
	<!-- <text class='code'>{
   
   {code}}</text> -->
	<text class='code'>邀请你一起入职美团</text>
	<text class='code'>{
   
   {site}}专送骑手</text>

	<text class='shareText'>生成海报分享至</text>
	<view class='imgBox'>
		<button class='zfbtn m_l' bindtap='formSubmit'>
			<image src="{
   
   {quan}}" class='imgF'></image>
		</button>
	</view>

	<!--生成海报  -->
	<view class='imagePathBox' hidden="{
   
   {maskHidden == false}}">
		<image src="{
   
   {imagePath}}" class='shengcheng'></image>
		<button class='baocun' bindtap='baocun'>保存相册，分享到朋友圈</button>
	</view>
	<view hidden="{
   
   {maskHidden == false}}" class="mask"></view>
	<view class="canvas-box">
		<canvas style="width: 375px;height: 667px;position:fixed;top:9999px" canvas-id="mycanvas" />
	</view>

#HB.wxss

page {
  background-color: #dddddd;
}

.bgImg {
  display: block;
  width: 100%;
  height: 366rpx;
}

.mine {
  display: block;
  text-align: center;
  color: #333;
  margin-top: 44rpx;
}

.code {
  display: block;
  text-align: center;
  color: rgb(51, 51, 51);
  font-size: 76rpx;
  font-weight: bold;
  margin-top: 30rpx;
}

.who {
  display: block;
  margin-top: 80rpx;
  font-size: 32rpx;
  color: #333;
  text-align: center;
}

.inputBox {
  text-align: center;
  margin-top: 44rpx;
}

.input {
  text-align: center;
  width: 440rpx;
  height: 88rpx;
  border-radius: 44rpx;
  background: #f5f5f5;
  font-size: 32rpx;
  display: inline-block;
}

.btn {
  width: 160rpx;
  height: 88rpx;
  border-radius: 44rpx;
  background: linear-gradient(90deg, rgba(255, 226, 0, 1), rgba(255, 200, 11, 1));
  box-shadow: 0px 4px 8px 0px rgba(255, 200, 11, 0.5);
  color: #333;
  font-size: 32rpx;
  display: inline-block;
  line-height: 88rpx;
  margin-left: 40rpx;
}

button[class="btn"]::after {
  border: 0;
}

.tishi {
  display: block;
  text-align: center;
  color: #999;
  margin-top: 30rpx;
}

.shareText {
  display: block;
  text-align: center;
  color: #333;
  font-size: 28rpx;
  margin-top: 100rpx;
}

.imgBox {
  text-align: center;
  width: 100%;
  margin-top: 60rpx;
  padding-bottom: 100rpx;
}

.imgF {
  display: inline-block;
  width: 100%;
  height: 100%;
}

.m_l {
  margin-left: 180rpx;
}

.zfbtn {
  display: inline-block;
  width: 150rpx;
  height: 150rpx;
  border-radius: 50%;
  background: transparent;
  outline: none;
  border: 0;
  padding: 0;
}

button[class="zfbtn"]::after {
  border: 0;
}

button[class="zfbtn m_l"]::after {
  border: 0;
}

.imagePathBox {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
}

.shengcheng {
  width: 80%;
  height: 80%;
  position: fixed;
  top: 50rpx;
  left: 50%;
  margin-left: -40%;
  z-index: 10;
}

.baocun {
  display: block;
  width: 80%;
  height: 80rpx;
  padding: 0;
  line-height: 80rpx;
  text-align: center;
  position: fixed;
  bottom: 50rpx;
  left: 10%;
  background: #ffe200;
  color: #333;
  font-size: 32rpx;
  border-radius: 44rpx;
}

button[class="baocun"]::after {
  border: 0;
}

.UCenter-bg {
  /* background-image: url(https://image.weilanwl.com/color2.0/index.jpg); */
  background-size: cover;
  height: 350rpx;
  display: flex;
  justify-content: center;
  position: relative;
  flex-direction: column;
  align-items: center;
  color: rgb(12, 12, 12);
  font-weight: 300;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}

.UCenter-bg image {
  width: 180rpx;
  height: 180rpx;
  border-radius: 50%;
}

PS:里面有涉及个用户的头像，用户名，需要登录才会生成海报。
##源码获取：关注公众号，回复–[海报]–获取，
###也可以添加WX：qiaominliu
微信截图_20200809162406.png

猜你喜欢

转载自blog.csdn.net/weixin_44495982/article/details/107895887
今日推荐
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
周排行
laravle中orm简单的增删改查
文本分类 特征选取之CHI开方检验
Spark核心编程-WordCount
大数据开发实战系列之电信客服(1)
读书笔记 - 把时间当作朋友 by 李笑来
python 笔记--if else
SpringBoot/Mybatis/Druid, 多数据源MultiDataSource配置思路
排序三个整数
redis集群搭建【2】-Windows中Redis集群搭建
STM32F030驱动TM1650点亮4联数码管
每日归档
更多
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022