Rád pracuji s knihovnou fabric.js. Obsluha canvasu je díky tomu výrazně efektivnější. Narážím přirozeně na řadu úskalí. Tak například zde jsem musel řešit klonování objektů z jednoho canvasu do druhého, což bylo docela komplikované vzhledem k nutnosti zajistit, aby obrázky byly načtené ve správném pořadí. Na canvasu záleží na pořadí objektů, protože jde defacto o vrstvy, kdy jedna může nechtěně překrýt druhou.
Chcete-li zajistit, aby se objekty klonovaly na druhý canvas ve stejném pořadí, v jakém jsou zobrazeny na původním, je třeba upravit strategii klonování. Problémem je asynchronní načítání obrázků, které může narušit pořadí při jejich přidávání na canvas.
Řešením je nejprve naklonovat všechny objekty (včetně obrázků) a poté je přidat do kopie v původním pořadí, jakmile je klonování všech objektů dokončeno. Toho lze dosáhnout sledováním klonovaných objektů a jejich pořadí a jejich přidáním až po naklonování všech objektů.
Když klonujete objekt ve Fabric.js, musí být plně načten, aby proces klonování fungoval správně. Protože se obrázky načítají asynchronně, může se stát, že se funkce klonování spustí dříve, než je obrázek plně načten, což má za následek, že se obrázek na kopii nenachází.
Chcete-li zajistit, aby byl obraz také naklonován, musíte zajistit, aby klonování proběhlo až po úplném načtení obrazu. Jedním ze způsobů, jak to řešit, je spustit proces klonování ve zpětném volání funkce fabric.Image.fromURL, čímž se zajistí, že obrázek bude načten před zahájením klonování. Jedná se o zpětnovazební smyčku callback.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
// Function to clone all objects to exportCanvas, preserving order function cloneToExportCanvas(callback) { let objects = canvas.getObjects(); let cloneMap = new Array(objects.length); // Array to keep track of cloned objects let loadedCount = 0; const addClonesInOrder = () => { // Add clones to exportCanvas in the original order cloneMap.forEach(clonedObj => { if (clonedObj) { exportCanvas.add(clonedObj); } }); // All objects are added in order, now call the callback callback && callback(); }; objects.forEach((obj, index) => { const cloneCallback = clonedObj => { cloneMap[index] = clonedObj; // Store the cloned object at the correct index loadedCount++; if (loadedCount === objects.length) { addClonesInOrder(); } }; if (obj.type === 'image') { // Re-load the image and clone fabric.Image.fromURL(obj.getSrc(), clonedImg => { clonedImg.set({ left: obj.left, top: obj.top, scaleX: obj.scaleX, scaleY: obj.scaleY, angle: obj.angle, opacity: obj.opacity }); cloneCallback(clonedImg); }, { crossOrigin: 'anonymous' }); } else { // For non-image objects, clone as usual obj.clone(cloneCallback); } }); } // Function to export exportCanvas as PNG function exportExportCanvasAsPNG() { cloneToExportCanvas(() => { var dataURL = exportCanvas.toDataURL({ format: 'png', quality: 1 }); var link = document.createElement('a'); link.href = dataURL; link.download = 'exported-canvas.png'; document.body.appendChild(link); link.click(); document.body.removeChild(link); exportCanvas.clear(); // Optional: Clear exportCanvas after export }); } // Add click event listener to the export button document.getElementById('exportButton').addEventListener('click', exportExportCanvasAsPNG); |
Funkce cloneToExportCanvas obsahuje logiku pro asynchronní načítání obrázků. Zajišťuje, aby se každý obrázek před klonováním znovu a plně načetl.
Čítač (loadedCount) sleduje, kolik objektů bylo úspěšně naklonováno. Jakmile jsou všechny objekty (včetně obrázků) naklonovány, je zavolána funkce zpětného volání (callback()). Toto zpětné volání pak může zpracovat export.
V exportExportCanvasAsPNG nyní export probíhá uvnitř zpětného volání funkce cloneToExportCanvas, což zajišťuje, že všechny objekty včetně obrázků jsou naklonovány před exportem.
Tento přístup zajistil, že všechny objekty, včetně asynchronně načtených obrázků, jsou na exportCanvas přítomny dříve, než dojde k exportu do PNG. Problém vyřešen.