<body>
<div id="shareBody">
<div id="code"></div>
<p>一些文本..</p>
<p>菜鸟教程，学的不仅是技术，更是梦想！！！</p>
</div>
</body>
<script type="text/javascript" src="/hello/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="/hello/js/html2canvas.js"></script>
<script src="/hello/js/qrcode.js"></script>
<script>
var qrcode = new QRCode('code', {
text: 'your content',
width: 100,
height: 100,
colorDark : '#000000',
colorLight : '#ffffff',
correctLevel : QRCode.CorrectLevel.H
});
</script>
<script>
var w = $("#shareBody").width();
var h = $("#shareBody").height();
//要将 canvas 的宽高设置成容器宽高的 2 倍
var canvas = document.createElement("canvas");
canvas.width = w * 2;
canvas.height = h * 2;
canvas.style.width = w + "px";
canvas.style.height = h + "px";
var context = canvas.getContext("2d");
//然后将画布缩放，将图像放大两倍画到画布上
context.scale(2, 2);
html2canvas(document.querySelector("#shareBody"), {
canvas: canvas,
onrendered: function (canvas) {
var url = canvas.toDataURL("image/png"); //base64数据
alert(url);
window.location.href=url.replace("image/png", "image/octet-stream");
}
});
</script>html页面生成图片并下载
猜你喜欢
转载自blog.csdn.net/zzwforbid_404/article/details/82685167
今日推荐
周排行