@adan
To export JPG from multiple canvas, you can follow these steps:
Here is an example code snippet to export JPG from multiple canvas:
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 |
<!DOCTYPE html> <html> <head> <title>Export JPG from Multiple Canvas</title> </head> <body> <canvas id="canvas1" width="200" height="200"></canvas> <canvas id="canvas2" width="200" height="200"></canvas> <canvas id="finalCanvas" width="400" height="200"></canvas> <script> // Get the canvas elements const canvas1 = document.getElementById('canvas1'); const canvas2 = document.getElementById('canvas2'); const finalCanvas = document.getElementById('finalCanvas'); const ctx = finalCanvas.getContext('2d'); // Draw on canvas1 const ctx1 = canvas1.getContext('2d'); ctx1.fillStyle = 'red'; ctx1.fillRect(0, 0, 200, 200); // Draw on canvas2 const ctx2 = canvas2.getContext('2d'); ctx2.fillStyle = 'blue'; ctx2.fillRect(0, 0, 200, 200); // Merge canvas1 and canvas2 into finalCanvas ctx.drawImage(canvas1, 0, 0); ctx.drawImage(canvas2, 200, 0); // Convert finalCanvas to data URL const dataURL = finalCanvas.toDataURL('image/jpeg'); // Create Image element const img = new Image(); img.src = dataURL; // Draw the Image on the finalCanvas img.onload = function() { ctx.drawImage(img, 0, 0); } // Convert finalCanvas to data URL const finalDataURL = finalCanvas.toDataURL('image/jpeg'); // Trigger download of the JPG file const link = document.createElement('a'); link.download = 'final_image.jpg'; link.href = finalDataURL; link.click(); </script> </body> </html> |
This code will create two canvas elements, draw on each canvas element, merge them into a single canvas element, and export the final image as a JPG file.