CopyLoad-Extension/convert_icons.html at main · anhhackta/CopyLoad-Extension · GitHub

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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html>
<html>
<head>
    <title>Convert SVG to PNG</title>
</head>
<body>
    <canvas id="canvas16" width="16" height="16"></canvas>
    <canvas id="canvas48" width="48" height="48"></canvas>
    <canvas id="canvas128" width="128" height="128"></canvas>

    <script>
        const svgContent = `<svg width="128" height="128" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" />
    </linearGradient>
  </defs>

  <!-- Background circle -->
  <circle cx="64" cy="64" r="60" fill="url(#grad1)" stroke="#fff" stroke-width="4"/>

  <!-- Clipboard icon -->
  <g transform="translate(32, 28)">
    <!-- Main clipboard -->
    <rect x="8" y="8" width="48" height="64" rx="4" fill="#fff" stroke="#333" stroke-width="2"/>

    <!-- Clipboard top -->
    <rect x="16" y="4" width="32" height="8" rx="2" fill="#fff" stroke="#333" stroke-width="2"/>

    <!-- Lines representing text -->
    <rect x="16" y="20" width="32" height="2" fill="#667eea" rx="1"/>
    <rect x="16" y="26" width="28" height="2" fill="#667eea" rx="1"/>
    <rect x="16" y="32" width="32" height="2" fill="#667eea" rx="1"/>
    <rect x="16" y="38" width="24" height="2" fill="#667eea" rx="1"/>
    <rect x="16" y="44" width="32" height="2" fill="#667eea" rx="1"/>
    <rect x="16" y="50" width="28" height="2" fill="#667eea" rx="1"/>
    <rect x="16" y="56" width="32" height="2" fill="#667eea" rx="1"/>
    <rect x="16" y="62" width="20" height="2" fill="#667eea" rx="1"/>
  </g>

  <!-- Copy symbol -->
  <g transform="translate(72, 48)">
    <rect x="4" y="4" width="32" height="40" rx="3" fill="#fff" stroke="#333" stroke-width="2" opacity="0.8"/>
    <rect x="8" y="8" width="24" height="32" rx="2" fill="#667eea" opacity="0.3"/>
  </g>
</svg>`;

        function convertToPNG(canvasId, size) {
            const canvas = document.getElementById(canvasId);
            const ctx = canvas.getContext('2d');

            // Create image from SVG
            const img = new Image();
            const svgBlob = new Blob([svgContent], {type: 'image/svg+xml'});
            const url = URL.createObjectURL(svgBlob);

            img.onload = function() {
                // Clear canvas
                ctx.clearRect(0, 0, size, size);

                // Draw SVG to canvas
                ctx.drawImage(img, 0, 0, size, size);

                // Convert to PNG
                canvas.toBlob(function(blob) {
                    const link = document.createElement('a');
                    link.download = `icon${size}.png`;
                    link.href = URL.createObjectURL(blob);
                    link.click();
                }, 'image/png');
            };

            img.src = url;
        }

        // Convert to different sizes
        setTimeout(() => convertToPNG('canvas16', 16), 100);
        setTimeout(() => convertToPNG('canvas48', 48), 200);
        setTimeout(() => convertToPNG('canvas128', 128), 300);
    </script>
</body>
</html>