html 代码
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=750,user-scalable=no">
- <meta name="format-detection" content="telephone=no"/>
- <meta name="apple-mobile-web-app-capable" content="yes">
- <link rel="stylesheet" href="../CSS/reset.css"/>
- <link rel="stylesheet" type="text/css" href="../css/main.css"/>
- <style>
- .mycanvasbox{position:absolute;width:100%;height:100%;left:0;top:0;}
- #result{width:100%;height:100%;text-align:center;font-size:.75rem;color:#3e0d0d;}
- .result_bg{width: 100%;height:100%;display: block;position: relative;}
- .result_conbg{width: 17.33rem;height: 29.15rem;background: url('../imgs/acbg1.png') no-repeat center;background-size: 100%;position: absolute;top: -2rem;left: 1.52rem;}
- .result_content{width: 14.88rem;height: 16.02rem;position: absolute;top: 11.5rem;left: 1rem;}
- .result_name{font-size: 1.47rem;font-weight: bold;padding-top: .51rem;}
- .result_rank{font-size: 1.28rem;font-weight: bold;padding-top: .3rem;}
- .result_txt{font-size: .85rem;padding: 1.23rem 1.07rem;line-height: 1.3rem;text-align: left;}
- .res_rankname,.res_count,.res_percent,.res_money{color: #FF5300;}
- .result_icon{width: 1.17rem;height: 1.25rem;}
- .result_list{text-align: left;padding: .2rem 1.8rem;}
- .relist_txt{display: inline-block;padding-left: .5rem;line-height: .8rem;}
- </style>
- </head>
- <body>
- <!--
- 描述: 结果页
- -->
- <div id="result">
- <img class="result_bg" src="../imgs/keep.jpg" alt="" />
- <div class="result_conbg">
- <div class="result_content">
- <h2 id="resultName" class="result_name">华佗再世</h2>
- <p class="result_rank">--- 第 <span class="result_count">1 </span > 名 ---</p>
- <p class="result_txt">恭喜 <span class="result_add">北京二组 </span> <span class="res_rankname"> 王安捷 </span> 在第一届 <br /> 泰康 TSR 激励竞赛中获此称号 </p>
- <div class="result_list"><img class="result_icon" src="../imgs/result_heart.png"/><p class="relist_txt">拯救人数:<span class="res_count">1</span></p></div>
- <div class="result_list"><img class="result_icon" src="../imgs/icons_sword.png"/><p class="relist_txt">打败了 < span class="res_percent">99.99%</span > 的 TSR 精英</p></div>
- <div class="result_list"><img class="result_icon" src="../imgs/active_rule2.png"/><p class="relist_txt"> 获得奖励金:<span class="res_money">9999 元</span></p></div>
- </div>
- </div>
- </div>
- <div class="mycanvasbox"></div>
- <script src="../js/jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
- <script src="../js/html-size-calculation.js"></script>
- <script src="../js/html2canvas.js"></script>
- <script src="../js/canvas2image.js"></script>
- <script src="../js/base.js"></script>
- <script src="../js/activity.js"></script>
- <script type="text/javascript">
- // 先将 html 转换成图片
- setTimeout(function(){
- var dom=$(".mycanvasbox"); // 你要转变的 dom
- var width = dom.width();
- var height = dom.height();
- var type = "jpg";
- var scaleBy = 1; // 缩放比例
- var canvas = document.createElement('canvas');
- canvas.width = width * scaleBy;
- canvas.height = height * scaleBy;
- canvas.style.width = width * scaleBy + 'px';
- canvas.style.height = height * scaleBy + 'px';
- var context = canvas.getContext('2d');
- context.scale(scaleBy, scaleBy);
- html2canvas($('#result')[0], {
- onrendered: function(canvas) {
- $('.mycanvasbox').append(Canvas2Image.convertToImage(canvas,width* scaleBy,height* scaleBy,type));
- }
- });
- },500);
- // 长按触发保存事件
- /*var timeOutEvent=0;
- $(function(){
- $(".mycanvasbox").on({
- touchstart: function(e){
- timeOutEvent = setTimeout("longPress()",1000);
- },
- touchmove: function(){
- clearTimeout(timeOutEvent);
- timeOutEvent = 0;
- },
- touchend: function(){
- clearTimeout(timeOutEvent);
- if(timeOutEvent!=0){
- //alert("你这是点击, 不是长按");
- }
- return false;
- }
- })
- });
- function longPress(){
- timeOutEvent = 0;
- //alert('长按事件触发')
- // 这里可以写泰康或者腾讯统计事件
- }; */
- </script>
- </body>
- </html>
需要引入 js,html2canvas.js,canvas2image.js, 见附件.
注意: 有些人写之前没有修改手机端自适应的 meta 内容, 会影响图片质量, 将 < meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">修改为 < meta name="viewport" content="width=750,user-scalable=no">, 将会解决图片适量受损问题.
来源: http://www.qdfuns.com/article/44742/54939f10a00c566df84c2411aee39bc4.html