Outrageous build packs

I have read a lot of relevant technical articles. Most of them are implemented with html2Canvas.js and canvas.js third-party packages, and some of them are implemented with larger build packages like D3.js, but the functions actually used are less than 1% of them, which is outrageous.

Comprehensive article conversion process design ideas, their own work, 10 lines of code to fix!

Design ideas

SVG goes from Canvas to Base64

First: understand canvas to Base64
 const canvas = document.getElementById('myCanvas');
 const ImgBase64 = canvas.toDataURL('image/png');
Copy the code

data:image/png; base64,xxx… [Format: XXX.png]

Two: learn about Base64 images from SVG to.SVG format
  const svg = document.getElementById('mySvg');
  const s = new XMLSerializer().serializeToString(svg);
  const ImgBase64 = `data:image/svg+xml; base64,The ${window.btoa(s)}`;
Copy the code

data:image/svg+xml; base64,xxx… [Format: xxx.svg]

So that’s the end of the demand. But you also want to convert SVG to PNG base64.

Three: Mash [one] [two] up
  1. Convert SVG to base64 in.svg format
  2. Create an image container to store
  3. Create a Canvas container to hold ②
  4. Convert ③ to base64 in.png format
     // ↓ Part 1
     const svg = document.getElementById('mySvg');
     const s = new XMLSerializer().serializeToString(svg);
     const src = `data:image/svg+xml; base64,The ${window.btoa(s)}`;
     // ↓ Create an image container and store it
     const img = new Image(); // Create the image container to hold the transition
     img.src = src;
     // Note: this needs to be done in the image onload method
     img.onload = (a)= > {
       // ↓ Part 2
       const canvas = document.createElement('canvas');
       canvas.width = img.width;
       canvas.height = img.height;
       const context = canvas.getContext('2d');
       context.drawImage(img, 0.0);
       const ImgBase64 = canvas.toDataURL('image/png');
     }
Copy the code

data:image/png; base64,xxx… [Format: XXX.png]

conclusion

It’s simple! Native API 11 lines of code done!

Do you think I should submit a package on Node?

Oh, hahaha

Post a full version

<body>
  <div>
    <p>Create using SVG</p>
    <svg id="mySvg" width="200" height="200">
      <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(0, 255, 255); stroke-width: 5;" />
      <line x1="0" y1="200" x2="200" y2="0" style="stroke:rgb(255, 0, 255); stroke-width: 5;" />
    </svg>
  </div>
  <p></p>
  <div>
    <p>Create using canvas</p>
    <canvas id="myCanvas" width="200" height="200">Your browser does not support Canvas!</canvas>
  </div>
  <p></p>
  <div>
    <button onClick="canvasBase64()">Canvas turn Base64</button>
    <button onClick="svgBase64()">Turn the Svg Base64</button>
    <button onClick="svgPng()">Svg to PNG</button>
  </div>
  <p></p>
  <div>
    <img id="myImg" src="xxx" />
    <p>Right click save to see the format</p>
  </div>
  <script>
    {
      /** note order: 1, create; 2. Set properties. 3. Render **/
      let can = document.getElementById('myCanvas'); // Get canvas container
      let ctx = can.getContext('2d'); // Create a canvas
      let canWid = can.width; // Canvas width
      let canHei = can.height; // Canvas height

      ctx.beginPath(); // Start a path
      ctx.rect(0.0.100.100); // Create rectangle: rect(x, y, w, h)
      ctx.fillStyle = '#0000ff'; // Fill the canvas with color
      ctx.fill(); / / solid

      ctx.beginPath(); // Start a path
      ctx.rect(125.25.50.50); // Create rectangle: rect(x, y, w, h)
      ctx.fillStyle = '# 000000'; // Fill the canvas with color
      ctx.fill(); / / solid

      ctx.beginPath(); // Start a path
      ctx.arc(50.150.25.0.2 * Math.PI); // Create circle: rect(x, y, radius, start Angle, end Angle, drawing order [optional, false straight, true inverse])
      ctx.fillStyle = '#00ff00'; // Fill the canvas with color
      ctx.fill(); / / solid

      ctx.beginPath() // Start a path
      ctx.rect(100.100.100.100); // Create rectangle: rect(x, y, w, h)
      ctx.fillStyle = '#ff0000'; // Fill the canvas with color
      ctx.fill(); // Solid render
    }
    {
      const myImg = document.getElementById('myImg'); / / for Img
      // #### Canvas to Base64
      function canvasBase64() {
        const canvas = document.getElementById('myCanvas');
        const ImgBase64 = canvas.toDataURL('image/png');
        console.log(ImgBase64, 'turn Canvas Base64');
        myImg.src = ImgBase64;
      }
      // #### Svg to Base64
      function svgBase64() {
        const svg = document.getElementById('mySvg');
        const s = new XMLSerializer().serializeToString(svg);
        const ImgBase64 = `data:image/svg+xml; base64,The ${window.btoa(s)}`;
        console.log(ImgBase64, 'turn Svg Base64');
        myImg.src = ImgBase64;
      }
      // #### Svg to PNG
      function svgPng() {
        const svg = document.getElementById('mySvg');
        const s = new XMLSerializer().serializeToString(svg);
        const src = `data:image/svg+xml; base64,The ${window.btoa(s)}`;
        const img = new Image(); // Create the image container to hold the transition
        img.src = src;
        img.onload = (a)= > {
          // Go to Base64 after the image is created
          const canvas = document.createElement('canvas');
          canvas.width = img.width;
          canvas.height = img.height;
          const context = canvas.getContext('2d');
          context.drawImage(img, 0.0);
          const ImgBase64 = canvas.toDataURL('image/png');
          console.log(ImgBase64, 'turn Svg PNG'); myImg.src = ImgBase64; }}}</script>
</body>
Copy the code