Skip to content

tnfe/html3canvas

Repository files navigation

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