ความคิดเห็น: บทความนี้ส่วนใหญ่แนะนำวิธีการวางรูปภาพและบันทึกเป็นรูปภาพใน HTML5 Canvas โดยเฉพาะอย่างยิ่งการบันทึกเนื้อหารูปภาพเป็นรูปภาพซึ่งเป็นฟังก์ชั่นที่ใช้งานได้จริง เพื่อนที่ต้องการมันสามารถอ้างถึงมันได้
คัดลอกรูปภาพลงในผ้าใบโดยใช้ JavaScript
ในการใส่ภาพลงในผืนผ้าใบเราใช้วิธีการวาดภาพขององค์ประกอบผ้าใบ:
// แปลงภาพเป็นผ้าใบ; ส่งคืนองค์ประกอบผ้าใบใหม่
ฟังก์ชั่น convertimagetocanvas (ภาพ) {
var canvas = document.createElement ("Canvas");
Canvas.width = image.width;
Canvas.height = image.height;
canvas.getContext ("2d"). drawImage (ภาพ, 0, 0); </p> <p> ส่งคืนผ้าใบ;
-
ที่นี่จุดพิกัดบนผืนผ้าใบพารามิเตอร์ 0, 0 ภาพจะถูกคัดลอกไปยังสถานที่นี้
บันทึก Canvas เป็นรูปแบบรูปภาพโดยใช้ JavaScript
หากงานของคุณบนผืนผ้าใบเสร็จสมบูรณ์คุณสามารถแปลงข้อมูล Canvas เป็นรูปแบบภาพโดยใช้วิธีง่าย ๆ ต่อไปนี้:
// แปลงผืนผ้าใบเป็นภาพ
ฟังก์ชัน ConvertCanVastoImage (Canvas) {
ภาพ var = ภาพใหม่ ();
image.src = canvas.todataurl ("image/png");
ภาพกลับ;
-
รหัสนี้สามารถแปลงผ้าใบเป็นรูปแบบ PNG ได้อย่างน่าอัศจรรย์!
เทคนิคเหล่านี้สำหรับการแปลงระหว่างรูปภาพและผืนผ้าใบอาจง่ายกว่าที่คุณคิด