【微信H5開發】基於html2canvas實現（圖文組合）圖片長按即可儲存（簡單處理）
鑑於當前開發的功能比較簡單 所以這裡只涉及html5的canvas來實現功能，所以沒有涉及很深的功能開發
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0">
<!-- 上述3個meta標籤*必須*放在最前面，任何其他內容都*必須*跟隨其後！ -->
<meta name="format-detection" content="telephone=no">
<meta http-equiv="x-rim-auto-match" content="none">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="description" content="">
<meta name="author" content="">
<title>訂單回執</title>
<link rel="stylesheet" type="text/css"
href="${ctx}/resource/bootstrap-3.3.4-dist/css/bootstrap.css" />
<link rel="stylesheet" type="text/css"
href="${ctx}/resource/css/base.css" />
<link rel="stylesheet" type="text/css"
href="${ctx}/resource/css/gomeet.css" />
<link rel="stylesheet" type="text/css"
href="${ctx}/resource/css/gomeet_wechat.css" />
<script src="${ctx}/resource/js/jquery-1.11.1.min.js"
type="text/javascript" charset="utf-8"></script>
<script src="${ctx}/resource/bootstrap-3.3.4-dist/js/bootstrap.js"
type="text/javascript" charset="utf-8"></script>
<script type="text/javascript"
src="${ctx}/resource/jBox/jquery-1.4.2.min.js"></script>
<script type="text/javascript"
src="${ctx}/resource/jBox/jquery.jBox-2.3.min.js"></script>
<script type="text/javascript"
src="${ctx}/resource/jBox/i18n/jquery.jBox-zh-CN.js"></script>
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
<link type="text/css" rel="stylesheet"
href="${ctx}/resource/jBox/Skins/GrayCool/jbox.css" />
<style>
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
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(){
function GetQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null)
return unescape(r[2]);
return null;
}
var orderInfo = GetQueryString("orderCode");
$("#orderNumber").html(orderInfo);
//生成圖片
var box = document.getElementById("content");
var el = document.getElementById("form1");
var saveImg = document.getElementById("saveImg");
var canvas = document.createElement("canvas");
var scale = window.devicePixelRatio;//獲取裝置的顯示引數
var ctx = canvas.getContext("2d")
var rect = el.getBoundingClientRect(); //獲取元素相對於視察的偏移量
var w = el.offsetWidth;
var h = el.offsetHeight;
canvas.width = w * scale;
canvas.height = h * scale;
canvas.style.width = w;
canvas.style.height = h;
ctx.scale(scale, scale);
ctx.translate(-rect.left, -rect.top); //設定context位置，值為相對於視窗的偏移量負值，讓圖片復位
html2canvas(el, {
scale : scale,
canvas : canvas,
width : w,
height : h,
logging : false,
background : "#f2f2f2",
useCORS : true
}).then(function(canvas) {
var dataUrl = canvas.toDataURL("jpeg");
saveImg.src = dataUrl;
});
$("#form1").css("display","none");
});
</script>
</html>
頁面結果：
這裡簡單說一下一些需要配置的引數
var box = document.getElementById("content");
var el = document.getElementById("form1");
var saveImg = document.getElementById("saveImg");
box、el 引數是設定你合成後的圖片佈局；saveImg 引數是最後生成圖片的區域
好吧 簡單說了一下 很容易實現的功能 謝謝