ความคิดเห็น: HTML5, วิเศษมาก โปรแกรมได้รับการทดสอบใน Google Browser เพื่อนที่สนใจสามารถอ้างถึงขั้นตอนเฉพาะในการใช้งานภาพสีเทาโดยใช้ผืนผ้าใบส่วนประกอบ HTML5 ที่อธิบายไว้ในบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ
สร้างหน้า HTML ใหม่และเพิ่มระหว่างแท็กตัวถัง
<sanvas> ตัวกรองสีเทา </anvas>
เพิ่มสคริปต์ JavaScript ที่ง่ายที่สุด
<pre> window.onload = function () {
var canvas = document.getElementById ("Mycanvas");
<span> </span> // todo: ทำอะไรที่นี่
-
รหัสสำหรับการรับบริบทวัตถุวัตถุจากวัตถุ Canvas มีดังนี้:
var context = canvas.getContext ("2d");
รหัส HTML เพื่อเพิ่มภาพในหน้า HTML มีดังนี้
<img src = "hanjiaren.jpg" />
รหัส JavaScript สำหรับการได้รับออบเจ็กต์ภาพจากวัตถุ HTML IMG มีดังนี้:
var image = document.getElementById ("imagesource");
รหัสสำหรับการวาดภาพผลลัพธ์ในวัตถุ Canvas มีดังนี้:
บริบท DRAWIMAGE (ภาพ, 0, 0);
รหัสสำหรับการได้รับข้อมูลพิกเซลรูปภาพจากวัตถุ Canvas มีดังนี้:
var canvasdata = context.getimagedata (0, 0, Canvas.width, Canvas.height);
รหัสสำหรับการอ่านค่าพิกเซลและการใช้การคำนวณสีเทามีดังนี้:
สำหรับ (var x = 0; x <canvasdata.width; x ++) {
สำหรับ (var y = 0; y <canvasdata.height; y ++) {
// ดัชนีของพิกเซลในอาร์เรย์
var idx = (x + y * canvasdata.width) * 4;
var r = canvasdata.data [idx + 0];
var g = canvasdata.data [idx + 1];
var b = canvasdata.data [idx + 2];
// คำนวณค่าสเกลสีเทา
var grey = .299 * r + .587 * g + .114 * b;
// กำหนดค่าสเกลสีเทา
canvasdata.data [idx + 0] = สีเทา; // ช่องสีแดง
canvasdata.data [idx + 1] = สีเทา; // ช่องสีเขียว
canvasdata.data [idx + 2] = สีเทา; // ช่องสีน้ำเงิน
canvasdata.data [idx + 3] = 255; // Alpha Channel
// เพิ่มเส้นขอบสีดำ
if (x <8 || y <8 || x> (canvasdata.width - 8) || y> (canvasdata.height - 8))
-
canvasdata.data [idx + 0] = 0;
canvasdata.data [idx + 1] = 0;
canvasdata.data [idx + 2] = 0;
-
-
-
โดยที่สูตรการคำนวณสีเทาเป็นสีเทา = 0.299 ×สีแดง + 0.578 ×สีเขียว + 0.114 * สีน้ำเงิน
ค่าการอ่านพิกเซลคือ RGBA ซึ่งเป็นตัวแทนของสีแดง, สีเขียว, สีฟ้า, ช่องอัลฟ่า
ข้อมูลที่ประมวลผลจะต้องโหลดลงในผืนผ้าใบ รหัสมีดังนี้:
Context.putimagedata (Canvasdata, 0, 0);
ผลสุดท้ายของโปรแกรมมีดังนี้:
ซอร์สโค้ดที่สมบูรณ์มีดังนี้:
<html>
<head>
<script>
window.onload = function () {
var canvas = document.getElementById ("Mycanvas");
var image = document.getElementById ("imagesource");
// ปรับขนาดผ้าใบอีกครั้ง deminsion
Canvas.width = image.width;
Canvas.height = image.height;
// รับ 2d Render Object
var context = canvas.getContext ("2d");
บริบท DRAWIMAGE (ภาพ, 0, 0);
var canvasdata = context.getimagedata (0, 0, Canvas.width, Canvas.height);
การแจ้งเตือน (canvasdata.width.toString ());
การแจ้งเตือน (canvasdata.height.toString ());
// ตัวกรองสีเทา
สำหรับ (var x = 0; x <canvasdata.width; x ++) {
สำหรับ (var y = 0; y <canvasdata.height; y ++) {
// ดัชนีของพิกเซลในอาร์เรย์
var idx = (x + y * canvasdata.width) * 4;
var r = canvasdata.data [idx + 0];
var g = canvasdata.data [idx + 1];
var b = canvasdata.data [idx + 2];
// คำนวณค่าสเกลสีเทา
var grey = .299 * r + .587 * g + .114 * b;
// กำหนดค่าสเกลสีเทา
canvasdata.data [idx + 0] = สีเทา; // ช่องสีแดง
canvasdata.data [idx + 1] = สีเทา; // ช่องสีเขียว
canvasdata.data [idx + 2] = สีเทา; // ช่องสีน้ำเงิน
canvasdata.data [idx + 3] = 255; // Alpha Channel
// เพิ่มเส้นขอบสีดำ
if (x <8 || y <8 || x> (canvasdata.width - 8) || y> (canvasdata.height - 8))
-
canvasdata.data [idx + 0] = 0;
canvasdata.data [idx + 1] = 0;
canvasdata.data [idx + 2] = 0;
-
-
-
Context.putimagedata (Canvasdata, 0, 0); // ที่ Coords 0,0
-
</script>
</head>
<body>
<H2> Hello World! </h2>
<img src = "hanjiaren.jpg" />
<sanvas> ตัวกรองสีเทา </anvas>
</body>
</html>
ไฟล์ในรหัสสามารถแทนที่ไฟล์ภาพใด ๆ ที่คุณต้องการดู
HTML5 มีมนต์ขลังมาก โปรแกรมได้รับการทดสอบใน Google Browser
คำแนะนำล่าสุดอย่าพยายามเรียกใช้รหัสด้านบนในพื้นที่ การตรวจสอบความปลอดภัยของ Google จะบล็อกการอ่านและเขียนไฟล์ที่ไม่ใช่โดเมนโดยอัตโนมัติจากเบราว์เซอร์
เป็นการดีที่สุดที่จะโพสต์ลงบน Tomcat หรือเว็บคอนเทนเนอร์ใด ๆ และดูเอฟเฟกต์จาก Google Browser