zoukankan      html  css  js  c++  java

  • html2canvas实现js截图

    <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>

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

    </body> </html>

    ///**/toDateUrl有跨域问题*/怎么解决？？
  • 相关阅读:
    JavaScript常用正則表達式
    详尽解析window.event对象
    DWR的类却无法在js里用
    javascript控制小数点精度
    49. Group Anagrams
    48. Rotate Image
    64. Minimum Path Sum
    63. Unique Paths II
    62. Unique Paths
    53. Maximum Subarray
  • 原文地址：https://www.cnblogs.com/liujiang04/p/6534925.html
Copyright © 2011-2022 走看看