使用canvg截屏上传至服务器并返回二维码
彭霄
实现的功能：
对html中的元素（包括svg元素）进行截屏成图片，然后保存到服务器上，返回图片访问路径，网页端根据路径生成二维码，然后手机扫描二维码就可以得到这html页面的截图了。
用到的插件：
canvg 是个 SVG 解析器和渲染器，它使用 Javascript 解析，渲染出 Canvas 元素，来把html页面的svg元素解析成canvas。
jquery.qrcode.js 是一个能够在客户端生成矩阵二维码QRCode 的jquery插件 ，使用它可以很方便的在页面上生成二维条码。
html代码：
</pre><p></p><pre><!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<div>
<header>
<h1>Draw a Canvas image, Upload and save it on the server</h1>
</header>
<div id="divMap">
<svg>这里是svg</svg>
</div>
<div>
<button id="button">RUN</button>
</div>
<div id="canvasDiv">
<canvas id="canvasId"></canvas>
</div>
<div id="code"></div>
</div>
<script type="text/javascript" src="http://libs.useso.com/js/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/canvg.min.js"></script>
<!-- js下载地址：https://github.com/gabelerner/canvg -->
<script type="text/javascript" src="js/jquery.qrcode.min.js"></script>
<!-- js下载地址：http://cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js -->
<script>
$(document).ready(function () {
$("#button").on("click", function () {//点击事件
getCanvas();
});
});
function getCanvas() {
var svgHtml = document.getElementById('divMap').innerHTML;//获取svg
canvg('canvasId', svgHtml, {//使用canvg处理，canvasId为处理后存放位置，svgHtml为获取到的svg
ignoreMouse: true,//参数设置，是否忽略鼠标
ignoreAnimation: true,//是否忽略动画
renderCallback: function () { //回调函数
alert('done rendering!');
UploadPic()
}
});
}
function UploadPic() { // generate the image data
var Pic = document.getElementById("canvasId").toDataURL("image/png"); //把canvas转换为字节流
Pic = Pic.replace(/^data:image\/(png|jpg);base64,/, "");//处理
// Sending the image data to Server
$.ajax({ //使用ajax上传数据
type: 'POST',
url: '/UploadPic',
data: '{ "imageData" : "' + Pic + '" }',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function (msg) { //msg为返回的图片所在服务器的地址
alert("Done, Picture Uploaded.");
qrCode(msg); //生成二维码
}
});
}
function qrCode(str) {
if (str == null)return;
$("#code").empty();
var st = toUtf8(str); //对路径中的中文处理
$("#code").qrcode({ //调用qrcode
render: "table",
width: 200, //设置二维码宽度
height: 200, //设置二维码宽度
text: st //二维码内容
});
}
function toUtf8(str) {
var out, i, len, c;
out = "";
len = str.length;
for (i = 0; i < len; i++) {
c = str.charCodeAt(i);
if ((c >= 0x0001) && (c <= 0x007F)) {
out += str.charAt(i);
} else if (c > 0x07FF) {
out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
} else {
out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
}
}
return out;
}</script>
</body>
</html>
类似资料：