html3canvas v1.1.5

html3canvas

html2canvas修正版,解决绘制多个元素重复创建iframe的问题.

使用

import html3canvas from "html3canvas";
const resultCanvas = await html2canvas(el, opt);

文档

* 若opations参数没有elements字段, 则用法和返回和html2canvas 原库一摸一样

html3canvas(a1, {}).then((canvass)=> {
  document.body.appendChild(canvas);
});

* 复用1个iframe节省资源用法, useOnlyIFrame = true

const a1 = document.getElementById("a1");
const a2 = document.getElementById("baz");
const a3 = document.getElementById("a3");
const array = [a1, a2, a3];
const getRanDom = () => array[Math.floor(Math.random() * array.length)];

document.getElementById("btn").onclick = function() {
  html3canvas(getRanDom(), {
    useOnlyIFrame: true,
    removeContainer: false
  }).then(function(canvas) {
    document.body.appendChild(canvas);
  });
  alert("截图");
};

* 单frame渲染多个dom, 必须传elements字段, 返回canvass为三个结果canvas数组

const a1 = document.getElementById('a1');
const a2 = document.getElementById('a2');
const a3 = document.getElementById('a3');

html3canvas(a1, {
  elements: [a1, a2, a3],
  removeContainer: true
}).then((canvass)=> {
  canvass.forEach(canvas => {
    document.body.appendChild(canvas);
  });
});

* 预传size, 指定尺寸

const a1 = document.getElementById('a1');
const a2 = document.getElementById('a2');
const a3 = document.getElementById('a3');

html3canvas(a1, {
  elements: [a1, a2, a3],
  size: [[100,100], [120,100], [50, 70]]
}).then((canvass)=> {
  canvass.forEach(canvas => {
    document.body.appendChild(canvas);
  });
});

* 预传canvas

const a1 = document.getElementById('a1');
const a2 = document.getElementById('a2');
const a3 = document.getElementById('a3');

const c1 = createCanvas(100, 100);
const c2 = createCanvas(120, 100);
const c3 = createCanvas(50, 70);

html3canvas(a1, {
  elements: [a1, a2, a3],
  canvass: [c1, c2, c3],
  size: [[100,100], [120,100], [50, 70]]
}).then((canvass)=> {
  canvass.forEach(canvas => {
    document.body.appendChild(canvas);
  });
});

参数