นำเข้า SVG ใน Fabric.js: เก็บงานภาพให้แก้ไขได้บน Canvas

หากต้องการนำเข้า SVG ที่แก้ไขได้ใน Fabric.js ให้รอ loadSVGFromString() หรือ loadSVGFromURL() แล้วเพิ่มวัตถุที่คืนมาลง canvas เก็บการอ้างอิงส่วนที่จะแก้ เปลี่ยนสีเติม และส่งออกด้วย canvas.toSVG() การโหลดงานเป็นภาพให้โมเดลแก้ไขต่างกัน: การเลือกภาพนั้นไม่เปิดให้แต่ละพื้นที่สีเป็นรูปทรงแยก

ความต่างนี้สำคัญสำหรับเครื่องมือปรับแต่งสินค้า โปรแกรมแก้ตรา หรือไอคอนที่เปลี่ยนสีได้ คุณต้องการวัตถุที่ตรงกับชิ้นที่ผู้ใช้เปลี่ยนได้ ไฟล์ลงท้าย .svg ไม่รับประกันโครงสร้างนั้น

คู่มือนี้ใช้ Fabric.js 7.4.0 และโคมไฟเล็กที่เขียนเอง ทดสอบสามรูปทรงผ่านการนำเข้า เปลี่ยนสี และส่งออก เป็นตัวอย่างโค้ดที่สร้างขึ้น ไม่ใช่ผลแปลง PerfectVector หรือการอ้างว่าทุกฟีเจอร์ SVG ผ่านกระบวนการเดียวกันได้

เลือกโมเดลวัตถุก่อนตัวโหลด

Fabric.js แยกวิเคราะห์ SVG เป็นวัตถุ canvas ของตัวเอง คุณแก้วัตถุผ่าน API ของ Fabric ไม่ใช่องค์ประกอบ DOM ของ SVG ที่ทำงานสดภายใน canvas เอกสารอ้างอิง loadSVGFromString ปัจจุบัน อธิบาย promise ที่ให้ผลแยกวิเคราะห์และ reviver ที่รับแต่ละองค์ประกอบต้นทางกับวัตถุที่สร้าง

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

รันตัวอย่างนำเข้า เปลี่ยนสี และส่งออกเล็ก

เริ่มในโฟลเดอร์ว่าง ติดตั้ง dependency ที่ล็อกเวอร์ชัน:

npm install --save-exact fabric@7.4.0

บันทึกเป็น index.html:

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>Fabric SVG import test</title>
<canvas id="editor" width="320" height="240"></canvas>
<button id="recolor">Recolor shade</button>
<button id="export">Export SVG</button>
<div id="output"></div>
<pre id="report"></pre>
<script type="module" src="main.js"></script>
</html>

บันทึกเป็น main.js พาธโมดูลสัมพัทธ์ให้ตัวอย่างเล็กนี้รันโดยไม่มีตัวรวมบันเดิล ในแอปที่รวมบันเดิล นำเข้าชื่อเดียวกันจาก fabric

import { Canvas, loadSVGFromString } from './node_modules/fabric/dist/index.min.mjs';
const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="320" height="240" viewBox="0 0 320 240">
  <path id="shade" fill="#e6a23c" d="M115 40 H205 L230 135 H90 Z"/>
  <rect id="stem" x="151" y="135" width="18" height="57" fill="#214c54"/>
  <path id="base" fill="#214c54" d="M110 192 H210 L220 210 H100 Z"/>
</svg>`;
const canvas = new Canvas('editor', { width: 320, height: 240 });
const parts = new Map();
const parsed = await loadSVGFromString(svg, (element, object) => {
  const id = element.getAttribute('id');
  if (id) parts.set(id, object);
});
canvas.add(...parsed.objects.filter(Boolean));
canvas.requestRenderAll();
function report(exported) {
  const xml = new DOMParser().parseFromString(exported, 'image/svg+xml');
  const data = {
    version: '7.4.0',
    importedObjects: canvas.getObjects().length,
    types: canvas.getObjects().map(object => object.type),
    shadeFill: parts.get('shade').fill,
    exportedPaths: xml.querySelectorAll('path').length,
    exportedRects: xml.querySelectorAll('rect').length,
    exportedImages: xml.querySelectorAll('image').length,
  };
  document.querySelector('#report').textContent = JSON.stringify(data, null, 2);
  document.querySelector('#output').innerHTML = exported;
}
document.querySelector('#recolor').onclick = () => {
  parts.get('shade').set('fill', '#397e86');
  canvas.requestRenderAll();
  document.querySelector('#report').textContent = 'Shade recolored. Export to check delivery SVG.';
};
document.querySelector('#export').onclick = () => report(canvas.toSVG());
report(canvas.toSVG());

ให้บริการโฟลเดอร์ผ่าน HTTP แทนเปิด HTML โดยตรง เช่น หากติดตั้ง Python ให้รัน python3 -m http.server 8000 แล้วเปิด http://localhost:8000 คลิก Recolor shade แล้ว Export SVG ปุ่มเรนเดอร์สตริงส่งออกใต้ canvas ไม่ได้ดาวน์โหลดไฟล์

การสาธิตแทรกเฉพาะผลส่งออกจากตัวอย่างคงที่ของตัวเองในพรีวิว อย่านำพรีวิว innerHTML นี้มาเป็นตัวจัดการอัปโหลดทั่วไปสำหรับ SVG ที่ไม่เชื่อถือ ตัวอย่างยังละการจัดการข้อผิดพลาดระดับแอปและการตรวจไฟล์

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

ผลที่การทดสอบแสดง

ตัวอย่างนำเข้าเป็นสามวัตถุ: path, rect และ path หลัง shade เปลี่ยนจาก #e6a23c เป็น #397e86 พรีวิวส่งออกแสดงส่วนโคมสีใหม่ ขณะที่ก้านกับฐานคงสีเข้มเดิม ผลส่งออกมีสองพาธ หนึ่งสี่เหลี่ยม และไม่มีองค์ประกอบ image

การตรวจเหล่านั้นยืนยันว่าตัวอย่างยังเป็นรูปทรงเวกเตอร์หลังส่งออก ไม่ได้ยืนยันการรักษา XML เดิม การจัดกลุ่ม กฎ CSS หรือทุกฟีเจอร์ของไฟล์อื่น เก็บไฟล์หลักต้นฉบับและเปรียบเทียบสำเนาส่งมอบในแอปที่จะรับ

อย่าผสมบทเรียน callback กับ API promise

ตัวอย่างเก่ามักเรียก fabric.loadSVGFromString(svg, callback) และคาดให้ callback รับอาร์เรย์วัตถุทั้งหมด นั่นไม่ใช่หน้าที่อาร์กิวเมนต์ที่สองใน API ปัจจุบัน: มันเป็น reviver ต่อวัตถุ รอผลแยกวิเคราะห์เพื่อรับชุดทั้งหมด

คู่มือย้ายสู่ 6.0 ของ Fabric อธิบายการเปลี่ยนเป็น named imports และ API promise ตรวจเวอร์ชันติดตั้งก่อนปรับตัวอย่างเก่า การแทนเฉพาะคำสั่ง import ยังทำให้ตรรกะโหลดผิด

สำหรับไฟล์ SVG จาก origin เดียวกัน จุดเริ่มต้นเทียบเท่าคือ:

import { loadSVGFromURL } from 'fabric';
const parsed = await loadSVGFromURL('/artwork.svg');
canvas.add(...parsed.objects.filter(Boolean));
canvas.requestRenderAll();

เอกสาร loadSVGFromURL ระบุว่าดึง SVG และต้องทำตามนโยบาย same-origin หากโฮสต์ระยะไกลไม่อนุญาต origin ของคุณ การเปลี่ยนโค้ดจัดกลุ่มไม่แก้เครือข่ายล้มเหลว ทดสอบไฟล์ที่แอปคุณให้บริการก่อน แล้วตรวจคำขอล้มเหลวกับการตั้งค่า CORS เซิร์ฟเวอร์ระยะไกล

ตรวจการแก้ได้แยกจากรูปลักษณ์

เรนเดอร์สำเร็จตอบหนึ่งคำถาม: มีอะไรปรากฏไหม? โปรแกรมแก้ไขต้องตรวจเพิ่ม

1. เลือกพื้นที่ที่ควรเปลี่ยน ยืนยันว่าส่วนอื่นไม่เปลี่ยนตาม
2. เปลี่ยนสีผ่านเมธอด set ของวัตถุและขอเรนเดอร์เหมือนตัวอย่าง
3. ส่งออกและเปิดผลแยก API Canvas.toSVG ของ Fabric สร้างมาร์กอัป SVG จากสถานะ canvas
4. ตรวจสิ่งที่งานจริงพึ่ง เช่นเส้นขอบ การตัดภาพ ไล่สี ข้อความ หรือการแปลงซ้อน ตัวอย่างเรียบง่ายด้านบนไม่ทดสอบฟีเจอร์เหล่านั้น
5. บันทึก เปิดใหม่ และทำการแก้ที่ตั้งใจซ้ำในโปรแกรมของคุณก่อนถือว่ากระบวนการครบ

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

เมื่องานราสเตอร์ต้องแปลงก่อน

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

การลากพาธไม่กำหนดความหมายเฉพาะแอป เช่น shade, stem หรือ base ชื่อในตัวอย่างเราเขียนอย่างตั้งใจ เพิ่มการจับคู่ส่วนและกฎแก้ของคุณหลังตรวจรูปทรงที่แปลง สำหรับชุดไอคอนใช้ซ้ำ กระบวนการ PNG เป็น SVG สำหรับ UI kit ครอบคลุมการเตรียมต้นทางและความสอดคล้อง

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

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

Fabric.js นำเข้า SVG เป็นพาธที่แก้ได้ไหม? มันแยกวิเคราะห์เนื้อหา SVG ที่รองรับเป็นวัตถุ Fabric ได้ การแก้ได้ขึ้นกับโครงสร้างต้นฉบับ: พาธ กลุ่มรูปทรง และราสเตอร์ฝังให้ตัวเลือกไม่เหมือนกัน ตรวจวัตถุที่คืนและทดสอบการเปลี่ยนเฉพาะที่ต้องการ

ทำไมตัวอย่าง loadSVGFromString เก่าล้มเหลว? บทเรียนเก่าอาจคาด callback เมื่อเสร็จเป็นอาร์กิวเมนต์ที่สอง API ปัจจุบันคืน promise และใช้อาร์กิวเมนต์นั้นเป็น reviver ต่อวัตถุ ให้โค้ดตรงเวอร์ชันติดตั้งและรอผลแยกวิเคราะห์

toSVG รักษาไฟล์เดิมเหมือนกันทุกอย่างไหม? อย่าคาดเอกสารต้นทางเหมือนเดิม มันสร้าง SVG จากสถานะ canvas ของ Fabric เก็บไฟล์หลักเดิมและตรวจรูปลักษณ์ส่งออกกับโครงสร้างที่กระบวนการรับต้องใช้

นำเข้า PNG แล้วแต่ละพื้นที่แก้ได้ไหม? การวาง PNG ไม่ลากเป็นพื้นที่เวกเตอร์แยก หากจำเป็นต้องแก้เหล่านั้น เตรียมรูปทรงเวกเตอร์ที่เหมาะก่อน ตรวจส่วนที่ได้ และกำหนดบทบาทในแอป

แหล่งอ้างอิง

1. Fabric.js — loadSVGFromString — ค่าคืน promise และสัญญา reviver ขององค์ประกอบต้นทาง/วัตถุ
2. Fabric.js — อัปเกรดเป็น Fabric.js 6.0 — Named imports และการย้ายจาก callback เป็น promise
3. Fabric.js — loadSVGFromURL — การแยกวิเคราะห์ URL และข้อจำกัด fetch same-origin
4. Fabric.js — Canvas API — การส่งสถานะ canvas เป็นมาร์กอัป SVG

หากส่วนที่ขาดคือรูปทรงแก้ได้จากราสเตอร์ ให้ เตรียม SVG สำหรับประเมินด้วย PerfectVector ตรวจรูปทรงก่อน แล้วพิสูจน์ว่าโปรแกรม Fabric.js เปลี่ยนสีส่วนที่ตั้งใจและส่งออกผลถูกต้องได้