1904labs / dom-to-image-more Goto Github PK
View Code? Open in Web Editor NEWThis project forked from tsayen/dom-to-image
Generates an image from a DOM node using HTML5 canvas
License: Other
This project forked from tsayen/dom-to-image
Generates an image from a DOM node using HTML5 canvas
License: Other
Hey first of all: Great work!
I want to ask you if you could release a new version to npm/yarn with your changes from the last months.
Escpecially the onclone feature is something I need for my project.
Thank you in advance! :)
See this URL: http://www.nossebromediaproduktion.se/test/domtopng-test/domtopng-test.html
Clicking the button I expect it to copy the exact displayed contents of the wrapper DIV element above the button to a PNG image below the button.
Copies the SVG content that is not in ::before or ::after CSS rules to the PNG image below the button. This example uses a multitude of ::before and ::after to add extra graphical content, so it may be an edge case.
2.8.0
When cloning a node whose content is larger than the node, domtoimage produces an image whose size is larger than the node's size. See this jsfiddle. In the fiddle, the blue border around the image shows that the domtoimage result is 4 pixels taller than the actual height of the node. This extra space doesn't end up displaying content and seems more like a nuisance than an expected behavior.
Side-note: In this particular example, the SVG child is the same size as the node itself, but the node's content is still larger because the SVG is rendered inline
(workarounds include: changing its display
to block
or font-size
to 0px
).
A node should not be rendered larger than its actual size.
The node renders larger than its actual size if the content inside of it is larger.
2.8.0
The behavior occurs because util.width
and util.height
use scrollWidth
and scrollHeight
to calculate the size of the element (see line 630). This is helpful if we want to capture overflowing content in the screenshot, as shown in this jsfiddle. I don't think this is the intended behavior in most cases though. We could consider changing the code to use clientWidth
and clientHeight
instead.
If this overflow behavior is still necessary, I hope we can add an option for users like me to turn it off. Or even better, have it off by default.
Another possible solution is allowing the user to specify the height and width of the node via the options, but unfortunately it does not work for me since the node I am trying to screenshot has a border - see this jsfiddle. We'd need to change applyOptions so it takes this border into account so the resultant image isn't skewed.
let url = domtoimage.toPng(document.getElementById('treeCanvas')).then(dataUrl=> { return dataUrl })
where treeCanvas is div with svg(ngx-graph component) inside it. Tried to search for this error, but it seems like this error only appeared in another library called html2canvas.
dom-to-image^latest
Chrome^73
Am trying to divide my html into multiple pages but the element are getting cut abruptly
Synchronous option instead of promise?
Use case would be to wait it out and get the image rather than asynchronous
I was trying out the latest code from master to get font-awesome rendering fixed. This still didn't work.
Font awesome fonts are rendered.
When I execute this in the console:
document.styleSheets[1].hasOwnProperty("cssRules")
I saw that it returned false while it's actually a valid styleSheet object with a cssRules property:
The relevant line in the code:
dom-to-image-more/src/dom-to-image-more.js
Line 733 in d3ee842
does this check and that's the reason why no stylesheets are actually embedded.
I believe this check can be omitted anyway because of the try catch that follows?
Master @ commit d3ee842
Use custom fonts in html, especially google fonts, loaded via link. Results after applying dom-to-image-more to div will produce wrong fonts.
Fonts should be the same as in the original html.
2.8.0
Chrome Version 76.0.3809.132 (Official Build) (64-bit)
I was using the dom-to-image-more, and although it was suprisingly faster than the regular lib it was not properly rendering fonts on SVG. I made a comparisson between 2 libs:
dom-to-image-more
dom-to-image-retina-fix
more
function newCanvas(domNode, scale) {
var canvas = document.createElement('canvas');
canvas.width = (options.width || util.width(domNode)) * scale;
canvas.height = (options.height || util.height(domNode)) * scale;
retina-fix
function newCanvas(domNode) {
var canvas = document.createElement('canvas');
canvas.width = options.width || util.width(domNode) * 2;
canvas.height = options.height || util.height(domNode) * 2;
canvas.style.width = util.width(domNode);
canvas.style.height = util.height(domNode);
more
look at the $
function parseExtension(url) {
var match = /\.([^\.\/]*?)(\?|$)/g.exec(url);
if (match) return match[1];
else return '';
}
retina-fix
look at the $
function parseExtension(url) {
var match = /\.([^\.\/]*?)$/g.exec(url);
if (match) return match[1];
else return '';
}
more
look at the reject resolve
function newImage(element) {
return {
inline: inline
};
function inline(get) {
if (util.isDataUrl(element.src)) return Promise.resolve();
return Promise.resolve(element.src)
.then(get || util.getAndEncode)
.then(function(data) {
return util.dataAsUrl(data, util.mimeType(element.src));
})
.then(function(dataUrl) {
return new Promise(function(resolve, reject) {
element.onload = resolve;
// for any image with invalid src(such as <img src />), just ignore it
element.onerror = resolve;
element.src = dataUrl;
});
});
}
}
retina-fix
look at the reject resolve
function newImage(element) {
return {
inline: inline
};
function inline(get) {
if (util.isDataUrl(element.src)) return Promise.resolve();
return Promise.resolve(element.src)
.then(get || util.getAndEncode)
.then(function(data) {
return util.dataAsUrl(data, util.mimeType(element.src));
})
.then(function(dataUrl) {
return new Promise(function(resolve, reject) {
element.onload = resolve;
// for any image with invalid src(such as <img src />), just ignore it
element.onerror = reject;
element.src = dataUrl;
});
});
}
}
-webkit-background-clip: text;
background-clip: text;
/* -webkit-text-fill-color: transparent;
firefox ok , but not chorme.
Please tell me anyone if there is any sollution for it.
I need to download a bookshelf where all the images come from Google Books.
I created the fiddle below, with only 1 image, to show the problem I'm experiencing.
Here is an image of my DOM and just below the result, after clicking on Screenshot:
Access to XMLHttpRequest at 'https://books.google.com/books/content?id=rBdiDwAAQBAJ&printsec=frontcover&img=1&zoom=1&edge=curl&source=gbs_api'
from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
I'm using Vue and my question is: does this have a solution? How to add an 'Access-Control-Allow-Origin' header in the resource?
i try with a div that has background image,but not rendered.
The relevant line in the code
dom-to-image-more/src/dom-to-image-more.js
Lines 856 to 866 in 904ef1b
i change line 861 to backgroundNode.style.getPropertyPriority('background')
and it works
I'm trying to take a png screenshot using dom-to-image-more for more complex web pages (6000+ HTML nodes), using Firefox version 100.
As an example, see https://jsfiddle.net/joseph_white3/gj7v21yz/.
Screenshot should be taken successfully. Webpages of this size are quite common, for example Google Sheets has 5000-6000 HTML nodes, according to the output of document.getElementsByTagName('*').length
.
In Chrome version 101, the code works fine. In Firefox 100 though, domtoimage.toPng
throws an error in the makeImage function line 555:
Note: JSFiddle is letting the page crash instead of logging the error. I had to copy the HTML to a separate webpage to inspect the error.
Presumably this occurs because the data uri
is a string 34277656 characters long (32.7 MB), which exceeds the max data URI length (see MDN, which states that Firefox 97+ has a max data URI length of 32 MB). As a result, the image.onerror
function in makeImage
gets called with the error shown above.
Latest (v. 2.9.5)
Thanks for the help.
domtoimage.toJpeg(
document.getElementById('street_view'),
{ 'quality':0.95 }
).then(function (dataUrl) {
var img = new Image();
img.src = dataUrl;
document.body.appendChild(img);
})
.catch(function (error) {
console.error("oops, something went wrong!", error);
});
<iframe
id="street_view"
width="100%"
height="1024px"
style="border:0"
loading="lazy"
allowfullscreen
src="https://www.google.com/maps/embed/v1/streetview?key=REDACTED
&location=47.2740517,-2.2116541
&heading=10
&pitch=10
&fov=70">
</iframe>
An image containing the screenshot of the iframe
Image of the correct size, but entirely black.
No exception are thrown, no errors.
The only error is js?client=google-maps-embed&paint_origin=&libraries=geometry,search&v=3.exp&language=en_US&callback=onApiLoad:258 The deviceorientation events are blocked by permissions policy.
90.0.4430.212
)Package usage via NPM
Installed package does not contain bower_components
Package contains bower_components
Latest (2.10.1)
The same issue reported from the original repo: tsayen#121 is still happening. There is a note to a potential fix (tsayen#142) but it was never merged.
Fails to export canvas with 0 width
https://jsfiddle.net/nv5aq6wh/
export image
throws error without stacktrace and explanation. was hard to find a cause...
Is this possible?
I have been using this but it is limited to having to ensure the element is already in the DOM Tree.
Mu use case, is that there are times i create the element programmatically. Thing is, I have to attach this to the DOM tree in order for the toSvg() or toPng() to work.
I wonder if it is possible to do the same thing without having to add the element to the DOM tree?
var el = document.createElement('div');
el.setAttribute('style', 'white-space: nowrap; position: relative; z-index: -99; width: 100px; height:200px; display: inline-block; font: ' 12px Arial');
el.setAttribute('id', 'test');
el.innerHTML = 'sample text';
$('#where_to_insert).append(el);
domtoimage.toSvg(el).then(function(dataUrl) {
console.log(dataUrl);
$(el).remove();
});
This works because of $('#where_to_insert).append(el);, but if i do not add it to the DOM Tree. nothing gets rendered.
Thoughts?
I tried this lib with a root node that is an <iframe>
and got that html2canvas
is not defined
dom-to-image-more/src/dom-to-image-more.js
Line 243 in 47deed2
I'm trying to take several images and compose them together into one image for download. I'm also adding some metadata text on top of each image.
I have a prototype working at:
https://csb-te5qjm.vercel.app/
It works partly, but I'm getting CORS issue on some images (from Pinterest, Wikipedia). Just wondering how best to fix this. The cachebust option doesn't work for me. Should I try a proxy server to fix this issue?
Below is my code for the event component(i'm using react).
import domtoimage from "dom-to-image"
const downloadImage = () => {
domtoimage
.toJpeg(document.getElementById("event-container"), { cacheBust: true })
.then(function (dataUrl) {
var link = document.createElement("a")
link.download = "my-image-name.jpeg"
link.href = dataUrl
link.click()
})
}
I'm getting this error in the console:
cannot fetch resource:
I'm pretty sure it's a CORS issue and that images from Pinterest or Wikipedia are not being rendered. Images from Twitter however is OK and gets fetched.
2.11.1
Current version of this lib is not working when converting svg with custom fonts to png
Link to the issue and solution
https://stackoverflow.com/questions/48105468/including-fonts-when-converting-svg-to-png
JS Fiddle with working solution https://jsfiddle.net/hutvL4ks/2/
In production, I have a large table and noticed that the bottom and left edges were cut off when saving to Png. Using fiddle I isolated the problem to setting the padding on table cells to 0.
In the fiddle the bottom edge is cut off and also the image is wider than the dom table so I guess there may be various small differences when padding is 0 in this case.
Seems related to #77 where the user also fixed the issue by adding padding. Tables naturally have 1px cell padding so this might not have been noticed in the general case.
Image should be full table.
Image doesn't match. Edges are cropped etc.
2.13.0
When font-loading is made, does not care about unicode-range
defined in the font-face and loads all available fonts.
Should load only those which are loaded by the browser automatically
@IDisposable Let's generate lighter SVGs that don't dump the entire computed styles in the document.
State-of-the-art solution: https://stackoverflow.com/a/56408175/15764156
Much lighter SVG (<20% of current size).
Able to output SVGs that are 1MB large.
2.8.0
Chrome/89.0.4389.128 Electron/12.0.13
Render a text node.
I know wrapping it with a span can make it render, but what I'm working on is a developer tool, so I want to be able to take screenshot of any DOM node including text node.
Render correctly.
Fail to render.
On chrome it gives:
Failed to execute 'appendChild' on 'Node': This node type does not support this method.
The source location is:
dom-to-image-more/src/dom-to-image-more.js
Line 409 in 47deed2
Seems it does not take into account the case of text node and tries to add a style element into it.
Is it difficult to make it support text node?
2.9.5
Hi!
I'm trying to install the package on my node.js app, but I'm not sure of how to do. I copied the content of /src/dom-to-image-more.js into my JS script (in the "public" folder), but whenever I try to use the default example:
var node = document.getElementById("h1");
domtoimage
.toPng(node)
.then(function (dataUrl) {
console.log(dataUrl)
})
.catch(function (error) {
console.error("oops, something went wrong!", error);
});
I got an error saying ownerWindow is not defined.
I tried to use npm install and put import domtoimage from "dom-to-image-more";
in my JS file but then I get an error when trying to use it (<script src="/js/dom-to-img.js" type='module'></script>
):
Uncaught TypeError: Failed to resolve module specifier "dom-to-image-more". Relative references must start with either "/", "./", or "../".
I'm pretty new to this, so, not sure what's going on...
?
dom-to-img.js:475 Uncaught ReferenceError: ownerWindow is not defined
at Object.getWindow (dom-to-img.js:475:79)
at toSvg (dom-to-img.js:68:50)
at draw (dom-to-img.js:205:16)
at Object.toPng (dom-to-img.js:139:16)
at :4:4
2.13.1
In an ideal world we want to optimize SVG output by removing styles that can be inherited.
This mainly has an impact at >>1K nodes where the output is in the 1MB scale of magnitude.
There's not much of a story here at the moment, but the library did previously lean on unset
until the #90 regression:
dom-to-image-more/src/dom-to-image-more.js
Lines 915 to 934 in 2c54d7f
There's two strategies I tried to research:
document.styleSheets
while
loop on .parentNode
, and a hardcoded list of inheritable CSS propstoSvg
TreeWalker
to iterate over the nodesSome starter code, but this code snippet:
const treeWalker = document.createTreeWalker(document.querySelector('foreignObject > *'), NodeFilter.SHOW_ELEMENT)
const elementList = [];
let currentNode = treeWalker.currentNode;
while (currentNode) {
elementList.push(currentNode);
currentNode = treeWalker.nextNode();
}
elementList.forEach(function(element) {
const inlineStyles = element.style;
const computedStyles = getComputedStyle(element);
util.asArray(inlineStyles).forEach(function(name) {
if (inlineStyles.cssText.includes(name + ': ' + value + ';')) {
const value = inlineStyles.getPropertyValue(name);
inlineStyles.removeProperty(name);
if (value !== computedStyles.getPropertyValue(name)) {
inlineStyles[name] = value;
}
}
});
});
Hi folks,
Just a quick question. Is that possible to run dom-to-image on NodeJS?
When cloning a node that has absolute positioning, domtoimage produces an image whose contents are shifted by the position of the node. This results in a significant portion of the image being missing. See this jsfiddle.
The image produced by domtoimage should be the same, whether the node has absolute positioning applied or not.
The image produced is shifted, with most of the content missing.
2.8.0
I fixed this in my own copy of dom-to-image-more.js by adding the following code to the end of the copyProperties
function, which starts on line 289:
// Remove positioning of root elements, which stops them from being captured correctly
if (root) {
['inset-block', 'inset-block-start', 'inset-block-end'].forEach((prop) => target.removeProperty(prop));
['left', 'right', 'top', 'bottom'].forEach((prop) => {
if (target.getPropertyValue(prop)) {
target.setProperty(prop, '0px');
}
});
}
This sets any properties like top
and left
to 0 if they had been set on the cloned node. It also removes inset-block
properties, which is a newer CSS property that has the same effect.
I'd be happy to create a pull request for this issue, if anyone would be willing to review it
var box = document.createElement("div");
box.style.width = "100px"
box.style.height = "100px"
box.style.backgroundColor = "#c675b0"
domtoimage.toPng(box )
.then(function (dataUrl) {
var img = new Image();
img.src = dataUrl;
document.body.appendChild(img);
})
.catch(function (error) {
console.error('oops, something went wrong!', error);
});
Actually, when a html element have a border-left css property, this property is duplicated to the border right of this element. And put border-right property on an element not showing on the picture generated.
Only on Firefox. Work fine on Chrome !!
Best regards
gives me an error any one cane help ?
.nav-link:hover,
.nav-link:focus{
background: linear-gradient(to top, #ffe838, #fd57bf);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
I'm rendering some text with custom fonts and in the render only Helvetica or Times New Roman are displayed (replacing my custom font). This problem occurs only on iOS 15 but not with the original dom-to-image version, only on the -more.
@charset "UTF-8";
@font-face {
font-family: 'Lato';
src: url('../fonts/lato-regular.eot');
src: url('../fonts/lato-regular.eot?#iefix') format('embedded-opentype'),
url('../fonts/lato-regular.woff2') format('woff2'),
url('../fonts/lato-regular.woff') format('woff'),
url('../fonts/lato-regular.ttf') format('truetype'),
url('../fonts/lato-regular.svg#Lato') format('svg');
font-style: normal;
font-weight: 400;
}
I know iOS15 changed some fonts aspects, any way to fix this?
iOS Crome
iOS Firefox
iOS Safari
I want to use this library from within my Kotlin/JS project, but it does not contain any type definitions that could be used by the Dukat tool.
High quality TypeScript type definitions exist and can be used to import this library into Kotlin/JS projects
TypeScript type definitions are missing and thus interoperability is very limited/non existent.
2.9.5
import domtoimage from 'dom-to-image-more';
export class MyComponent {
@ViewChild('leafletMap') leafletMap: ElementRef;
downloadMap = (): void => {
//error happens here
domtoimage.toPng(this.leafletMap.nativeElement).then((img: any) => {
console.log(img);
});
};
}
/* of course this is simplified */
c.getComputedStyle is not a function is thrown. Strangely enough, this exact same code works with 2.8.0
stackoverflow answer & stackblitz
2.9.x
all
Even using the "style" option or "wrapper" trick, i cannot have the full rendering of my element including its box shadow
jsfiddle
The resulting image should include the box shadow area.
Downloaded the latest, and it looks like tsayen#37 from dom-to-image
is not fixed (it's not fixed in dom-to-image
either). There is an open PR in the original repo though, tsayen#336
I tried it with the latest of dom-to-image-more
and the below looks like the requests that occur
For some reason, on chrome mobile, when an image is generated, there are some differences and looks like it is related to the font-family or kerning... not sure what is happening. Everything works fine on browser.
Any ideas on what is happening and why the generated image is not matching the DOM on chrome for mobile?
Access to window breaks Angular Universal because is undefined.
Can you solve it and avoid to access window, or returning a shim?
Thanks!
tried to install with bower install dom-to-image-more but was unsuccessful.
bower error: ENOTFOUND Package dom-to-image-more not found.
https://jsfiddle.net/z9042mw8/1/
The getAndEncode()
function is well able to fetch base64 URL with correct mimetype. However, the mimetype is manually removed from the result during the inlining and poorly restored later.
Proposed fix:
diff --git a/src/dom-to-image-more.js b/src/dom-to-image-more.js
index 044adea9..84913046 100644
--- a/src/dom-to-image-more.js
+++ b/src/dom-to-image-more.js
@@ -446,8 +446,6 @@
return {
escape: escapeRegEx,
parseExtension: parseExtension,
- mimeType: mimeType,
- dataAsUrl: dataAsUrl,
isDataUrl: isDataUrl,
canvasToBlob: canvasToBlob,
resolveUrl: resolveUrl,
@@ -538,11 +536,6 @@
}
}
- function mimeType(url) {
- const extension = parseExtension(url).toLowerCase();
- return mimes()[extension] || '';
- }
-
function isDataUrl(url) {
return url.search(/^(data:)/) !== -1;
}
@@ -666,8 +659,7 @@
const encoder = new FileReader();
encoder.onloadend = function () {
- const content = encoder.result.split(/,/)[1];
- resolve(content);
+ resolve(encoder.result);
};
encoder.readAsDataURL(request.response);
}
@@ -689,10 +681,6 @@
return cacheEntry.promise;
}
- function dataAsUrl(content, type) {
- return `data:${type};base64,${content}`;
- }
-
function escapeRegEx(string) {
return string.replace(/([.*+?^${}()|\[\]\/\\])/g, '\\$1');
}
@@ -772,9 +760,6 @@
return baseUrl ? util.resolveUrl(urlValue, baseUrl) : urlValue;
})
.then(get || util.getAndEncode)
- .then(function (data) {
- return util.dataAsUrl(data, util.mimeType(url));
- })
.then(function (dataUrl) {
return string.replace(urlAsRegex(url), `\$1${dataUrl}\$3`);
});
@@ -891,9 +876,6 @@
return Promise.resolve(element.src)
.then(get || util.getAndEncode)
- .then(function (data) {
- return util.dataAsUrl(data, util.mimeType(element.src));
- })
.then(function (dataUrl) {
return new Promise(function (resolve) {
element.onload = resolve;
Expected the image to work in the JSFiddle
The image breaks and the alt text for the mathematical formula appears.
Confirmed in 2.13.1 and also dom-to-image.
First of all: Thanks for this fantastic project!
I am using dom-to-image-more in combination with pdfmake. Since upgrading to version 2.9.1 I am receiving a TypeError in browser console:
ERROR Error: Uncaught (in promise): TypeError: c.getComputedStyle is not a function TypeError: c.getComputedStyle is not a function at P (dom-to-image-more.min.js:3) at e (dom-to-image-more.min.js:3) at ZoneDelegate.invoke (zone.js:372) at Object.onInvoke (core.js:28672) at ZoneDelegate.invoke (zone.js:371) at Zone.run (zone.js:134) at zone.js:1276 at ZoneDelegate.invokeTask (zone.js:406) at Object.onInvokeTask (core.js:28659) at ZoneDelegate.invokeTask (zone.js:405) at resolvePromise (zone.js:1213) at resolvePromise (zone.js:1167) at zone.js:1279 at ZoneDelegate.invokeTask (zone.js:406) at Object.onInvokeTask (core.js:28659) at ZoneDelegate.invokeTask (zone.js:405) at Zone.runTask (zone.js:178) at drainMicroTaskQueue (zone.js:582) at invokeTask (zone.js:491) at ZoneTask.invoke (zone.js:476)
Downgrading to version 2.8.0 solves the problem. A fix would be appreciated.
HI,
I have an issue with Angular 8+
Access to XMLHttpRequest at 'http://example.com/images/example_image.png' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Is there a way to add a header to requests maybe?
Or what can I do with that?
My DOM to save as:
<div id="mywrap" class="wrapper">
<div class="layer1>My images / texts</div>
<div class="layer2>My images / texts</div>
</div>
All layer is absolute with z-index as 1, 2, 3 => layer1, layer2, layer3.
My JavaScript code as...
let layer3 = document.createElement('div');
layer3.style.width = '100px';
layer3.style.height = '100px';
document.getElementById('mywrap').appendChild(layer3);
Layer3 is not show in created image.
The result must be included layer3
05-07-2022
Please refer to tsayen#77
<div id='dom-node'>
<span><a href='#dom-node'>dom-to-image-more/issues/90</a></span>
</div>
<div id='result'>
<img src='data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="232" height="132"><foreignObject x="0" y="0" width="100%" height="100%"><div id="dom-node" xmlns="http://www.w3.org/1999/xhtml" style="background-color: rgb(211, 211, 211); block-size: 100px; display: block; height: 100px; inline-size: 200px; padding-block: 16px; padding: 16px; padding-inline: 16px; text-align: center; width: 200px;">%0A<span><a href="%23dom-node" style="cursor: pointer; text-decoration-line: underline; text-decoration-thickness: initial;">dom-to-image-more/issues/90</a></span>%0A</div></foreignObject></svg>'></img>
</div>
#dom-node {
color: #000000;
height: 100px;
width: 200px;
background-color: lightgrey;
text-align: center;
padding: 1em;
}
a[href="#dom-node"] {
color: #000000;
}
#result {
margin-top: 10px;
}
It was taken as true that unset
had no gotchas. I tried using toSvg
on .Box
in https://github.com/pulls. copyUserComputedStyle
is an over-eager optimisation and has value collisions.
In this case, link color overrides that match inherit
(as in .Box .Link--primary
) are stripped away prematurely.
Here's an explanation of the copyUserComputedStyle
regression:
-webkit-link
/-moz-hyperlinktext
inherit
copyUserComputedStyle
assigns unset
inline which is computed as inherit
unset
and and the explicit color value match, that value is not added to the inline stylecolor
style. So instead of 2
, we're literally back to square 1
. 😃When you open up the #result
image src from the jsfiddle demo, it appears purple.
Regression confirmed in https://github.com/1904labs/dom-to-image-more/releases/tag/v2.12.0 and present since https://github.com/1904labs/dom-to-image-more/releases/tag/v2.9.1.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.