This is my first nuggets blog post, the beginning of nuggets writing

Html2Canavs screenshots were used for the company’s project

Note: image resources must be allowed across domains!! The problem is that the nodes of the atlas drawn by D3 are mostly picture ICONS, and the image resources cannot be captured when the screenshot is called.

Plan 1:

Replace the URL of the atlas with Base64 in the database table. When the self-defined entity icon uploads the image, it is also converted to Base64 for saving.

Advantages: Easy to save, HTML2Canvas can capture ICONS

Disadvantages: Image to Base64 memory will be large, initialization to obtain the entity list, interface wait time is long;

Scheme 2:

The data table stores both the URL of the picture, but also the base64 of the picture;

Back-end write two interfaces, one is initialization to get the entity list drawing; A base64 interface that gets the entity list icon; The subsequent interface is called asynchronously; In the screenshot, replace the SRC of the img tag with base64.

Advantages: Screenshots can be taken;

Disadvantages: You need to get base64 again, increasing the amount of code and logic;

export function replaceImage(id, imgBase64s) { // const dom = document.cloneNode(); const svg = document.querySelector(`#${id}`); const images = svg.querySelectorAll('image'); svg.style.backgroundColor = '#06253b'; images.forEach((img) => { const href = img.href.animVal; // const match = href.match(/http/); // if (match) { const base = imgBase64s.filter(h => h.url === href)[0]; if (base) { img.setAttribute('href', base.base64); } / /}}); return svg; }Copy the code

Solution 3:

When using HTML2Canvas screenshot, the SRC of the IMG tag in dom should be obtained, and the screenshot should be taken after img is converted into Base64 in the onload method of IMG.

Advantages: Screenshots can be taken;

Disadvantages:

1. Image resources need to be loaded again. 2Copy the code
export function screenShot (id) { return new Promise((resolve, reject) => { /* eslint-disable */ const svg = document.querySelector(id); svg.style.backgroundColor = '#ebf2fb'; html2canvas(svg, { onclone(html) { const promises = []; const imageNodes = html.querySelectorAll('svg.graph-svg image.nodeEl'); imageNodes.forEach((element) => { const href = element.getAttribute('href'); if(href.startsWith('base64')) return; const promise = new Promise((resolve, reject) => { const img = new Image(); img.crossOrigin = 'anonymous'; img.src = `${href}&time=${+new Date().getTime()}`; Img. onload = function() {const width = parseFloat(element.getAttribute('width')); const height = parseFloat(element.getAttribute('height')); const canvas = document.createElement('canvas'); canvas.width = width; canvas.height = height; const ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0, width, height); const base64 = canvas.toDataURL(); element.setAttribute('href', base64); resolve(); } img.onerror = reject; img.src = href; }) promises.push(promise); }) return Promise.all(promises) } }).then((canvas) => { resolve(canvas) }) }) }Copy the code

Conclusion: For HTML2Canvas screenshot, dom acquisition of text information is relatively easy, mainly due to the problem of online resources. If pictures are not allowed to cross domains, base64 scheme can only be selected. Base64, however, has more memory than images, making it slower to load; The specific situation depends on the specific needs