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);
  });
});

参数

|Name | Default | Description| | ---- | ---- |---- | |allowTaint | false |Whether to allow cross-origin images to taint the canvas| |backgroundColor | #ffffff | Canvas background color, if none is specified in DOM. Set null for transparent| |canvas | null | Existing canvas element to use as a base for drawing on| |foreignObjectRendering | false | Whether to use ForeignObject rendering if the browser supports it| |imageTimeout | 15000 |Timeout for loading an image (in milliseconds). Set to 0 to disable timeout.| |ignoreElements | (element) => false | Predicate function which removes the matching elements from the render.| |logging | true | Enable logging for debug purposes| |onclone | null | Callback function which is called when the Document has been cloned for rendering, | |original | source |document.| |proxy | null | Url to the proxy which is to be used for loading cross-origin images. If left empty, cross-origin images won't be loaded.| |removeContainer | true | Whether to cleanup the cloned DOM elements html2canvas creates temporarily| |scale | window.devicePixelRatio | The scale to use for rendering. Defaults to the browsers device pixel ratio.| |useCORS | false | Whether to attempt to load images from a server using CORS| |width | Element width | The width of the canvas| |height | Element height | The height of the canvas| |x | Element x-offset | Crop canvas x-coordinate| |y | Element y-offset | Crop canvas y-coordinate| |scrollX | Element scrollX | The x-scroll position to used when rendering element, (for example if the Element uses position: fixed)| |scrollY | Element scrollY | The y-scroll position to used when rendering element, (for example if the Element uses position: fixed)| |windowWidth | Window.innerWidth |Window width to use when rendering Element, which may affect things like Media queries| |windowHeight | Window.innerHeight |Window height to use when rendering Element, which may affect things like Media queries|