How to export jpg from multiple canvas?

Member

by adan , in category: Javascript , 4 months ago

How to export jpg from multiple canvas?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

by aniya.jaskolski , 4 months ago

@adan 

To export JPG from multiple canvas, you can follow these steps:

  1. Create multiple canvas elements in your HTML file.
  2. Use JavaScript to draw on each canvas element with the desired content.
  3. Merge the content of all canvas elements into a single canvas element using the drawImage() method.
  4. Convert the merged canvas element into a data URL using the toDataURL() method.
  5. Create a new Image element and set its src attribute to the data URL.
  6. Create a new canvas element with the desired dimensions and draw the Image on it using the drawImage() method.
  7. Use the toDataURL() method on the new canvas element to get the data URL of the final image.
  8. 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.