ผืนผ้าใบและรูปภาพแปลงรหัสตัวอย่างอื่น ๆ

ความคิดเห็น: บทความนี้แสดงวิธีการแปลงภาพเป็นผ้าใบและวิธีการแยกภาพ รหัสตัวอย่างมีดังนี้ เพื่อนที่มีความต้องการนี้สามารถอ้างถึงได้ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ

ตัวอย่างต้นฉบับ: JavaScript Canvas Image Image Demo Demo

ในการประชุม Mozilla Web Development Conference เมื่อสัปดาห์ที่แล้วเราได้ใช้จ่ายส่วนใหญ่ตลอดทั้งวันเพื่อหารือเกี่ยวกับแอปพลิเคชันตลาด Mozilla ในอนาคต Instagram เป็นแอพมือถือที่ได้รับความนิยมมากที่สุดเมื่อเร็ว ๆ นี้ขายให้กับ Facebook ในราคาสูงถึง 1 พันล้านเหรียญสหรัฐ

ฉันไม่รังเกียจที่จะได้รับเงินพิเศษดังนั้นฉันจึงตัดสินใจสร้างแอพสไตล์ Instagram (จะแบ่งปันในภายหลัง)

บทความนี้แสดงวิธีการแปลงภาพเป็นผ้าใบและวิธีการแยกภาพ

แปลงภาพเป็นผ้าใบ

ในการแปลงภาพเป็นผืนผ้าใบ (artboard, Canvas) คุณสามารถใช้วิธีการ drawimage ของบริบทองค์ประกอบ Canvas:

// แปลงภาพเป็นวัตถุผ้าใบ

ฟังก์ชั่น convertimagetocanvas (ภาพ) {

// สร้างองค์ประกอบ Canvas DOM และตั้งค่าความกว้างและความสูงเหมือนกับรูปภาพ

var canvas = document.createElement ("Canvas");

Canvas.width = image.width;

Canvas.height = image.height;

// พิกัด (0,0) ระบุภาพวาดจากที่นี่ซึ่งเทียบเท่ากับการชดเชย

canvas.getContext ("2d"). drawimage (ภาพ, 0, 0);

กลับผ้าใบ;

-

แปลงผืนผ้าใบเป็นภาพ

สมมติว่าภาพได้รับการประมวลผลบนผืนผ้าใบคุณสามารถใช้วิธีการต่อไปนี้เพื่อแปลงผืนผ้าใบเป็นวัตถุภาพภาพ

// แยกภาพจากผ้าใบ

ฟังก์ชัน ConvertCanVastoImage (Canvas) {

// วัตถุภาพใหม่สามารถเข้าใจได้ว่าเป็น DOM

ภาพ var = ภาพใหม่ ();

// canvas.todataurl ส่งคืนสตริงของ URL ที่เข้ารหัส Base64 แน่นอนเบราว์เซอร์ต้องสนับสนุน

// ระบุรูปแบบ png

image.src = canvas.todataurl ("image/png");

ภาพกลับ;

-

เอ่อ การแปลงภาพรูปภาพและผืนผ้าใบนั้นง่ายกว่าที่คุณคิด ในอนาคตฉันจะแสดงให้เห็นถึงเทคโนโลยีการประมวลผลภาพที่แตกต่างกับคุณ ฉันเชื่อว่าคุณจะทำเงินได้มากกับเทคโนโลยีเหล่านี้ในอนาคต