【微信H5开发】基于html2canvas实现（图文组合）图片长按即可保存（简单处理）

鉴于当前开发的功能比较简单所以这里只涉及html5的canvas来实现功能，所以没有涉及很深的功能开发

<!DOCTYPE html>
<html>
<head>

body {
   background-image: url(${ctx}/resource/img/bg_01.png);
   background-repeat: no-repeat;
   background-size: 100% 100%;
   -moz-background-size: 100% 100%;
   text-align: center;
}

#content{
   width: 100%;
   height: 93%;
   padding: 15px 15px 5px 15px;
}
form{
   width:100%;
   height:100%;
   background-image:url(${ctx}/resource/img/bg_02.png);
   background-size: 100% 100%;
}
.tableArea> table{
   width:100%;
   font-size: 14px;
   color: #F85951;
   text-align: left;
   margin-top: 5%;
}
table> tr{
   border-bottom: 1px solid;
}

.tableArea{
   padding: 10% 5%;
   height: 80%;
}
.subgroup{
   width: 100%;
   border: none;
/* background-color: #ffefd7; */
   text-align: left;
   min-height: 30px;
border-radius: 5px;
padding: 0 10px;
   }
.footerArea{
   width: 100%;
   height:7%;
   background-image: url(${ctx}/resource/img/bg_foot.png);
   background-size:100% 100%;
   bottom: 0px;
   position: absolute;
   }
.buttonArea{
   width: 80%;
   margin: 0 10%;
   background: url(${ctx}/resource/img/back.png);
   background-size:100% 100%;
   padding: 3%;
   font-size: 24px;
}
#saveImg {
width:100%;
}
</style>
</head>
<body>

<div id="content">
   <form role="form" id="form1" action="" method="">
       <div class="tableArea" id="tableArea">
       <table style="">
           <tr style="border-bottom: 1px solid;">
               <td><span>订单编号</span></td>
               <td><span id="orderNumber"></span></td>
           </tr>
           <tr><td colspan="2"><div style="height: 15px;"></div></td></tr>
           <tr>
               <td colspan="2">
                   <span style="padding: 3% 0;">请选择以下方式之一进行付款，同时备注订单编号：
                       <br>1.银行转账至中国建设银行 *********************
                       <br>2.支付宝直接转账至 ******************
                       <br>3.支付宝扫描下面二维码转账
                   </span>
               </td>
           </tr>
           <tr>
               <td colspan="2" style="text-align: center;">
                   <img class="qcCodeArea" alt="" src="${ctx}/resource/img/qr_code.png" width="40%" style="margin-top: 30px;">
               </td>
           </tr>
           <tr><td colspan="2"><div style="height: 10px;"></div></td></tr>
           <tr style="text-align: center;">
               <td colspan="2"><span style="padding: 10px;border-radius:5px;font-size: 14px;">长按可以保存订单图片</span></td>
           </tr>
       </table>
       </div>
   </form>
   <img id="saveImg" alt="">
</div>
<div class="footerArea"></div>
</body>
<script>
$(function(){

页面结果：

这里简单说一下一些需要配置的参数

   var box = document.getElementById("content");
   var el = document.getElementById("form1");
   var saveImg = document.getElementById("saveImg");

box、el 参数是设置你合成后的图片布局；saveImg 参数是最后生成图片的区域

好吧简单说了一下很容易实现的功能谢谢

【微信H5开发】基于html2canvas实现（图文组合）图片长按即可保存（简单处理）

猜你喜欢