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