Domvas เป็น library ใน Javascript ซึ่งใช้ทำการแปลง คำสั่งhtml ให้เป็นรูปภาพ
syntax
โค้ด: เลือกทั้งหมด
domvas.toImage(domElement, readyCallback, width, height, left, top);
โค้ด: เลือกทั้งหมด
var canvas = document.getElementById("test");
var context = canvas.getContext('2d');
domvas.toImage(document.getElementById("dom"), function() {
context.drawImage(this, 20, 20);
});
โค้ด: เลือกทั้งหมด
<div style='font-size:30px' id="dom">
<p>ทดสอบ</p><strong>แปลง ข้อความ</strong>
</div>
โค้ด: เลือกทั้งหมด
<canvas id="test" width="350" height="206"></canvas>
โค้ด: เลือกทั้งหมด
<script src="../src/domvas.js"></script>
คำสั่งแปลง html เป็นรูปภาพ
โค้ด: เลือกทั้งหมด
<script>
var canvas = document.getElementById("test");
var context = canvas.getContext('2d');
domvas.toImage(document.getElementById("dom"), function() {
context.drawImage(this, 20, 20);
});
</script>
เพิ่ม css เข้าไป
โค้ด: เลือกทั้งหมด
<style type="text/css">
#dom {
font-family: Arial;
border: 5px solid rgba(0,0,0,0.2);
border-radius: 10px;
width: 260px;
padding: 5px 20px;
background: #4f8eff;
text-shadow: 1px 1px 0 #264782;
line-height: 1.4em;
margin: 20px;
}
#dom p {
color: rgba(255,255,255,0.8);
}
#dom strong {
color: #fff;
font-style: italic;
}
</style>
ฝั่งซ้าย คือ code html ฝั่งขวา คือ รูปภาพ
อ้างอิง
https://github.com/pbakaus/domvas