网易哒哒的H5一直是业内的精品，很多H5都会成为爆款，在朋友圈广为流传。同时他们还写了一本很水的书——MakingExplosiveStyles:AGuidetoH5MarketingPlanning，简单介绍了各种H5，但是相关的技术文章并没有这样介绍。仿了一个类似的H5，找啊找，只找到网易同厂的两篇技术文章：优质的前端抓拍解决方案：来自页面的“自拍”官方秘笈！这就是您的颜色的计算方式。在这里，笔者做了一个简单的H5，介绍一下H5中个人认为比较重要的功能点——长按保存图片和识别二维码。本项目主要用到三个库html2canvas：转换HTML转换为canvascanvas2image：转换canvas为图片qrcodejs2：生成二维码前期准备设计稿：魔改公司里面的一个页面字体H5：找开源字体，这个不错——LXGW文凯/夏无文凯另外就是Layout，笔者在移动端方法中阐述了一个观点：自适应方案和高清方案：不同的布局方式效果不同，比如新闻H5，以px为单位，为了让大手机能看到更多的信息；比如应用类H5，以rem/vw为单位，力求在各种手机上保持UI的一致性。和营销页面一样，希望在各种手机上保持一致的UI。理论上使用rem/vw是没有问题的，但是ggvswild在优质前端快照解决方案中说：“Selfie”来自页面：为了给html2canvas一个清晰的整数计算值，避免拉伸模糊导致的小数四舍五入，布局中推荐使用%和vw，元素样式的vh或rem等单位，实际项目开发中统一使用px和作者，使用rem为单位没发现问题拉伸模糊。另外，笔者还搜索了几张关于你的网易H5画作，网易云音乐出品，使用%+js+绝对定位布局权力的游戏，网易云音乐出品，使用%+js+绝对定位布局测试一测属于你的主色调，网易云音乐出品，采用rem/vw+绝对定位布局，这100种生活必吃的食物，你打卡过哪些，网易DaDa出品，采用px+绝对定位布局个人总结:在布局上面，都是使用绝对定位布局，在长度单位上各有特点，所以不管你用什么方式做H5布局，只要元素不被拉伸就行在截图页面上，也就是说，如果拉伸模糊，可以查看这个元素的单位是否是小数。至于其他页面的排版，就用你习惯的，用实际的字体。我直接用Fontmin的客户端，不用它，命令行执行报错，营销页面只用了9个汉字，裁剪后从4.4M缩小到44kb。二维码功能的实现很简单，学习一下varqrcode=document.getElementById("qrcode")newQRCode(qrcode,{width:200,height:200,colorDark:"#000000",colorLight:"#ffffff",correctLevel:QRCode.CorrectLevel.L}).makeCode(window.location.href)snapshot实现html2canvas和canvas2image的结合，将html转成base64图片，这个函数可以做成库：varconvertToImage=(function(){functioncreateBaseCanvas(scale,width,height){constcanvas=document.createElement('canvas');canvas.width=width*scale;canvas.height=height*scale;constcontext=canvas.getContext("2d");//关闭抗锯齿context.mozImageSmoothingEnabled=false;context.webkitImageSmoothingEnabled=false;context.msImageSmoothingEnabled=false;context.imageSmoothingEnabled=false;context.scale（规模，规模）；返回画布；}functionconvertToImage(container,options={}){constscale=window.devicePixelRatio;constwidth=container.offsetWidth;constheight=container.offsetHeight;constcanvas=createBaseCanvas(比例、宽度、高度);constops={useCORS:true,//如果截图内容中有图片，解决文件跨域问题allowTaint:false,//是否允许跨源图片污染画布...选项};returnhtml2canvas(container,ops).then(canvas=>{constimageEl=Canvas2Image.convertToPNG(canvas,canvas.width,canvas.height)returnimageEl})}returnconvertToImage})()使用：convertToImage(document.querySelector("#capture")).then((imageEl)=>{document.getElementsByClassName("save")[0].appendChild(imageEl)})最新版本的canvas2image(1.4.1)已经支持缩放了，图片不清晰的问题已经解决。图片不清晰曾经是个大问题。很多博文都有解释。目前版本看不到模糊文档支持background-image:linear-gradient()，但是如果是gradienttoTransparency是不行的，我想呈现这个样式：backgroundgradientscheme:background-image:linear-gradient(90deg,$white,transparent);更改为背景图片：background:url('../bg.png')no-repeat;background-size:100%100%;文字会移位，这个问题一直存在，作者也没有修复上面的问题，比如跨域的问题，随着时间的推移，文档里有说明，就不再是问题了。在线预览地址：这里是参考资料优质的前端抓拍解决方案：页面“自拍”官方秘笈！你的颜色是这样计算的...H5实现保存图片的坑记录
