ความคิดเห็น: บทความนี้แสดงวิธีการแปลงภาพเป็นผ้าใบและวิธีการแยกภาพ รหัสตัวอย่างมีดังนี้ เพื่อนที่มีความต้องการนี้สามารถอ้างถึงได้ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ
JS Canvas และ Image แปลงกันและกันตัวอย่างต้นฉบับ: 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");
ภาพกลับ;
-
เอ่อ การแปลงภาพรูปภาพและผืนผ้าใบนั้นง่ายกว่าที่คุณคิด ในอนาคตฉันจะแสดงให้เห็นถึงเทคโนโลยีการประมวลผลภาพที่แตกต่างกับคุณ ฉันเชื่อว่าคุณจะทำเงินได้มากกับเทคโนโลยีเหล่านี้ในอนาคต