Canvas i Graphics w React

Co to jest Konva.js i jak używać react-konva?

Konva.js: 2D Canvas library. Wysokopoziomowe API nad Canvas. Sceny, layers, groups, shapes. Hit detection. Drag and drop. Transformations (rotate, scale, skew). Animacje. react-konva: React bindings dla Konva.js. Deklaratywne JSX. Instalacja: npm install konva react-konva. Stage — Canvas element. Layer — warstwa rysowania. Group — grupowanie shapes. Shapes: Rect, Circle, Ellipse, Wedge, Line, Arrow, Star, Polygon, RegularPolygon. Text — tekst. Image — obrazy. Path — SVG path. Custom Shape. Podstawy: Stage width={600} height={400}. Layer. Rect x={0} y={0} width={100} height={100} fill='blue'. Circle x={300} y={200} radius={50} fill='red'. Events: onClick, onMouseEnter, onMouseLeave, onDragStart, onDragEnd. Drag and drop: draggable prop na Shape. Transformations: Transformer component — resize/rotate handle. useRef na shape. Transformer nodes={[shapeRef.current]}. Animacja: Tween — GSAP-like. Anim — rAF-based. react-spring z Konva przez ref updates. Eksport: stage.toDataURL() — base64 PNG. stage.toBlob() — Blob. Konva.Image.fromURL() — load image. Filter: filter={[Konva.Filters.Blur]}. blurRadius. brightness, contrast, grayscale. Hit canvas: Konva tworzy osobny canvas dla hit detection. Wydajność: wiele shapes. Wirtualna selekcja. shouldCacheOnUpdate prop. Stage w Next.js: dynamic import ze ssr: false. Canvas API nie istnieje na serwerze.

Fabric.js — canvas editor dla aplikacji webowych?

Fabric.js: Canvas library z bogatym API. Object model na Canvas. Popularna dla graficznych edytorów. Podpisywanie dokumentów. Image editing. Wersja 6 (2024): ES modules. TypeScript rewrite. Instalacja: npm install fabric. import {Canvas, Rect, Circle, FabricImage} from 'fabric'. const canvas = new Canvas('c'). canvas.add(new Rect({width: 100, height: 100, fill: 'red', top: 10, left: 10})). React wrapper: fabric-react lub manual ref. Obiekty: FabricObject — base. Rect, Circle, Ellipse, Line, Triangle. Path (SVG path). Polygon, Polyline. Text, IText (editable), Textbox. FabricImage (bitmap). Group. Selection: canvas.getActiveObject(). Wielokrotna selekcja. Selection events. Transformacje: rotate, scale, skew, flipX, flipY. Animacja: object.animate('left', 200, {duration: 1000, onChange: canvas.renderAll.bind(canvas)}). Eksport: canvas.toDataURL(). canvas.toJSON() — serializacja. canvas.loadFromJSON(json) — deserialization. canvas.toSVG(). Free drawing: canvas.isDrawingMode = true. canvas.freeDrawingBrush. width, color, shadow. Pattern brush, Pencil brush, Circle brush. Konva vs Fabric: Konva — React-native, scenes. Fabric — object model, richer features. Konva — szybszy dla many objects. Fabric — lepszy dla document editing. Kiedy Fabric: image editor, annotation tool, whiteboard, diagram editor. Kiedy Konva: gry, animacje, generative art, performance critical.

html2canvas i dom-to-image — screenshot elementów?

html2canvas: screenshot DOM element jako Canvas. Rerender DOM przez CSS parsing. Nie przeglądarka screenshot — własny renderer. Ograniczenia: brak pełnego CSS support. Cross-origin images blokowane. Niektóre style ignorowane. Instalacja: npm install html2canvas. html2canvas(document.getElementById('myDiv')).then(canvas => {document.body.appendChild(canvas)}). Options: scale: 2 (retina). useCORS: true (cross-origin images). allowTaint: false. windowWidth/Height. Next.js: await html2canvas(ref.current, {scale: 2}). canvas.toBlob(blob => saveAs(blob, 'screenshot.png')). dom-to-image-more: alternatywa html2canvas. Używa SVG foreignObject. Lepsza pełność CSS. import domtoimage from 'dom-to-image-more'. domtoimage.toPng(node).then(dataUrl => img.src = dataUrl). dom-to-image: starsza wersja. Chromium API (Puppeteer/Playwright): prawdziwy screenshot. Doskonała jakość. Server-side. Puppeteer: const browser = await puppeteer.launch(). const page = await browser.newPage(). await page.goto(url). await page.screenshot({path: 'screenshot.png', fullPage: true}). Playwright screenshot: zamiast Puppeteer. W Next.js API route lub server action. Edge runtime: Playwright nie obsługiwane. Satori (Vercel): HTML -> SVG na Edge. Używany przez og-image generators. Brak pełnego HTML — tylko ograniczone JSX. @vercel/og: OG image generation na Edge. ImageResponse. JSX -> PNG. Idealny dla Social Share Images. Ogimage.org — alternatywa Satori. Używają obie: Satori do SVG, resvg-js do PNG.

QR Code i Barcode w React — generowanie i skanowanie?

QR Code generowanie: qrcode.react: popularny. QRCodeSVG lub QRCodeCanvas. import {QRCodeSVG} from 'qrcode.react'. QRCodeSVG value='https://fotz.pl' size={256} bgColor='#ffffff' fgColor='#000000'. Poziom korekcji błędów: level: 'L' | 'M' | 'Q' | 'H'. Wyższy = bardziej odporny na uszkodzenia. Mniejszy moduły ale więcej danych. Logo w QR: imageSettings prop. src, height, width, x, y, excavate. react-qr-code: alternatywa, SVG-only. QR stylizowany: qr-code-styling — custom shapes, kolory, logo. qrbtf — piękne dekorowane QR. Barcode generowanie: react-barcode: EAN-13, Code128, QR, i inne. import Barcode from 'react-barcode'. Barcode value='123456789012'. jsbarcode — base library. Typy: Code128, EAN-13, EAN-8, UPC, Code39, ITF, MSI, Pharmacode, Codabar. QR Code skanowanie: @zxing/library: ZXing port do JS. Kamera -> dekoduj QR/barcode. html5-qrcode: uproszczony wrapper. react-qr-reader: React wrapper dla skanera. Używa getUserMedia API. Kamera. Dostęp: HTTPS wymagany. Zezwolenie użytkownika. ZXing w React Native: @zxing/browser dla web. Expo: expo-barcode-scanner. expo-camera z onBarCodeScanned. Use cases: checkout systems. Ticketing. Product catalogs. Menu restauracji. Login z QR (WhatsApp Web). Linki do aplikacji. vCard QR. WiFi QR. PDF417 i DataMatrix: Inne 2D barcodes. pdf417.js, @bwip-js/browser. Logistyka, boarding passes.

PDF Viewer i generowanie PDF w React — react-pdf i pdfmake?

PDF Viewer (wyświetlanie): react-pdf (@react-pdf/renderer i react-pdf/pdfjs-dist): UWAGA — dwa różne pakiety! pdfjs-dist: Mozilla PDF.js — renderer PDF. react-pdf (dla viewer): npm install react-pdf. Document + Page komponenty. Wyświetla istniejące PDF. PDF.js worker: PDF rendering w web worker. Konfiguracja: pdfjs.GlobalWorkerOptions.workerSrc. @react-pdf-viewer/core: zaawansowany viewer. Toolbar, zoom, search. Podstawowe użycie: import {Document, Page} from 'react-pdf'. Document file='/document.pdf'. Page pageNumber={1}. Skalowanie: width lub scale prop. Thumbnail: generatePageThumbnails. PDF generowanie: @react-pdf/renderer: React do PDF. JSX komponenty jak w React. import {Document, Page, Text, View, StyleSheet} from '@react-pdf/renderer'. Komponenty: Document, Page, View, Text, Image, Link, Note, Canvas, Svg. StyleSheet.create — Flexbox. PDF rendering: na serwerze (Node.js). Na kliencie (browser). Eksport: renderToStream(), renderToFile() (Node). renderToBlob() (Browser). pdf(MyDoc).toBlob().then(blob => saveAs(blob, 'doc.pdf')). pdfmake: JSON-based PDF. Nie JSX. Prostszy API. content: [{text: 'Hello'}, {table: {body: [[...]]}}]. Definicja tabel. pdfkit: Node.js PDF generation. Niski poziom. Pełna kontrola. Puppeteer PDF: page.pdf({format: 'A4', printBackground: true}). HTML -> PDF. Perfekta jakość CSS. Server-side. jsPDF: stara, prosta. HTML2canvas + jsPDF dla screenshots -> PDF. FPDF.js: port PHP FPDF. Kiedy react-pdf/renderer: typowe raporty, faktury, dokumenty. Kiedy Puppeteer: kompleksowy HTML -> PDF.

Wyślij zapytanie