HTML5二維碼合成
二維碼合成是一個非常實用的功能，在很多場合都可以用到。本文章將介紹如何使用HTML5合成二維碼到圖片上，并提供代碼示例。
準備工作
在實現(xiàn)二維碼合成之前，需要準備好以下兩個文件：
qrcode.min.js // 用于生成二維碼的JS庫 html2canvas.min.js // 用于將HTML頁面渲染為Canvas對象的JS庫
同時，還需要在HTML文件中引入這兩個文件：
<script type="text/javascript" src="qrcode.min.js"></script> <script type="text/javascript" src="html2canvas.min.js"></script>
合成代碼
接下來，就可以開始合成了。首先，需要使用qrcode.min.js庫生成二維碼圖片：
var qrCode = new QRCode(document.createElement("div"), {
text: "http://www.example.com/",
width: 200,
height: 200
});其中，text屬性是二維碼的內容，width和height屬性控制二維碼的大小。
接下來，使用html2canvas.min.js將頁面渲染為Canvas對象：
var canvas = document.createElement("canvas");
canvas.width = document.body.offsetWidth;
canvas.height = document.body.offsetHeight;
var context = canvas.getContext("2d");
html2canvas(document.body, {
canvas: canvas,
onrendered: function(canvas) {
context.drawImage(canvas, 0, 0);
var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
var dataURL = canvas.toDataURL("image/png");
document.body.appendChild(canvas);
//console.log(dataURL);
}
});上面代碼中，先創(chuàng)建一個Canvas對象，然后使用html2canvas.min.js將頁面渲染為Canvas對象，最后獲取Canvas對象上的ImageData，并將Canvas對象轉換為PNG格式的圖片。
合成完成
最后，將生成的二維碼圖片合成到Canvas對象上：
context.drawImage(qrCode._el.firstChild, 10, 10, 200, 200);
其中，qrCode._el.firstChild是二維碼圖片的元素對象，10和10是二維碼圖片的位置，200和200是二維碼圖片的大小。
至此，二維碼合成完成。完整代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5二維碼合成</title>
</head>
<body>
<script type="text/javascript" src="qrcode.min.js"></script>
<script type="text/javascript" src="html2canvas.min.js"></script>
<script type="text/javascript">
window.onload = function() {
var qrCode = new QRCode(document.createElement("div"), {
text: "http://www.example.com/",
width: 200,
height: 200
});
var canvas = document.createElement("canvas");
canvas.width = document.body.offsetWidth;
canvas.height = document.body.offsetHeight;
var context = canvas.getContext("2d");
html2canvas(document.body, {
canvas: canvas,
onrendered: function(canvas) {
context.drawImage(canvas, 0, 0);
context.drawImage(qrCode._el.firstChild, 10, 10, 200, 200);
var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
var dataURL = canvas.toDataURL("image/png");
document.body.appendChild(canvas);
}
});
}
</script>
</body>
</html>上一篇html5二維碼掃描代碼
下一篇更換css沒有用