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

最新推荐文章于 2025-07-11 16:09:48 发布

csdn17668

最新推荐文章于 2025-07-11 16:09:48 发布

阅读量5k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript HTML5 CSS canvas 微信H5开发

本文链接：https://blog.youkuaiyun.com/yxk17668/article/details/83898469

HTML5 同时被 3 个专栏收录

18 篇文章

订阅专栏

JavaScript

16 篇文章

订阅专栏

CSS

8 篇文章

订阅专栏

本文介绍如何使用HTML5的Canvas功能实现订单回执的图片生成，通过捕获DOM元素并将其转换为图像，便于用户保存订单详情。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

鉴于当前开发的功能比较简单所以这里只涉及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(){