ภาพ SVG ใน p5.js: โหลด ปรับขนาด และเก็บต้นฉบับ

หากต้องการโหลดภาพ SVG ใน p5.js 2.3.4 ให้ใช้ await loadImage('emblem.svg') ภายใน async function setup() แล้ววาดภาพที่ได้ด้วย image() ให้บริการหน้าและ SVG ผ่าน HTTP เก็บไฟล์ SVG เป็นต้นฉบับที่แก้ไขได้ เพราะวิธีโหลดภาพนี้ระบาย p5.Image ลง Canvas และไม่ได้ให้เส้น SVG ที่แก้ไขได้กับสเก็ตช์ เอกสาร loadImage ปัจจุบัน อธิบายรูปแบบโหลดที่ใช้ Promise

การโหลดสำเร็จตอบเพียงคำถามแรก ตรวจว่าช่องยังโปร่งใส ภาพยืดหรือไม่ และขนาดพิกเซลที่โหลดเหมาะกับขนาดแสดงใหญ่ที่สุดหรือไม่ ตัวอย่างด้านล่างใช้สี่เหลี่ยมข้าวหลามตัดมุมมนต้นฉบับที่มีช่องกลาง และวาดที่ 48, 120 และ 240 พิกเซล

เลือกการแสดงภาพหรือรูปทรงต้นฉบับ

คู่มือนี้ตรึง p5.js 2.3.4 และตัวเรนเดอร์ P2D ใช้ API อะซิงโครนัสปัจจุบันแทนการคัดลอกโค้ดเริ่มต้น preload() จากบทเรียน 1.x createCanvas สร้าง Canvas ของสเก็ตช์และรองรับการเลือกตัวเรนเดอร์ชัดเจน

ในรุ่นนี้ โค้ดโหลดภาพ วาดภาพที่เบราว์เซอร์โหลดลง Canvas ภายใน p5.Image จึงอธิบายได้ว่าทำไมการคงนามสกุล .svg และขยายภาพบน Canvas จึงไม่เพียงพอให้แก้เส้นภายในสเก็ตช์ได้

บันทึก SVG ต้นฉบับที่มีช่องจริง

บันทึกไฟล์นี้เป็น emblem.svg มีหนึ่งเส้น ไม่มีบิตแมปฝังตัว ระบุขนาด 120 × 120 และ viewBox ที่ตรงกัน รูปข้าวหลามตัดมุมมนด้านนอกกับรูปด้านในเป็นสองเส้นขอบภายในเส้นเดียว fill-rule="evenodd" เว้นกลางไม่ระบายสี เอกสาร fill-rule ของ MDN อธิบายว่ากฎนี้กำหนดพื้นที่เติมอย่างไร

<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
  <path fill="#eb705a" fill-rule="evenodd" d="M60 8 Q66 8 72 14 L106 48 Q118 60 106 72 L72 106 Q60 118 48 106 L14 72 Q2 60 14 48 L48 14 Q54 8 60 8 Z M60 40 L80 60 L60 80 L40 60 Z"/>
</svg>

ช่องไม่ได้เป็นรูปข้าวหลามตัดขาววางทับรูปปะการัง ความต่างนี้สำคัญเมื่อพื้นหลังสเก็ตช์เปลี่ยน หากไฟล์เดิมมีองค์ประกอบ <image> ให้ตรวจด้วยรายการตรวจแรสเตอร์ฝังตัว ก่อนคิดว่างานทั้งหมดเป็นเส้นที่แก้ไขได้

โหลดด้วย async setup

บันทึกหน้าครบชุดนี้เป็น example.html ข้าง emblem.svg แล้วให้บริการโฟลเดอร์ด้วยเซิร์ฟเวอร์ HTTP ในเครื่อง เช่น รัน python3 -m http.server 8000 ในโฟลเดอร์และเปิด http://localhost:8000/example.html ในเบราว์เซอร์

<!doctype html>
<html lang="en"><meta charset="utf-8"><title>p5.js SVG image size check</title>
<p>Original 120 × 120 SVG; Canvas destinations 48, 120 and 240 pixels.</p>
<pre id="status">Loading original SVG…</pre>
<script src="https://cdn.jsdelivr.net/npm/p5@2.3.4/lib/p5.js"></script>
<script>async function setup() {
  createCanvas(650, 300, P2D);
  pixelDensity(1);
  noLoop();
  background('#e7eeea');
  try {
    const art = await loadImage('emblem.svg');
    for (const [x, size] of [[20, 48], [110, 120], [280, 240]]) {
      image(art, x, 20, size, size * art.height / art.width);
    }
    const center = art.get(60, 60);
    const solid = art.get(60, 25);
    document.querySelector('#status').textContent = JSON.stringify({
      version: p5.VERSION, imageWidth: art.width, imageHeight: art.height,
      sourceCenterRGBA: center, sourceSolidRGBA: solid,
      canvasWidth: width, canvasHeight: height, pixelDensity: pixelDensity(),
      destinationSizes: [48, 120, 240]
    }, null, 2);
  } catch (error) {
    document.querySelector('#status').textContent = 'Image load failed: ' + error.message;
  }
}</script></html>

ส่วนสถานะปรากฏหลังโหลดและรายงานรุ่น p5 ขนาดภาพที่โหลด และตัวอย่างพิกเซลต้นฉบับสองจุด จุดกลางตรวจความโปร่งใส ส่วนจุดสีปะการังตรวจส่วนทึบของวง การเรียกวาดใช้ภาพที่โหลดเดียวกัน ไม่ได้โหลดใหม่หรือเปลี่ยน SVG ระหว่างขนาดแสดง

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

ตัวอย่างตั้ง pixelDensity(1) เพื่อให้เงื่อนไขเทียบ Canvas ชัดเจน จดความหนาแน่นที่สเก็ตช์จริงใช้ ค่าเริ่มต้นอาจตามหน้าจอ การเพิ่มความหนาแน่น Canvas ไม่สร้างเส้นที่กลายเป็นภาพโหลดแล้วกลับมา

ผลทดสอบเบราว์เซอร์

เรารันไฟล์ต้นฉบับและโค้ดเริ่มต้นนี้ใน Chrome ด้วย p5.js 2.3.4, P2D และความหนาแน่นพิกเซล 1 ภาพที่โหลดมีขนาด 120 × 120 จุดตัวอย่างกลางคือ [0, 0, 0, 0] ส่วนจุดภายในสีปะการังคือ [235, 112, 90, 255] พื้นหลังสเก็ตช์สีอ่อนยังมองผ่านช่องได้ทั้งสามขนาดปลายทาง

ข้อสังเกตนี้อธิบายไฟล์ที่สร้าง เบราว์เซอร์ รุ่น และตัวเรนเดอร์นี้ ไม่ใช่ผลความเข้ากันได้สำหรับ SVG ส่งออกทุกไฟล์ ฟิลเตอร์ ฟอนต์ หรือรันไทม์ภายนอก

ต้นฉบับแก้ไขได้และภาพ Canvas

ข้อมูลเส้นต้นฉบับไม่เปลี่ยนตลอดการทดสอบ การวาดภาพที่ 2× มีผลต่อการแสดง ไม่ใช่แอตทริบิวต์ d ใน emblem.svg บันทึกต้นฉบับกับโปรเจกต์เพื่อเตรียมภาพส่งงานแบบอื่นภายหลัง

แก้ตามอาการที่เห็น

ภาพไม่ปรากฏเลย

ตรวจว่า URL ของ SVG เปิดได้จากหน้าที่ให้บริการ และ loadImage() เสร็จก่อน image() ทำงาน try/catch ในโค้ดเริ่มต้นแสดงความล้มเหลวโหลดในส่วนสถานะ ภาพระยะไกลอาจโหลดไม่สำเร็จเพราะข้อจำกัดความปลอดภัยเบราว์เซอร์ตามเอกสาร loadImage เริ่มไฟล์ต้นทางเดียวกันที่ควบคุมได้เพื่อแยกปัญหาโหลดออกจากปัญหาภาพ

เปิด SVG เดี่ยวในเบราว์เซอร์ หากที่นั่นผิดด้วย ให้แก้ต้นฉบับก่อน PNG ที่เปลี่ยนชื่อไม่กลายเป็นเอกสาร SVG และตัวห่อ SVG รอบบิตแมปไม่สร้างเส้นขอบที่ไม่มี

ภาพดูยืด

เทียบอัตราส่วนปลายทางกับ art.width / art.height เช่น การวาดภาพจัตุรัสลงปลายทาง 240 × 120 ตั้งใจทำให้กว้างสองเท่าเมื่อเทียบความสูง ใช้สูตรสัดส่วนในตัวอย่างหากไม่ต้องการยืด หากต้นฉบับมีพื้นที่ว่างมากเอง ให้ตรวจอาร์ตบอร์ดและ viewBox ก่อนขยายการแสดงชดเชย

ขอบขยายดูนุ่ม

ตรวจขนาดภาพที่โหลด ไม่ใช่เพียงขนาด Canvas ในการทดสอบของเรา ภาพ 120 × 120 ถูกวาดที่ปลายทาง 240 × 240 การเปลี่ยนอาร์กิวเมนต์ปลายทางไม่ได้ประมวลผลเส้นโค้ง SVG ผ่านการโหลดภาพใหม่

เตรียม SVG ส่งงานที่ระบุขนาดเหมาะกับการใช้ โหลดอีกครั้งและตรวจ art.width กับ art.height ที่ได้ก่อนยอมรับ เก็บระบบพิกัดและเส้นขอบต้นฉบับไว้ จากนั้นเทียบขนาดบนจอเล็กสุดกับใหญ่สุด พิกเซลโหลดมากขึ้นไม่ทำให้ช่องจิ๋วอ่านออกหากขนาดแสดงสุดท้ายเล็กเกิน

หากสเก็ตช์ต้องทำงานรูปทรงแทนการระบายภาพ ให้วางแผนแยก คู่มือ Canvas Path2D ครอบคลุมการทำงานข้อมูลเส้น ส่วนคู่มือ SVG ของ PixiJS เทียบเส้นทางรูปทรงและพื้นผิวของเอนจินนั้น API เหล่านั้นใช้สลับกับ loadImage() ของ p5 ไม่ได้

กลางเป็นขาวแทนโปร่งใส

ตรวจ SVG ต้นฉบับว่ามีพื้นหลังระบายหรือรูปขาวด้านในหรือไม่ ต้นฉบับนี้ใช้เส้นขอบ evenodd เว้นช่อง และอัลฟาจุดกลางที่โหลดเป็นศูนย์ ทดสอบไฟล์ของคุณอีกครั้งบนพื้นหลังสเก็ตช์สีตัดกัน หน้าตัวอย่างขาวอาจซ่อนความต่าง

แยกการส่งออก Canvas จากต้นฉบับ SVG

เอกสาร saveCanvas มาตรฐาน ระบุผลภาพ PNG, WebP และ JPG การบันทึก Canvas ที่ระบายแล้วผ่าน API นี้ไม่ได้กู้เส้น SVG เดิม เก็บ emblem.svg แยกหากต้องแก้เส้นขอบภายหลังหรือส่งไฟล์ที่เป็นเส้น ภาพหน้าจอ Canvas ที่ดูเรียบไม่ยืนยันขั้นตอนส่งออก SVG ที่แก้ไขได้

PerfectVector เหมาะกับขั้นก่อนหน้าเมื่อภาพมีเพียง PNG หรือ JPG แบนและต้องการเส้นต้นฉบับไว้แก้ แปลงภาพเป็น SVG ตรวจเส้นขอบและพื้นที่ว่างในโปรแกรม SVG แล้วทำการตรวจโหลด p5 และขนาดจริงซ้ำ ใช้ SVG สะอาดเดิมโดยตรงได้ การลอกลายไม่เปลี่ยน API ภาพ p5 หรือเปลี่ยนผล Canvas เป็นเอกสารเส้น SVG คู่มือแปลงเวกเตอร์ฉบับกว้าง อธิบายขั้นเตรียมต้นฉบับนี้

เก็บต้นฉบับ จดรุ่น p5 และขนาดโหลด แล้วรับไฟล์เมื่อช่องและขอบทำงานได้ที่ขนาดที่สเก็ตช์ใช้เท่านั้น

คำถามที่พบบ่อย

p5.js โหลด SVG ด้วย loadImage ได้หรือไม่? ได้ ตัวอย่าง p5.js 2.3.4 P2D นี้โหลด SVG ต้นฉบับด้วย await loadImage ใน async setup ทดสอบรูปลักษณ์และขนาดที่โหลดของไฟล์คุณ แทนถือว่าการโหลดสำเร็จหนึ่งครั้งเท่ากับรองรับ SVG ทั้งหมด

ภาพ SVG ที่โหลดใน p5 ยังแก้เป็นเส้นได้หรือไม่? ขั้นตอนโหลดภาพคืน p5.Image และระบายลง Canvas เก็บ SVG ต้นฉบับแยกสำหรับแก้เส้นต้นทาง การแสดงภาพ Canvas ไม่ให้ SVG DOM ที่แก้ไขได้ของภาพที่โหลด

ทำไม SVG ใน p5 เบลอเมื่อขยาย? เทียบขนาดภาพที่โหลดกับขนาดปลายทาง ภาพที่โหลด 120 × 120 ของเราดูนุ่มขึ้นที่ 240 × 240 เตรียมต้นทางส่งงานที่ขนาดเหมาะ โหลดใหม่และตรวจผลจริง

saveCanvas ส่งออก SVG ต้นฉบับหรือไม่? API saveCanvas มาตรฐานระบุผล PNG, WebP และ JPG เก็บต้นฉบับ SVG หรือยืนยันกระบวนการเรนเดอร์และส่งออก SVG แยกสำหรับผลที่เป็นเส้น

แหล่งข้อมูล

1. p5.js loadImage — อธิบายการโหลดภาพด้วย Promise และข้อจำกัดเบราว์เซอร์
2. รุ่น p5.js 2.3.4 — ระบุรุ่นที่ตรึงและสคริปต์ CDN ทางการ
3. p5.js createCanvas — อธิบายการสร้าง Canvas และเลือกตัวเรนเดอร์
4. โค้ดโหลดภาพ p5.js 2.3.4 — แสดงการวาดภาพที่โหลดลง Canvas ภายใน p5.Image
5. MDN fill-rule — อธิบายว่า evenodd กำหนดพื้นที่เติมของเส้นประกอบอย่างไร
6. p5.js image — นิยามตำแหน่งภาพและขนาดปลายทาง
7. p5.js pixelDensity — อธิบายความหนาแน่นพิกเซลสเก็ตช์และค่าเริ่มต้นตามหน้าจอ
8. p5.js saveCanvas — แสดงรูปแบบส่งออกภาพ Canvas มาตรฐาน