การใช้ Domvas library แปลง code html แปลงหน้าเว็บ เป็นรูปภาพ

jQuery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , jQuery และ Ajax

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
bankjittapol
PHP Super Member
PHP Super Member
โพสต์: 344
ลงทะเบียนเมื่อ: 21/10/2019 10:19 am

การใช้ Domvas library แปลง code html แปลงหน้าเว็บ เป็นรูปภาพ

โพสต์ที่ยังไม่ได้อ่าน โดย bankjittapol »

การใช้ Domvas library แปลง code html เป็นรูปภาพ
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>
 
div id dom เก็บข้อมความ และเป็น code html

โค้ด: เลือกทั้งหมด

<canvas id="test" width="350" height="206"></canvas>
canvas id test แสดงผล ผลลัพธ์ ของ code html ที่แปลงเป้นรูปภาพแล้ว

โค้ด: เลือกทั้งหมด

<script src="../src/domvas.js"></script>
เรียกใช้ library Domvas

คำสั่งแปลง 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
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 32