Use html2canvas in vite to convert img, svg and div to canvas

Table of contents

div to canvas

svg to canvas

 img to canvas

---

div to canvas

Use the html2canvas plug-in, its official website: html2canvas - Screenshots with JavaScript http://html2canvas.hertzen.com/

 Install html2canvas:

npm i -S html2canvas

 Introduce:

import html2canvas from "html2canvas";

test:

<template>
  <div>
    <div
      ref="ref_capture"
      style="padding: 10px; background: #f5da55; width: 150px"
    >
      <h4 style="color: #000">Hello world!</h4>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { nextTick, ref } from "vue";
import html2canvas from "html2canvas";

const ref_capture = ref();

nextTick(() => {
  html2canvas(ref_capture.value).then((canvas) => {
    console.log("canvas:", canvas);
    let url = canvas.toDataURL();
    console.log("url:", url);
  });
});
</script>

 Renderings:

Note: If the dom is created by  let dom_temp = document.createElement('div');,  you must add document.body.appendChild(dom_temp) before using it , and then delete the dom after generating the url, that is, document.body. removeChild(dom_temp) ;

Additionally, properties can be configured: Options | html2canvas Explore the different configuration options available for html2canvas http://html2canvas.hertzen.com/configuration

 

svg to canvas

Note: You need to wrap a layer of div outside the svg to get the dom of the svg, you can't use ref directly on the svg 

<template>
  <div>
    <div ref="ref_svg" style="width: 50px">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 261.76 226.69"
        xmlns:v="https://vecta.io/nano"
        width="50px"
        height="50px"
        style="display: block"
      >
        <path
          d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z"
          fill="#41b883"
        />
        <path
          d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z"
          fill="#34495e"
        />
      </svg>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { nextTick, ref } from "vue";
import html2canvas from "html2canvas";

const ref_svg = ref();

nextTick(() => {
  html2canvas(ref_svg.value).then((canvas) => {
    console.log("canvas:", canvas);
    let url = canvas.toDataURL();
    console.log("url:", url);
  });
});
</script>

 img to canvas

Method 1:

<template>
  <div>
    <img src="/favicon.ico" height="32" width="32" />
  </div>
</template>
<script lang="ts" setup>
import { nextTick, ref } from "vue";

const imageToCanvas = (image) => {
  var canvas = document.createElement("canvas");
  canvas.width = image.width;
  canvas.height = image.height;
  canvas.getContext("2d").drawImage(image, 0, 0);
  return canvas;
};
nextTick(() => {
  let img = new Image();
  img.src = "/favicon.ico";
  img.height = 32;
  img.width = 32;

  img.onload = () => {
    console.log("img:", img);
    let canvas = imageToCanvas(img);
    console.log("canvas:", canvas);

    let url = canvas.toDataURL();
    console.log("url:", url);
  };
});
</script>

Tip: Image resources must be loaded before they can be drawn on the canvas! So use onload

Method 2:

Use the html2canvas plugin

<template>
  <div>
    <img ref="ref_img" src="/favicon.ico" />
  </div>
</template>
<script lang="ts" setup>
import { nextTick, ref } from "vue";
import html2canvas from "html2canvas";

const ref_img = ref();

nextTick(() => {
  html2canvas(ref_img.value).then((canvas) => {
    console.log("canvas:", canvas);
    let url = canvas.toDataURL();
    console.log("url:", url);
  });
});
</script>

Note: src needs to use a local picture, if you use an online picture, you will find that it cannot be transferred 

When using html2canvas, the background of the exported image is not transparent

problem causes:

• The background color of the dom container is not transparent, set the dom container style tobackground: transparent
• The options parameter of html2canvas is not null, and the configuration item is passed inbackgroundColor: null
• The base64 exported by canvas.toDataURL('image/jpeg') will have a white background, because the jpeg image does not support the alpha channel, just use itcanvas.toDataURL('image/png')

const options = {
  backgroundColor: null // null或transparent可将canvas背景设置为透明
}
html2canvas(dom, options).then(canvas => {
        const base64 = canvas.toDataURL('image/png')
      })