muthu32 · April 12, 2019 09:30
diff --git a/html2img.html b/html2img.html
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
 <html>
  <head>
    <title>
      display/box/float/clear test
    </title>
    <style type="text/css">
      /* last modified: 1 Dec 98 */

      html {
        font: 10px/1 Verdana, sans-serif;
        background-color: blue;
        color: white;
      }

      body {
        margin: 1.5em;
        border: .5em solid black;
        padding: 0;
        width: 48em;
        background-color: white;
      }

      dl {
        margin: 0;
        border: 0;
        padding: .5em;
      }

      dt {
        background-color: rgb(204,0,0);
        margin: 0;
        padding: 1em;
        width: 10.638%; /* refers to parent element's width of 47em. = 5em or 50px */
        height: 28em;
        border: .5em solid black;
        float: left;
      }

      dd {
        float: right;
        margin: 0 0 0 1em;
        border: 1em solid black;
        padding: 1em;
        width: 34em;
        height: 27em;
      }

      ul {
        margin: 0;
        border: 0;
        padding: 0;
      }

      li {
        display: block; /* i.e., suppress marker */
        color: black;
        height: 9em;
        width: 5em;
        margin: 0;
        border: .5em solid black;
        padding: 1em;
        float: left;
        background-color: #FC0;
      }

      #bar {
        background-color: black;
        color: white;
        width: 41.17%; /* = 14em */
        border: 0;
        margin: 0 1em;
      }

      #baz {
        margin: 1em 0;
        border: 0;
        padding: 1em;
        width: 10em;
        height: 10em;
        background-color: black;
        color: white;
      }

      form {
        margin: 0;
        display: inline;
      }

      p {
        margin: 0;
      }

      form p {
        line-height: 1.9;
      }

      blockquote {
        margin: 1em 1em 1em 2em;
        border-width: 1em 1.5em 2em .5em;
        border-style: solid;
        border-color: black;
        padding: 1em 0;
        width: 5em;
        height: 9em;
        float: left;
        background-color: #FC0;
        color: black;
      }

      address {
        font-style: normal;
      }

      h1 {
        background-color: black;
        color: white;
        float: left;
        margin: 1em 0;
        border: 0;
        padding: 1em;
        width: 10em;
        height: 10em;
        font-weight: normal;
        font-size: 1em;
      }
    </style>
  </head>
  <body>
      <div id="test">
    <dl>
      <dt>
        toggle
      </dt>
      <dd>
        <ul>
          <li>
            the way
          </li>
          <li id="bar">
            <p>
              the world ends
            </p>
            <form action="./" method="get">
              <p>
                bang
                <input type="radio" name="foo" value="off">
              </p>
              <p>
                whimper
                <input type="radio" name="foo2" value="on">
              </p>
            </form>
          </li>
          <li>
            i grow old
          </li>
          <li id="baz">
            pluot?
          </li>
        </ul>
        <blockquote>
          <address>
            bar maids,
          </address>
        </blockquote>
        <h1>
          sing to me, erbarme dich
        </h1>
      </dd>
    </dl>
    <p style="color: black; font-size: 1em; line-height: 1.3em; clear: both">
      This is a nonsensical document, but syntactically valid HTML 4.0. All 100% conformant CSS1 agents should be able to render the document elements above this paragraph <b>indistinguishably</b> (to the pixel) from this reference rendering, (except font rasterization and form widgets). All discrepancies should be traceable to CSS1 implementation shortcomings. Once you have finished evaluating this test, you can return to the <A HREF="sec5526c.htm" style="text-decoration:none">parent page</A>.
    </p>
          </div>
      <div id="div" style="width:500px;height:500px;background:yellow;"></div>
      <div id="parent"></div>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
    <script type="text/javascript">
        
        html2canvas(document.getElementById('test')).then(function(canvas) {
            //document.body.appendChild(canvas);
            var extra_canvas = document.createElement("canvas");
                extra_canvas.setAttribute('width',500);
                extra_canvas.setAttribute('height',300);
                var ctx = extra_canvas.getContext('2d');
                ctx.drawImage(canvas,0,0,canvas.width, canvas.height,0,0,500,300);
                var img = extra_canvas.toDataURL();
                
                
            
             var pHtml = "<img src="+img+" />";
            document.getElementById('parent').innerHTML = pHtml;
        });
        
        
    </script>
  </body>
 </html>
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
	<html>
	<head>
	<title>
	display/box/float/clear test
	</title>
	<style type="text/css">
	/* last modified: 1 Dec 98 */

	html {
	font: 10px/1 Verdana, sans-serif;
	background-color: blue;
	color: white;
	}

	body {
	margin: 1.5em;
	border: .5em solid black;
	padding: 0;
	width: 48em;
	background-color: white;
	}

	dl {
	margin: 0;
	border: 0;
	padding: .5em;
	}

	dt {
	background-color: rgb(204,0,0);
	margin: 0;
	padding: 1em;
	width: 10.638%; /* refers to parent element's width of 47em. = 5em or 50px */
	height: 28em;
	border: .5em solid black;
	float: left;
	}

	dd {
	float: right;
	margin: 0 0 0 1em;
	border: 1em solid black;
	padding: 1em;
	width: 34em;
	height: 27em;
	}

	ul {
	margin: 0;
	border: 0;
	padding: 0;
	}

	li {
	display: block; /* i.e., suppress marker */
	color: black;
	height: 9em;
	width: 5em;
	margin: 0;
	border: .5em solid black;
	padding: 1em;
	float: left;
	background-color: #FC0;
	}

	#bar {
	background-color: black;
	color: white;
	width: 41.17%; /* = 14em */
	border: 0;
	margin: 0 1em;
	}

	#baz {
	margin: 1em 0;
	border: 0;
	padding: 1em;
	width: 10em;
	height: 10em;
	background-color: black;
	color: white;
	}

	form {
	margin: 0;
	display: inline;
	}

	p {
	margin: 0;
	}

	form p {
	line-height: 1.9;
	}

	blockquote {
	margin: 1em 1em 1em 2em;
	border-width: 1em 1.5em 2em .5em;
	border-style: solid;
	border-color: black;
	padding: 1em 0;
	width: 5em;
	height: 9em;
	float: left;
	background-color: #FC0;
	color: black;
	}

	address {
	font-style: normal;
	}

	h1 {
	background-color: black;
	color: white;
	float: left;
	margin: 1em 0;
	border: 0;
	padding: 1em;
	width: 10em;
	height: 10em;
	font-weight: normal;
	font-size: 1em;
	}
	</style>
	</head>
	<body>
	<div id="test">
	<dl>
	<dt>
	toggle
	</dt>
	<dd>
	<ul>
	<li>
	the way
	</li>
	<li id="bar">
	<p>
	the world ends
	</p>
	<form action="./" method="get">
	<p>
	bang
	<input type="radio" name="foo" value="off">
	</p>
	<p>
	whimper
	<input type="radio" name="foo2" value="on">
	</p>
	</form>
	</li>
	<li>
	i grow old
	</li>
	<li id="baz">
	pluot?
	</li>
	</ul>
	<blockquote>
	<address>
	bar maids,
	</address>
	</blockquote>
	<h1>
	sing to me, erbarme dich
	</h1>
	</dd>
	</dl>
	<p style="color: black; font-size: 1em; line-height: 1.3em; clear: both">
	This is a nonsensical document, but syntactically valid HTML 4.0. All 100% conformant CSS1 agents should be able to render the document elements above this paragraph <b>indistinguishably</b> (to the pixel) from this reference rendering, (except font rasterization and form widgets). All discrepancies should be traceable to CSS1 implementation shortcomings. Once you have finished evaluating this test, you can return to the <A HREF="sec5526c.htm" style="text-decoration:none">parent page</A>.
	</p>
	</div>
	<div id="div" style="width:500px;height:500px;background:yellow;"></div>
	<div id="parent"></div>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
	<script type="text/javascript" src="http://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
	<script type="text/javascript">

	html2canvas(document.getElementById('test')).then(function(canvas) {
	//document.body.appendChild(canvas);
	var extra_canvas = document.createElement("canvas");
	extra_canvas.setAttribute('width',500);
	extra_canvas.setAttribute('height',300);
	var ctx = extra_canvas.getContext('2d');
	ctx.drawImage(canvas,0,0,canvas.width, canvas.height,0,0,500,300);
	var img = extra_canvas.toDataURL();



	var pHtml = "<img src="+img+" />";
	document.getElementById('parent').innerHTML = pHtml;
	});


	</script>
	</body>
	</html>
No results found