生成海报这个功能很实用，之前我们学过小程序生成海报的方法，今天我们来学h5生成海报。

基本原理：其实就是把你html+css写的样式转换成图片下载。

如何实现的

首先我们需要引入下面两个js插件

原理说明

首先使用 html2canvas 把你写的的样式转化成canvas画布

然后使用canvas2image.js 把画布转化为img图片。

使用方法

HTML代码

不怕你学不会
就怕你不想学

3分钟学会生成海报就这么简单
可以保存这个海报分享给朋友了

扫码关注

上面就是海报里面的图片和文字资源，定位好位置

CSS代码

body {background-color: #000;}body img {display: block;}#picbox{ position: absolute;width: 100%; left: 0; top: 0; max-height: 100%;box-sizing: border-box;border: 4vw solid #e94b54;overflow: hidden;position: relative;       }#picbox img {width: 100%;}#picbox .t1{ left:3vw; top:3vw; width: 86vw; color:#fff; font-size: 5vw;}#picbox .t2{ left:3vw; bottom:3vw; width: 50vw; color:#fff; font-size: 3vw;}#picbox .eq{ right: 3vw; bottom:3vw; width: 20vw; text-align: center;}#picbox .eq p{font-size: 3vw; padding-top: 5px;}#shading { position: fixed; left: 0; top: 0; height: 100vh;z-index: 99; background-color: rgba(0,0,0,0.8);text-align: center; width: 100%; font-size: 3vw; color:#fff; display: none;}#shading p{font-size: 18px;padding-top: 50%;      }#picshow img {width: 100%;}

最后加上js

function gotoimg() {     $('#shading').show(0);  // 生成中提示文字     $('#picbox').show(0); // html海报模块var getPixelRatio = function(context) {     // 获取设备的PixelRatiovar backingStore = context.backingStorePixelRatio ||                  context.webkitBackingStorePixelRatio ||                  context.mozBackingStorePixelRatio ||                  context.msBackingStorePixelRatio ||                  context.oBackingStorePixelRatio ||                  context.backingStorePixelRatio || 1;return (window.devicePixelRatio || 1) / backingStore;          };var shareContent = $("#picbox")[0]; var width = shareContent.offsetWidth; var height = shareContent.offsetHeight; var canvas = document.createElement("canvas"); var context = canvas.getContext('2d'); var scale = getPixelRatio(context);    //将canvas的容器扩大PixelRatio倍，再将画布缩放，将图像放大PixelRatio倍。          canvas.width = width * scale;           canvas.height = height * scale;          canvas.style.width = width + 'px';          canvas.style.height = height + 'px';          context.scale(scale, scale);var opts = {scale: scale, canvas: canvas,width: width, height: height,dpi: window.devicePixelRatio          };          html2canvas(shareContent, opts).then(function (canvas) {              context.mozImageSmoothingEnabled = false;              context.webkitImageSmoothingEnabled = false;              context.msImageSmoothingEnabled = false;              context.imageSmoothingEnabled = false;var dataUrl = canvas.toDataURL('image/png', 1.0); //var dataUrl = canvas.toDataURL('image/png', 1.0).replace("data:image/png;base64,","");var newImg = document.createElement("img");              newImg.src =  dataUrl;              newImg.width = width;              newImg.height= height;              // 生成成功后，把图片地址传递到img标签              $("#picshow img").attr('src',dataUrl);              $('#picbox').hide(0);              $('#shading').hide(0);            });         }       // 运行生成海报       gotoimg();

大功告成！

注意：如果本地生成失败，需要传到空间，用url访问即可执行。