码迷,mamicode.com
首页 > Web开发 > 详细

html2canvas实现js截图

时间:2017-03-11 15:35:20      阅读:199      评论:0      收藏:0      [点我收藏+]

标签:can   set   desc   class   ring   div   element   new   -name   

<html lang="en">

<head>

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>

<script type="text/javascript" src="js/html2canvas.js"></script>

<title></title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

<meta http-equiv="description" content="this is my page">

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<script type="text/javascript">

function print(){ var w = $("#canv").width(); var h = $("#canv").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($("#canv") ,{

onrendered: function(canvas){

var dataUrl = canvas.toDataURL();

document.body.innerHTML="";

var newImg = document.createElement("img");

newImg.src = dataUrl; document.body.appendChild(newImg);

//window.location.href = dataUrl;

} }); }

</script>

</head> <body>

<divid="canv"> 测试 <hr/> </div>

<type="button"id="down_button"href="javascript:print()">生成</a>

</body> </html>

 

 

 

 

 

///**/toDateUrl有跨域问题*/怎么解决??

html2canvas实现js截图

标签:can   set   desc   class   ring   div   element   new   -name   

原文地址:http://www.cnblogs.com/liujiang04/p/6534925.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!