怎么制作微信H5海报页面?

发布网友发布时间：2022-04-23 04:26

我来回答

共3个回答

懂视网时间：2022-05-12 04:52

这篇文章主要介绍了详解html5 canvas 微信海报分享（个人爬坑）的相关资料,内容挺不错的，现在分享给大家，也给大家做个参考。

本文介绍了canvas 微信海报分享，分享给大家，具体如下：

随机产生一张图片
拿到微信用户的头像和称呢（自己调后端的接口获取）
把用户头像和称呢和随机产生一张图片合成一张海报
可能上一页用户还有填入的心愿文本也要填入图片中

实现效果图

记录下在实现功能过程中遇到的问题

canvas在微信浏览器中长按无效不能像img一样长按分享（那我就转成img呗）
转成img后在微信开发者工具中能显示，真机无效（欲哭无泪），度娘说可能是图片跨域^-^
用户头像合成还要圆角，我表示不会啊，直接看canvas api文档了对度娘无爱了
canvas填入文字超过指定宽度也要换行，我表示只知道不超多指定宽度的各种文字对齐方式 ctx.textAlign = 'center' ;
canvas在高清屏下模糊的问题（超简单的不知道度娘怎么会那么啰嗦）不就是canvas.witdt=innerWidth*devicePixelRatio

HTML结构

<p class="imgBox" v-cloak>
 <img :src='imgSrc' v-if="imgSrc" />
</p>

CSS

<style>
 *{
 margin:0;
 padding:0;
 }
 body,
 html {
 width: 100%;
 height: 100%;
 }

 .imgBox {
 width: 100%;
 height: 100%;

 }

 img {
 width: 100%;
 display: block;
 }
</style>

script

// js主要结构
new Vue({
 el:'imgBox',
 data:{
 urlParam: {},//获取url中的传值对象
 randomNum: 1,//随机数用于确定那个祈福页
 userName: '',//用户称呢
 imgSrc: '',//合成最终图片
 userImg: '',//用户头像图片
 userMessage: '',//用户留言
 },
 methods: {
 // 分享到盆友圈
 wxShareFriends: function () {},
 // 初始化请求头
 wxHttp: function () {
  $.ajaxSetup({
  headers: {
  'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
  }
  });
 },
 // 获取随机数[1,10]
 randomNumbers() {
  this.randomNum = Math.ceil(Math.random() * 10)
 },
 // 获取微信用户头像和称呢和用户输入祝福语
 getUserInfo() {
  var vm = this;
  $.post('API请求地址', function (data) {
  if (data.code == 1) {
   vm.userImg = data.data.headimg;
   vm.userName = data.data.nickname;
   if (vm.randomNum % 2 == 0) {
   vm.userMessage= '红尘相遇，年华已老。岁月花开多少不在，古往今来相遇是一件既微妙。而又神圣的事情，红尘的情网中'
   } else {
   vm.userMessage = '红尘相遇，年华已老'
   }
  }
  vm.$nextTick(function () {
   vm.drawCanvasBgImg();
  })
  })
 },
 // 获取页面dpr和宽度
 getWindowInfo() {
  var windowInfo = {};
  windowInfo.dpr = window.devicePixelRatio;
  if (window.innerWidth) {
  windowInfo.width = window.innerWidth;
  }
  else {
  windowInfo.width = document.body.clientWidth;
  }
  return windowInfo;
 },
 // 画活动页分享背景大图
 drawCanvasBgImg () {},
 // 在背景图片的画布上截取一个圆然后填充入用户头像
 drawCanvasUserImg(canvas, ctx, dpr) {},
 // 填写用户称呢或者用户留言
 canvasFillText (canvas, ctx, dpr, circleR) {},
 // 合成base位分享图
 convertCanvasToImage (canvas) {
  this.imgSrc = canvas.toDataURL("image/jpeg");//png有毒在安卓机下识别二维码无法跳转
  this.$Spin.hide();
 }
 }
})

画图方法步骤

drawCanvasBgImg ()
drawCanvasUserImg (canvas, ctx, dpr)
canvasFillText (canvas, ctx, dpr, circleR)
convertCanvasToImage (canvas)

画活动页分享背景大图 drawCanvasBgImg ()

//拿到数据后开始画背景大图 想法很简单就是把图片画到canvas中然后在画布上再画头像文字让后转成img
 drawCanvasBgImg () {
 var vm = this;
 var canvas = document.createElement("canvas");
 var ctx = canvas.getContext("2d");
 var clientWidth = this.getWindowInfo().width;??//获取屏幕宽度用于canvas宽度自适应移动端屏幕
 var dpr = this.getWindowInfo().dpr;
 ctx.globalCompositeOperation = "source-atop";//** 坑锯齿感觉没什么用不知道是不是用错地方了 **
 canvas.width = dpr * clientWidth;??//由于手机屏幕时retina屏，都会多倍渲染，用dpr来动态设置画布宽高，避免图片模糊
 canvas.height = dpr * clientWidth * 609 / 375;//去掉微信头部的状态栏应该是603 没搞懂603还是不能让图片满屏直接多加到了609
 var img = new Image();
 img.crossOrigin = '';//死坑的图片跨域 （img.crossOrigin = "Anonymous"这种写法还是不能显示base格式图片）
 img.src = "http://xxx" + this.randomNum + ".jpg";
 img.onload = function () {
 ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
 vm.drawCanvasUserImg(canvas, ctx, dpr);
 }
},

用户头像 drawCanvasUserImg (canvas, ctx, dpr)

// 在背景图片的画布上截取一个圆然后填充入用户头像
drawCanvasUserImg: function (canvas, ctx, dpr) {
 var vm = this;
 var circleR = 50 * dpr;//半径
 var circleX = canvas.width / 2;//圆心X坐标
 var circleY = 50 * dpr;//圆心Y坐标
 var imgX = circleX - circleR;//图片X开始坐标
 var imgY = circleY - circleR;//图片Y开始坐标
 var imgWidth = 2 * circleR;//图片按圆形大小
 var img = new Image();
 img.crossOrigin = '';
 img.src = this.userImg;
 img.onload = function () {
 ctx.save(); // 保存当前ctx的状态
 ctx.arc(circleX, circleY, circleR, 0, 2 * Math.PI); //画出圆
 ctx.clip(); //裁剪上面的圆形
 ctx.drawImage(img, imgX, imgY, imgWidth, imgWidth); // 在刚刚裁剪的园上画图
 ctx.restore(); // 还原状态
 vm.canvasFillText(canvas, ctx, dpr, circleR);
 }
},

在canvas中画文字

// 填写用户称呢或者用户留言
canvasFillText (canvas, ctx, dpr, circleR) {
 var fontSizeThis = dpr * 20 + 'px' + ' Arial';
 var userNameY = 0;//用户名Y轴坐标
 var userMessageX = dpr * 40;//用户留言X轴坐标
 var userMessageY = 0;//用户留言Y轴坐标
 var lastSubStrIndex = 0;//字符串下标
 var lineWidth = 0;//一行宽度
 var allTextWidth = 0;//所有字符宽度
 ctx.font = fontSizeThis;
 // 需要用户名是写入用户名
 if (this.userName) {
 userNameY = circleR * 2.5;
 ctx.fillStyle = "#0094ff";
 ctx.textAlign = 'center';
 ctx.fillText(this.userName, canvas.width / 2, userNameY);
 }
 if (this.userMessage) {
 userMessageY = userNameY + dpr * 35;
 ctx.fillStyle = "#000";
 // 获取字符宽度
 for (var i = 0; i < this.userMessage.length; i++) {
  allTextWidth += ctx.measureText(this.userMessage[i]).width;
 }
 // 字符串长度大于画布区域要换行
 if (allTextWidth > canvas.width - 2* userMessageX) {
  for (var i = 0; i < this.userMessage.length; i++) {
  lineWidth += ctx.measureText(this.userMessage[i]).width;
  if (lineWidth > canvas.width - 2*userMessageX) {
   ctx.textAlign = 'left';
   ctx.fillText(this.userMessage.substring(lastSubStrIndex, i), userMessageX, userMessageY);
   userMessageY += dpr * 25;//设置行高
   lineWidth = 0;
   lastSubStrIndex = i;
  }
  if (i == this.userMessage.length - 1) {
   ctx.fillText(this.userMessage.substring(lastSubStrIndex, i + 1), userMessageX, userMessageY);
  }
  }
 } else {
  // 小于者居中显示
  ctx.textAlign = 'center';
  ctx.fillText(this.userMessage, canvas.width / 2, userMessageY);
 }
 }
 this.convertCanvasToImage(canvas);
},

热心网友时间：2022-05-12 02:00

H5指使用HTML5+CSS+JS制作出的手机页面

热心网友时间：2022-05-12 03:18

有专业的制作工具，如国内最早的专业H5制作工具意派Epub360，自己也在用，0代码基础的设计师，运营人员甚至是市场营销或文案人员皆可学习制作。

这个工具有一个组件叫做截屏组件，可以在H5中直接生成一张高清的电子海报，可以保存到手机，也可以直接发送给好友。海报里可以是你提前编辑的文字、图片以及二维码内容，也可以带有你自己的微信头像跟昵称，十分方便。

可以到这个工具的官网学习下。

全部频道

怎么制作微信H5海报页面?