How to export jpg from multiple canvas?
1 answer
by
aniya.jaskolski ,
a month ago
@adan
To export JPG from multiple canvas, you can follow these steps:
- Create multiple canvas elements in your HTML file.
- Use JavaScript to draw on each canvas element with the desired content.
- Merge the content of all canvas elements into a single canvas element using the drawImage() method.
- Convert the merged canvas element into a data URL using the toDataURL() method.
- Create a new Image element and set its src attribute to the data URL.
- Create a new canvas element with the desired dimensions and draw the Image on it using the drawImage() method.
- Use the toDataURL() method on the new canvas element to get the data URL of the final image.
- Use the download attribute to trigger the download of the JPG file.
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.