<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>htmltopic</title>
	<script src="https://code.jquery.com/jquery-1.3.2.min.js"></script>
	<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
	<style>
		* {margin: 0;}
		.test {width: 100px;height: 100px;text-align: center;line-height: 100px;background-color: #87CEEB;display: inline-block;vertical-align: top;}
		canvas {margin-right: 5px;} 
		.down {float: left;margin: 40px 10px;}
		.down2 {float: left;margin: 40px 30px;}
	</style>

	<style>
		textarea{width:300px;height:150px; border:1px solid #CCC; font-size:12px; color:#000;}
		p{ padding-left:30px; text-indent:-30px;width:270px;height:250px; border:1px solid #900; margin-top:50px; font-size:12px; color:#F00; line-height:21px; overflow:hidden}
	</style>

	<script type="text/javascript">
	 function SwapTxt()
		  {
		      var txt = document.getElementById("eml").value;
		      document.getElementById("lyny").innerHTML=txt;
		  }
	</script>
</head>
<body>
	<div class="test" id="lyny">测试</div>
	<input type="text" class="test">
	<div><a class="down" href="" download="downImg">下载</a></div>
	<div><a class="down2" href="" download="downImg">下载2</a></div>
	<textarea name="" cols="" rows="" class="loe_hk10" id="eml" onkeyup="SwapTxt()"></textarea>

<script>
    //直接选择要截图的dom,就能截图,但是因为canvas的原因,生成的图片模糊
    //html2canvas(document.querySelector('div')).then(function(canvas) {
    //    document.body.appendChild(canvas);
    //});
    //创建一个新的canvas
    var canvas2 = document.createElement("canvas");
    let
    _canvas = document.querySelector('div');
    var w = parseInt(window.getComputedStyle(_canvas).width);
    var h = parseInt(window.getComputedStyle(_canvas).height);
    //将canvas画布放大若干倍,然后盛放在较小的容器内,就显得不模糊了
    canvas2.width = w * 2;
    canvas2.height = h * 2;
    canvas2.style.width = w + "px";
    canvas2.style.height = h + "px";
    //可以按照自己的需求,对context的参数修改,translate指的是偏移量
    //  var context = canvas.getContext("2d");
    //  context.translate(0,0);
    var context = canvas2.getContext("2d");
    context.scale(2, 2);
    html2canvas(document.querySelector('div'), { canvas: canvas2 }).then(function(canvas) {
        //document.body.appendChild(canvas);
        //canvas转换成url,然后利用a标签的download属性,直接下载,绕过上传服务器再下载
        document.querySelector(".down").setAttribute('href', canvas.toDataURL());
    });
</script>
 
 
<script language="javascript">
    //这是另一种写法
    $(function () {
        $(".down2").click(function () {
            html2canvas($(".test")).then(function (canvas) {
                var imgUri = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // 获取生成的图片的url
                window.location.href = imgUri; // 下载图片
            });
 
 
            //html2canvas($('.tongxingzheng_bg'), {
            //    onrendered: function (canvas) {
            //        var data = canvas.toDataURL("image/png");//生成的格式
            //        //data就是生成的base64码啦
            //        alert(data);
            //    }
            //});
        });
    });
</script>
</body>
</html>

发表评论

共有 0 条评论