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有跨域问题*/怎么解决？？
  • 相关阅读:
    hive匹配中文
    修改GIT密码
    Oracle中文排序问题
    redis-cli显示中文
    iOS应用图标AppIcon
    Flink开发环境搭建（maven）
    Flink安装部署
    java连Oracle连接字符串写法
    centos设置路由route
    Android 手机卫士--xutils说明与下载方法使用
  • 原文地址：https://www.cnblogs.com/liujiang04/p/6534925.html
Copyright © 2011-2022 走看看