Преобразование HTML в холст

Question

Примечание: Я пробовал все относительные вопросы в переполнении стека. Но у меня нет ответа.

Я пытаюсь преобразовать HTML Для Холст. Использование либо JavaScript или jQuery.

JsFiddle Демоhere

.container { 
 
    width: 500px; 
 
    max-height: 500px; 
 
    margin: 10px; 
 
    border: 1px solid #fff; 
 
    background-color: #ffffff; 
 
    box-shadow: 0px 2px 7px #292929; 
 
    -moz-box-shadow: 0px 2px 7px #292929; 
 
    -webkit-box-shadow: 0px 2px 7px #292929; 
 
    border-radius: 10px; 
 
    -moz-border-radius: 10px; 
 
    -webkit-border-radius: 10px; 
 
} 
 
.mainbody, 
 
.header, 
 
.footer { 
 
    padding: 5px; 
 
} 
 
.mainbody { 
 
    margin-top: 0; 
 
    min-height: 150px; 
 
    max-height: 388px; 
 
    overflow: auto; 
 
} 
 
.header { 
 
    height: 40px; 
 
    border-bottom: 1px solid #EEE; 
 
    background-color: #ff8080; 
 
    height: 40px; 
 
    -webkit-border-top-left-radius: 5px; 
 
    -webkit-border-top-right-radius: 5px; 
 
    -moz-border-radius-topleft: 5px; 
 
    -moz-border-radius-topright: 5px; 
 
    border-top-left-radius: 5px; 
 
    border-top-right-radius: 5px; 
 
} 
 
.footer { 
 
    height: 40px; 
 
    background-color: #b3c6ff; 
 
    border-top: 1px solid #DDD; 
 
    -webkit-border-bottom-left-radius: 5px; 
 
    -webkit-border-bottom-right-radius: 5px; 
 
    -moz-border-radius-bottomleft: 5px; 
 
    -moz-border-radius-bottomright: 5px; 
 
    border-bottom-left-radius: 5px; 
 
    border-bottom-right-radius: 5px; 
 
} 
 

 
section { 
 
    width: 80%; 
 
    height: 200px; 
 
    margin: auto; 
 
    padding: 10px; 
 
} 
 
div#one { 
 
    width: 15%; 
 
    height: 200px; 
 
    background: #99ffbb; 
 
    float: left; 
 
} 
 
div#two { 
 
    margin-left: 15%; 
 
    height: 200px; 
 
    background: #ffcccc; 
 
}

<b>My HTML Code</b><br> 
 
<div id="MyHTMLCODE"> 
 
<div class="container"> 
 
    <div class="header"> 
 
     Header 
 
    </div> 
 
    <div class="mainbody"> 
 
    My Main Body 
 
     <section> 
 
    <div id="one"> <b>First</b> </div> 
 
    <div id="two"> <b>Second</b> </div> 
 
</section> 
 
    </div> 
 
    <div class="footer"> 
 
     Footer 
 
    </div> 
 
</div> 
 
</div> 
 

 

 
<br><b> My Convert Canvas</b><br> 
 
<canvas id="canvas" style="border:2px solid black;" width="200" height="200"></canvas>

Answer 1

Как я уже говорил ранее, html2canvas будет делать это. Минимальный пример. Updated fiddle

html2canvas($('#MyHTMLCODE'), { 
 
    onrendered: function(canvas) { 
 
     $('#canvas').replaceWith(canvas); 
 
    }, 
 
    //width: 200, 
 
    //height: 200 
 
});

.container { 
 
    width: 500px; 
 
    max-height: 500px; 
 
    margin: 10px; 
 
    border: 1px solid #fff; 
 
    background-color: #ffffff; 
 
    box-shadow: 0px 2px 7px #292929; 
 
    -moz-box-shadow: 0px 2px 7px #292929; 
 
    -webkit-box-shadow: 0px 2px 7px #292929; 
 
    border-radius: 10px; 
 
    -moz-border-radius: 10px; 
 
    -webkit-border-radius: 10px; 
 
} 
 
.mainbody, 
 
.header, 
 
.footer { 
 
    padding: 5px; 
 
} 
 
.mainbody { 
 
    margin-top: 0; 
 
    min-height: 150px; 
 
    max-height: 388px; 
 
    overflow: auto; 
 
} 
 
.header { 
 
    height: 40px; 
 
    border-bottom: 1px solid #EEE; 
 
    background-color: #ff8080; 
 
    height: 40px; 
 
    -webkit-border-top-left-radius: 5px; 
 
    -webkit-border-top-right-radius: 5px; 
 
    -moz-border-radius-topleft: 5px; 
 
    -moz-border-radius-topright: 5px; 
 
    border-top-left-radius: 5px; 
 
    border-top-right-radius: 5px; 
 
} 
 
.footer { 
 
    height: 40px; 
 
    background-color: #b3c6ff; 
 
    border-top: 1px solid #DDD; 
 
    -webkit-border-bottom-left-radius: 5px; 
 
    -webkit-border-bottom-right-radius: 5px; 
 
    -moz-border-radius-bottomleft: 5px; 
 
    -moz-border-radius-bottomright: 5px; 
 
    border-bottom-left-radius: 5px; 
 
    border-bottom-right-radius: 5px; 
 
} 
 

 
section { 
 
    width: 80%; 
 
    height: 200px; 
 
    margin: auto; 
 
    padding: 10px; 
 
} 
 
div#one { 
 
    width: 15%; 
 
    height: 200px; 
 
    background: #99ffbb; 
 
    float: left; 
 
} 
 
div#two { 
 
    margin-left: 15%; 
 
    height: 200px; 
 
    background: #ffcccc; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script> 
 
<b>My HTML Code</b><br> 
 
<div id="MyHTMLCODE"> 
 
<div class="container"> 
 
    <div class="header"> 
 
     Header 
 
    </div> 
 
    <div class="mainbody"> 
 
    My Main Body 
 
     <section> 
 
    <div id="one"> <b>First</b> </div> 
 
    <div id="two"> <b>Second</b> </div> 
 
</section> 
 
    </div> 
 
    <div class="footer"> 
 
     Footer 
 
    </div> 
 
</div> 
 
</div> 
 

 

 
<br><b> My Convert Canvas</b><br> 
 
<canvas id="canvas" style="border:2px solid black;" width="200" height="200"></canvas>