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


Jquery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , Jquery ม Ajax

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

User avatar
bankjittapol
PHP Super Member
PHP Super Member
Posts: 344
Joined: 21/10/2019 10:19 am

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

Post by bankjittapol » 12/11/2019 6:43 pm

การใช้ Domvas library แปลง code html เป็นรูปภาพ
Domvas เป็น library ใน Javascript ซึ่งใช้ทำการแปลง คำสั่งhtml ให้เป็นรูปภาพ

syntax

Code: Select all

domvas.toImage(domElement, readyCallback, width, height, left, top);
การใช้งาน

Code: Select all

var canvas = document.getElementById("test");
var context = canvas.getContext('2d');

domvas.toImage(document.getElementById("dom"), function() {
    context.drawImage(this, 20, 20);   
});
ตัวอย่างการใช้งาน

Code: Select all

    
    <div style='font-size:30px' id="dom">
                <p>ทดสอบ</p><strong>แปลง ข้อความ</strong>
            </div>
 
div id dom เก็บข้อมความ และเป็น code html

Code: Select all

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

Code: Select all

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

คำสั่งแปลง html เป็นรูปภาพ

Code: Select all

	<script>
		var canvas = document.getElementById("test");
		var context = canvas.getContext('2d');
		domvas.toImage(document.getElementById("dom"), function() {
			context.drawImage(this, 20, 20);
		});
	</script>
ผลลัพธ์ที่ได้
Image


เพิ่ม css เข้าไป

Code: Select all

	<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>
จะได้

Image
ฝั่งซ้าย คือ code html ฝั่งขวา คือ รูปภาพ


อ้างอิง
https://github.com/pbakaus/domvas

Return to “Jquery & Ajax Knowledge”

Users browsing this forum: No registered users and 2 guests