小程序海报和H5海报生成

学崖无海

2024-04-24 帮助1人

海报

通过移动端生成海报来达到分享引流的目的，海报生成其实就是利用canvas,拿到canvas生成的Data URLs保存为图片或分享给好友

提示：本章分为三部分，分别是canavas的基础用法、微信小程序海报的生成和H5海报的生成，点击目录大纲可以跳转到对应内容

一、Canvas用法

w3school的canvas
canvas基础使用方法

//创建一个宽200px，高100px的画布
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

//在宽200，高100px像素的画布中，绘画一个宽150，高75px的矩形，矩形填充FF0000颜色
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);//(x,y,width,height) 
//绘制文本
ctx.font = "24px Arial";
ctx.fillStyle = "red";
ctx.textAlign = "center";
ctx.fillText("Hello World",10,50);

二、小程序海报

1. 小程序的canvas

微信官方文档：canvas语法
 微信官方文档：canvas使用实例基础库2.9.0 起支持一套新 Canvas 2D 接口（需指定 type 属性）
因为canvas2的使用存在版本兼容问题，公司产品有兼容要求时可以通过以下方法进行判断查看官方兼容做法

function compareVersion(v1, v2) {
  v1 = v1.split('.')
  v2 = v2.split('.')
  const len = Math.max(v1.length, v2.length)

  while (v1.length < len) {
    v1.push('0')
  }
  while (v2.length < len) {
    v2.push('0')
  }

  for (let i = 0; i < len; i  ) {
    const num1 = parseInt(v1[i])
    const num2 = parseInt(v2[i])

    if (num1 > num2) {
      return 1
    } else if (num1 < num2) {
      return -1
    }
  }

  return 0
}

//compareVersion('1.11.0', '1.9.9') // 1
const version = wx.getSystemInfoSync().SDKVersion
if (compareVersion(version, '1.1.0') >= 0) {
  
} else {
  // 如果希望用户在最新版本的客户端上体验您的小程序，可以这样子提示
  wx.showModal({
    title: '提示',
    content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
  })
}

2.使用示例

本人采用uniapp开发小程序，以下的示例是来源于uniapp小程序的代码

<view class="poster-content-wrapper" :class="{'top-10':smallScreen}" >
	<canvas type="2d" id="myCanvas" :hidden='!shareVisibility'  style="background-color: white; width: 100%;height: 100%;box-sizing: border-box;"></canvas>
</view>

.poster-content-wrapper{
	width: 670rpx;
	height: 1032rpx;			
	background: #FFFFFF;
	border-radius: 12rpx;
	position: absolute;
	bottom: 240rpx;
	left: 40rpx;
}

可以看到，画布的宽高设置为 width:670rpx;height:1032rpx
核心代码逻辑

isUseCanvas2D(){
wx.showLoading({
	  title: '海报生成中...',
	  mask:true
	})
	const query = wx.createSelectorQuery()
	    query.select('#myCanvas')
	      .fields({ node: true, size: true })
	      .exec((res) => {
	        const canvas = res[0].node
			this.canvas=res[0].node
	        const ctx = canvas.getContext('2d')
	        const dpr = wx.getSystemInfoSync().pixelRatio
	        canvas.width = res[0].width * dpr
	        canvas.height = res[0].height * dpr
			ctx.fillStyle = "white";
			ctx.fillRect(0, 0, canvas.width, canvas.height);//设置背景色
	        ctx.scale(dpr, dpr)
			console.log('-----',res,dpr)//示例：iphone XR下打印出来的结果中：{height: 569，width: 369}，推断出是px单位
			const width= res[0].width
			
			//为保持不同高倍屏幕下宽高的拉伸，采用比例法
			//例如海报商品图，ui图给出的是606rpx，606/海报设计的宽度rpx，乘以canvas的实际像素值369，就是对应canvas中商品图实际要显示的的px宽度
			const img1 = canvas.createImage()
			img1.src=this.goods.img
			const width1= res[0].width-32
			img1.onload=function(){
				ctx.drawImage(img1, 32/670*res[0].width , 90/670*res[0].width,606/670*res[0].width,606/670*res[0].width); //宽高和画布一致
			}
			const img2 = canvas.createImage()
			img2.src=this.codeImg
			// 三倍屏幕加上32
			img2.onload=function(){
				ctx.drawImage(img2, 482/670*res[0].width,792/670*res[0].width, 156/670*res[0].width,156/670*res[0].width); //宽高和画布一致
			}
			
			const arrText=this.goods.name.split('')
			let temp=''
			var row=[]
			for(let a=0;a<arrText.length;a  ){
				if ((ctx.measureText(temp).width/res[0].width*670) <res[0].width) {
				   temp  = arrText[a];
				   // console.log('---text width2',ctx.measureText(temp).width/res[0].width*670,temp,res[0].width)
				}else {
				  a--; //这里添加了a-- 是为了防止字符丢失，效果图中有对比
				  row.push(temp);
				  temp = "";
			  }
			}
			row.push(temp)
			const len=row.length>2?2:row.length
			for (var b = 0; b < len; b  ) {
					ctx.font ='bold 16px sans-serif';
					 ctx.fillStyle='#333333';
					 ctx.fillText(row[b], 32/670*res[0].width,752/670*res[0].width  b * (40/670*res[0].width));
			 }
			
			//绘制标签
			ctx.rect(32/670*res[0].width, 824/670*res[0].width,169/670*res[0].width, 40/670*res[0].width);
			ctx.fillStyle = "#FF4006"// 设置填充颜色
			ctx.fill()
			ctx.font ='12px sans-serif';
			ctx.fillStyle='white';
			ctx.fillText(`领券立减${this.goods.discount}元`, 42/670*res[0].width, 852/670*res[0].width);
			//绘制价格
			ctx.font='bold'
			ctx.font ='15px sans-serif';
			ctx.fillStyle='#FF4006'
			ctx.fillText('￥', 32/670*res[0].width, 930/670*res[0].width);
			ctx.font ='26px sans-serif';
			ctx.fillText(`${this.goods.price}`, 68/670*res[0].width, 930/670*res[0].width);
			const leftwidth=ctx.measureText(this.goods.price.toString() '￥').width 26/670*res[0].width// <res[0].width
			console.log('-----leftwidth',leftwidth)//220/670*res[0].width
			
			if(Number(this.goods.original_price)>0){
				ctx.font ='12px sans-serif';
				ctx.fillStyle='#999999'
				ctx.fillText(`原价￥${this.goods.original_price}`,leftwidth, 930/670*res[0].width);	
			}
			
			
		
			ctx.font ='12px sans-serif';
			ctx.fillStyle='#666666'
			ctx.fillText('—— 长按识别二维码 ——', 224/670*res[0].width, 1008/670*res[0].width);
			
			//绘制顶部文字
			ctx.font ='12px sans-serif';
			ctx.fillStyle='#666666'
			ctx.fillText('邀请你一起抢购~',  438/670*res[0].width,50/670*res[0].width);
			
			const img3 = canvas.createImage()
			img3.src=this.user.avatar
			img3.onload=function(){
				//头像要圆角需要画图
				ctx.drawImage(img3, 32/670*res[0].width , 20/670*res[0].width,44/670*res[0].width,44/670*res[0].width); //宽高和画布一致
			}
			ctx.font ='bold 16px sans-serif ';
			ctx.fillStyle='#333333'
			ctx.fillText(`${this.user.name}`, 84/670*res[0].width,52/670*res[0].width);
			
			
			wx.canvasToTempFilePath({
			  canvas: this.canvas, // 使用2D 需要传递的参数
			  canvasId: 'myCanvas',
			  success:(res)=> {
				  this.posterCanvas=res.tempFilePath//拿到Data URLs图片数据，可作为微信分享接口要传递的参数
				  wx.hideLoading()
				  console.log('-----posterCanvas',res.tempFilePath)
				}
			})
	      })	 
},

savePhone(){//保存图片到本地
wx.canvasToTempFilePath({
	  canvas: this.canvas, // 使用2D 需要传递的参数
	  canvasId: 'myCanvas',
	  success:(res)=> {
		  this.posterCanvas=res.tempFilePath
		 
		  console.log('-----posterCanvas',res.tempFilePath)
		  wx.saveImageToPhotosAlbum({
		    filePath: this.posterCanvas,
		    success(res) { 
		  	  console.log('----xxx save',res)
		  		wx.showToast({
		  		  title: '保存成功，请在相册中查看',
		  		  duration:3000
		  		})
		  	}
		  })
		}
	})
},
onShareAppMessage: function (options) {//转发链接
	    // 设置菜单中的转发按钮触发转发事件时的转发内容
	    var shareObj = {
	        title: "分享有礼",        // 默认是小程序的名称(可以写slogan等)
	        path: '/xxxxx/?scene=' this.scene,        // 默认是当前页面，必须是以‘/’开头的完整路径
	        imgUrl: this.posterCanvas,     //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
	        success: function (res) {
	            // 转发成功之后的回调
	            if (res.errMsg == 'shareAppMessage:ok') {
	            }
	        },
	        fail: function () {
	            // 转发失败之后的回调
	            if (res.errMsg == 'shareAppMessage:fail cancel') {
	                // 用户取消转发
	            } else if (res.errMsg == 'shareAppMessage:fail') {
	                // 转发失败，其中 detail message 为详细失败信息
	            }
	        },
	    };
		return shareObj;

	},

3.结果

分享海报的生成，可以看到不同机型的海报的大小不同
学新通

学新通
分享给微信好友的情景

三、H5海报

1.安装插件html2canvas

npm install --save html2canvas//安装
import html2canvas from 'html2canvas';//引用

选用这个插件的理由：它可以像“截图”一样，把目标DOM元素生成base64图片；所以在DOM元素在进行页面适配(postcss-px-to-viewport)的时候，生成对应的海报也随着目标DOM元素的适配变化进行大小调整。
而用原生canvas的话，海报每个元素都要指定位置，大小，css属性来生成，显然麻烦多了。

//可以一开始就写好画布大小，px单位，因为画布的大小是写死的，并不能适配不同机型。
<canvas id="canvas" width="300" height="300"></canvas>
//也可以获取canvas元素，再动态设置宽高
<canvas id="canvas" ></canvas>
var canvas = document.getElementById('canvas')
      canvas.width = '500'
      canvas.height = '500'

兼容性方面：
学新通
点击进入：html2Canvas官网入口
官网的部分配置项解释如下：

属性	作用
allowTaint	是否允许跨域图片污染画布
backgroundColor	画布的背景颜色，不需要的话设置null值相当于透明transparent
onclone	当文档为了重新渲染某些元素时会调用这个回调方法，用于更改DOM元素上需要重新渲染的部分而不会影响到原本的DOM元素
useCORS	为了使用服务器上的图片而允许跨域
width	指定画布的宽度
height	指定画布的高度

2.使用示例

代码如下（示例）：

html2canvas(document.body).then(function(canvas) {
    document.body.appendChild(canvas);
});

实际使用中：
先在页面写出ui给的海报设计图，DOM最外层的盒子指定样式id,记住这个id

  <div class="poster-wrapper" id="posterHtml">
    <div class="poster-img-wrapper">
      <img src="https://img1.百度.com/it/u=4276151928,2257626089&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=313" alt=""  class="poster-img" @load="finishedImg" @error="errorImg"
        crossorigin="anonymous" />
    </div>
  </div>

在js代码中，选中posterHtml所在的盒子内容，生成海报的base64代码

const generatePoster = () => {
      const domObj = document.getElementById('posterHtml')
      html2canvas(domObj, {
        useCORS: true,//是否使用服务器上的图片
        backgroundColor: null,
        allowTaint: true,
        onclone (doc) {
          // 克隆文档进行渲染时调用的回调函数，可用于修改将要渲染的内容而不影响原始源文档。
          //   const e = doc.getElementsByTagName('h1')
        }
      }).then(canvas => {
        base64Img.value = canvas.toDataURL('image/png')
        
      })
    }

注意点
由于实际的使用过程中，海报图来源服务器，所以必须要开启 useCORS:true,使用生成的base64Img的图片标签上，设置crossorigin="anonymous"
最后，服务器上的图片一定要有应答头部 access-control-allow-origin: *，不然会报跨域错误

https://img1.百度.com/it/u=4276151928,2257626089&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=313

3.结果

学新通

学新通
可以看到生成的base64海报图可以成功的被img加载出来

总结

通过以上例子可以看出，海报生成的核心是canvas的绘制。有对应插件使用的情况下，可以让插件把页面样式绘制成canvas,否则相当于自己填充canvas画布内容，这种需要掌握canvas基础语法掌握。

这篇好文章是转载于：学新通技术网

小程序海报和H5海报生成

海报

一、Canvas用法

二、小程序海报

1. 小程序的canvas

2.使用示例

3.结果

三、H5海报

1.安装插件html2canvas

2.使用示例

3.结果

总结

photoshop保存的图片太大微信发不了怎么办

Android 11 保存文件到外部存储，并分享文件

《学习通》视频自动暂停处理方法

word里面弄一个表格后上面的标题会跑到下面怎么办

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

怎样阻止微信小程序自动打开

TikTok加速器哪个好免费的TK加速器推荐