Fabric.js SVG आयात: कैनवस पर चित्र संपादन योग्य रखें

Fabric.js में संपादन योग्य SVG आयात करने के लिए loadSVGFromString() या loadSVGFromURL() का इंतज़ार करें, फिर लौटे ऑब्जेक्ट कैनवस में जोड़ें। संपादन वाले हिस्से का संदर्भ रखें, उसका भरण बदलें और canvas.toSVG() से निर्यात करें। चित्र को छवि के रूप में लोड करने का संपादन मॉडल अलग है: वह छवि चुनने से हर रंग क्षेत्र अलग आकार के रूप में नहीं खुलता।

यह अंतर उत्पाद कॉन्फ़िगरेटर, बैज संपादक या रंग बदलने योग्य आइकन में मायने रखता है। ऐसे ऑब्जेक्ट चाहिए जो उपयोगकर्ता के बदलने वाले हिस्सों से मेल खाएँ। .svg पर समाप्त फ़ाइल उस संरचना की गारंटी नहीं देती।

यह कार्यप्रवाह Fabric.js 7.4.0 और छोटे हाथ से बने लैंप का इस्तेमाल करता है। यह तीन आकारों का आयात, रंग बदलाव और निर्यात जाँचता है। यह मौलिक कोड नमूना है, PerfectVector रूपांतरण या हर SVG सुविधा के आयात से निर्यात तक सुरक्षित रहने का दावा नहीं।

लोडर से पहले ऑब्जेक्ट मॉडल चुनें

Fabric.js SVG को अपने कैनवस ऑब्जेक्ट में पार्स करता है। उन्हें Fabric की API से संपादित करते हैं; वे कैनवस के अंदर लाइव SVG DOM एलिमेंट नहीं हैं। वर्तमान loadSVGFromString संदर्भ पार्सिंग परिणाम देने वाला प्रॉमिस और हर स्रोत एलिमेंट तथा उसके बनाए ऑब्जेक्ट को प्राप्त करने वाला रिवाइवर बताता है।

दिखावट से ऑब्जेक्ट संरचना का अनुमान न लगाएँ। दो रंग अलग पाथ में हो सकते हैं, जबकि कई अलग द्वीप एक पाथ का हिस्सा हो सकते हैं। SVG समूह खोलने की मार्गदर्शिका स्रोत फ़ाइल की यह पहचान बताती है।

छोटा आयात, रंग बदलाव और निर्यात उदाहरण चलाएँ

खाली फ़ोल्डर से शुरू करें। निश्चित संस्करण वाली निर्भरता स्थापित करें:

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());

HTML फ़ाइल सीधे खोलने के बजाय फ़ोल्डर HTTP से उपलब्ध करें। जैसे Python स्थापित हो तो python3 -m http.server 8000 चलाएँ और http://localhost:8000 खोलें। Recolor shade पर क्लिक करें, फिर Export SVG पर। बटन निर्यात स्ट्रिंग कैनवस के नीचे रेंडर करता है; फ़ाइल डाउनलोड नहीं करता।

यह प्रदर्शन केवल अपने निश्चित नमूने का निर्यात पूर्वावलोकन में डालता है। उस innerHTML पूर्वावलोकन को अविश्वसनीय SVG के सामान्य अपलोड हैंडलर के रूप में दोबारा इस्तेमाल न करें। उदाहरण में एप्लिकेशन स्तर की त्रुटि संभालना और फ़ाइल सत्यापन भी नहीं हैं।

मैप पार्सिंग के दौरान स्रोत ID पकड़ता है। रंग बदलना उसी स्पष्ट संदर्भ से लैंप के ऊपरी हिस्से तक पहुँचता है; यह नहीं मानता कि पहला लौटाया ऑब्जेक्ट हमेशा इच्छित हिस्सा होगा। उत्पादन संपादक में तय करें कि दस्तावेज़ सहेजने और दोबारा खोलने पर पहचानकर्ता तथा संदर्भ कैसे रखे जाएँगे।

परीक्षण ने क्या दिखाया

हमारा नमूना तीन ऑब्जेक्ट में आयात हुआ: path, rect और path। ऊपरी हिस्से का रंग #e6a23c से #397e86 होने के बाद निर्यात पूर्वावलोकन में नया रंग दिखा, जबकि डंडा और आधार अपना मूल गहरा भरण रखते रहे। निर्यात में दो पाथ, एक आयत और कोई छवि एलिमेंट नहीं था।

ये जाँचें सिद्ध करती हैं कि उदाहरण निर्यात के बाद वेक्टर ज्यामिति रहता है। वे मूल XML, समूह, CSS नियम या दूसरी फ़ाइल की हर सुविधा सुरक्षित रहना सिद्ध नहीं करतीं। मूल फ़ाइल रखें और डिलीवरी प्रति की तुलना उसे प्राप्त करने वाले एप्लिकेशन में करें।

कॉलबैक ट्यूटोरियल को प्रॉमिस API से न मिलाएँ

पुराने उदाहरण अक्सर fabric.loadSVGFromString(svg, callback) कॉल करके कॉलबैक को पूरी ऑब्जेक्ट सूची मिलने की अपेक्षा करते हैं। वर्तमान API में दूसरे आर्ग्युमेंट की भूमिका वह नहीं है: वह हर ऑब्जेक्ट का रिवाइवर है। पूरे संग्रह के लिए पार्सिंग परिणाम का इंतज़ार करें।

Fabric की 6.0 माइग्रेशन मार्गदर्शिका नाम वाले आयात और प्रॉमिस आधारित API में बदलाव समझाती है। पुराना स्निपेट अपनाने से पहले स्थापित पैकेज संस्करण देखें; केवल आयात कथन बदलने से लोडिंग तर्क गलत ही रहता है।

समान ओरिजिन की SVG फ़ाइल के लिए समान शुरुआत:

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

loadSVGFromURL दस्तावेज़ बताता है कि वह SVG फ़ेच करता है और समान ओरिजिन नीति माननी होती है। दूरस्थ होस्ट आपका ओरिजिन अनुमति न दे तो समूह कोड बदलना नेटवर्क असफलता नहीं सुधारेगा। पहले अपने एप्लिकेशन से उपलब्ध फ़ाइल जाँचें, फिर असफल अनुरोध और दूरस्थ सर्वर का CORS कॉन्फ़िगरेशन देखें।

संपादन क्षमता दिखावट से अलग जाँचें

सफल रेंडर एक सवाल का जवाब देता है: क्या कुछ दिखाई दिया? संपादक को और जाँचें चाहिए।

1. बदलने वाला क्षेत्र चुनें। सुनिश्चित करें कि दूसरा हिस्सा साथ नहीं बदलता।
2. उदाहरण की तरह ऑब्जेक्ट के set मेथड से रंग बदलें और रेंडर माँगें।
3. निर्यात करके परिणाम अलग खोलें। Fabric की Canvas.toSVG API कैनवस स्थिति से SVG मार्कअप बनाती है।
4. वास्तविक चित्र की निर्भरताएँ देखें, जैसे स्ट्रोक, क्लिपिंग, ग्रेडिएंट, टेक्स्ट या नेस्टेड रूपांतरण। ऊपर का सरल नमूना वे सुविधाएँ नहीं जाँचता।
5. कार्यप्रवाह पूरा मानने से पहले अपने संपादक में सहेजें, दोबारा खोलें और इच्छित संपादन दोहराएँ।

आयात से छवि ऑब्जेक्ट बने तो स्रोत में एम्बेड रास्टर देखें। SVG के अंदर रास्टर सामग्री की मार्गदर्शिका बताती है कि SVG आवरण पिक्सेल को संपादन योग्य पाथ क्यों नहीं देता। स्रोत में पहले से उपयोगी वेक्टर आकार हों तो फिर ट्रेस करने के बजाय आयात और ऑब्जेक्ट संगठन पर काम करें।

जब रास्टर चित्र को पहले रूपांतरण चाहिए

केवल सपाट PNG या JPG स्रोत हो और उपयोगकर्ता को रंग क्षेत्रों का संपादन चाहिए तो PerfectVector का छवि से वेक्टर कार्यप्रवाह जाँच के लिए प्रारंभिक SVG तैयार करने में मदद कर सकता है। परिणाम की मूल से तुलना करें, पाथ देखें और Fabric.js में आयात से पहले जाँचें कि ज़रूरी क्षेत्र स्वतंत्र रूप से संपादन योग्य हैं या नहीं।

ट्रेसिंग लैंप के ऊपरी भाग, डंडे या आधार जैसा एप्लिकेशन विशेष अर्थ नहीं देती। हमारे नमूने के नाम सोच-समझकर लिखे गए थे। रूपांतरित ज्यामिति देखने के बाद हिस्सों की अपनी मैपिंग और संपादन नियम जोड़ें। पुनः इस्तेमाल आइकन सेट के लिए PNG से SVG UI किट कार्यप्रवाह स्रोत तैयारी और एकरूपता जाँच बताता है।

फ़ोटो को फ़ोटो ही रहना हो तो रास्टर रखें। उपयुक्त मूल SVG में पहले से ज़रूरी आकार हों तो उसे रखें। वेक्टराइज़ेशन परिचय तय करने में मदद कर सकता है कि कार्यप्रवाह में ट्रेसिंग चाहिए भी या नहीं।

अक्सर पूछे जाने वाले प्रश्न

क्या Fabric.js SVG को संपादन योग्य पाथ में आयात करता है? वह समर्थित SVG सामग्री Fabric ऑब्जेक्ट में पार्स कर सकता है। संपादन क्षमता स्रोत संरचना पर निर्भर है: पाथ, आकार समूह और एम्बेड रास्टर समान संपादन विकल्प नहीं देते। लौटे ऑब्जेक्ट देखें और अपना ज़रूरी बदलाव जाँचें।

पुराना loadSVGFromString उदाहरण क्यों असफल होता है? पुराने ट्यूटोरियल दूसरे आर्ग्युमेंट के रूप में पार्सिंग पूरी होने पर चलने वाले कॉलबैक की अपेक्षा कर सकते हैं। वर्तमान API प्रॉमिस लौटाती है और उस आर्ग्युमेंट को प्रति ऑब्जेक्ट रिवाइवर मानती है। कोड स्थापित संस्करण से मिलाएँ और पार्सिंग परिणाम का इंतज़ार करें।

क्या toSVG मूल फ़ाइल बिल्कुल सुरक्षित रखता है? समान स्रोत दस्तावेज़ की अपेक्षा न करें। वह Fabric कैनवस स्थिति से SVG बनाता है। मूल फ़ाइल सुरक्षित रखें और निर्यात दिखावट तथा प्राप्त करने वाले कार्यप्रवाह की ज़रूरी संरचनाएँ जाँचें।

क्या PNG आयात करने से उसके अलग क्षेत्र संपादन योग्य बनते हैं? PNG लगाना उसे अलग वेक्टर क्षेत्रों में ट्रेस नहीं करता। वे संपादन ज़रूरी हों तो पहले उपयुक्त वेक्टर ज्यामिति बनाएँ, परिणामी हिस्से देखें और एप्लिकेशन में उनकी भूमिका परिभाषित करें।

स्रोत

1. Fabric.js — loadSVGFromString — प्रॉमिस का लौटाया मान और स्रोत एलिमेंट/ऑब्जेक्ट रिवाइवर अनुबंध।
2. Fabric.js — Fabric.js 6.0 पर अपग्रेड — नाम वाले आयात और कॉलबैक से प्रॉमिस में माइग्रेशन।
3. Fabric.js — loadSVGFromURL — URL पार्सिंग और समान ओरिजिन फ़ेच सीमाएँ।
4. Fabric.js — Canvas API — कैनवस स्थिति को SVG मार्कअप में निर्यात करना।

रास्टर चित्र से संपादन योग्य ज्यामिति गायब हो तो PerfectVector से जाँच के लिए प्रारंभिक SVG बनाएँ। पहले आकार जाँचें, फिर सिद्ध करें कि Fabric.js संपादक इच्छित हिस्से का रंग बदल सकता है और परिणाम सही निर्यात करता है।