在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:bubkoo/html-to-image开源软件地址:https://github.com/bubkoo/html-to-image开源编程语言:TypeScript 82.1%开源软件介绍:html-to-imageFork from dom-to-image with more maintainable code and some new features. Installnpm install --save html-to-image Usage/* ES6 */
import * as htmlToImage from 'html-to-image';
import { toPng, toJpeg, toBlob, toPixelData, toSvg } from 'html-to-image';
/* ES5 */
var htmlToImage = require('html-to-image'); All the top level functions accept DOM node and rendering options, and return a promise fulfilled with corresponding dataURL: Go with the following examples. toPngGet a PNG image base64-encoded data URL and display it right away: var node = document.getElementById('my-node');
htmlToImage.toPng(node)
.then(function (dataUrl) {
var img = new Image();
img.src = dataUrl;
document.body.appendChild(img);
})
.catch(function (error) {
console.error('oops, something went wrong!', error);
}); Get a PNG image base64-encoded data URL and download it (using download): htmlToImage.toPng(document.getElementById('my-node'))
.then(function (dataUrl) {
download(dataUrl, 'my-node.png');
}); toSvgGet an SVG data URL, but filter out all the function filter (node) {
return (node.tagName !== 'i');
}
htmlToImage.toSvg(document.getElementById('my-node'), { filter: filter })
.then(function (dataUrl) {
/* do something */
}); toJpegSave and download a compressed JPEG image: htmlToImage.toJpeg(document.getElementById('my-node'), { quality: 0.95 })
.then(function (dataUrl) {
var link = document.createElement('a');
link.download = 'my-image-name.jpeg';
link.href = dataUrl;
link.click();
}); toBlobGet a PNG image blob and download it (using FileSaver): htmlToImage.toBlob(document.getElementById('my-node'))
.then(function (blob) {
if (window.saveAs) {
window.saveAs(blob, 'my-node.png');
} else {
FileSaver.saveAs(blob, 'my-node.png');
}
}); toCanvasGet a HTMLCanvasElement, and display it right away: htmlToImage.toCanvas(document.getElementById('my-node'))
.then(function (canvas) {
document.body.appendChild(canvas);
}); toPixelDataGet the raw pixel data as a Uint8Array with every 4 array elements representing the RGBA data of a pixel: var node = document.getElementById('my-node');
htmlToImage.toPixelData(node)
.then(function (pixels) {
for (var y = 0; y < node.scrollHeight; ++y) {
for (var x = 0; x < node.scrollWidth; ++x) {
pixelAtXYOffset = (4 * y * node.scrollHeight) + (4 * x);
/* pixelAtXY is a Uint8Array[4] containing RGBA values of the pixel at (x, y) in the range 0..255 */
pixelAtXY = pixels.slice(pixelAtXYOffset, pixelAtXYOffset + 4);
}
}
}); Reactimport React, { useCallback, useRef } from 'react';
import { toPng } from 'html-to-image';
const App: React.FC = () => {
const ref = useRef<HTMLDivElement>(null)
const onButtonClick = useCallback(() => {
if (ref.current === null) {
return
}
toPng(ref.current, { cacheBust: true, })
.then((dataUrl) => {
const link = document.createElement('a')
link.download = 'my-image-name.png'
link.href = dataUrl
link.click()
})
.catch((err) => {
console.log(err)
})
}, [ref])
return (
<>
<div ref={ref}>
{/* DOM nodes you want to convert to PNG */}
</div>
<button onClick={onButtonClick}>Click me</button>
</>
)
} Optionsfilter(domNode: HTMLElement) => boolean A function taking DOM node as argument. Should return true if passed node should be included in the output. Excluding node means excluding it's children as well. You can add filter to every image function. For example, const filter = (node)=>{
const exclusionClasses = ['remove-me', 'secret-div'];
return !exclusionClasses.some(classname=>node.classList.includes(classname));
}
htmlToImage.toJpeg(node, { quality: 0.95, filter: filter}); or htmlToImage.toPng(node, {filter:filter}) Not called on the root node. backgroundColorA string value for the background color, any valid CSS color value. width, heightWidth and height in pixels to be applied to node before rendering. canvasWidth, canvasHeightAllows to scale the canva's size including the elements inside to a given width and height (in pixels). styleAn object whose properties to be copied to node's style before rendering. You might want to check this reference for JavaScript names of CSS properties. qualityA number between Defaults to cacheBustSet to true to append the current time as a query string to URL requests to enable cache busting. Defaults to imagePlaceholderA data URL for a placeholder image that will be used when fetching an image fails. Defaults to an empty string and will render empty areas for failed images. pixelRatioThe pixel ratio of the captured image. Default use the actual pixel ratio of the device. Set preferredFontFormatThe format required for font embedding. This is a useful optimisation when a webfont provider specifies several different formats for fonts in the CSS, for example: @font-face {
name: 'proxima-nova';
src: url("...") format("woff2"), url("...") format("woff"), url("...") format("opentype");
} Instead of embedding each format, all formats other than the one specified will be discarded. If this option is not specified then all formats will be downloaded and embedded. fontEmbedCSSWhen supplied, the library will skip the process of parsing and embedding webfont URLs in CSS,
instead using this value. This is useful when combined with const fontEmbedCss = await htmlToImage.getFontEmbedCSS(element1);
html2Image.toSVG(element1, { fontEmbedCss });
html2Image.toSVG(element2, { fontEmbedCss }); skipAutoScaleWhen supplied, the library will skip the process of scaling extra large doms into the canvas object.
You may experience loss of parts of the image if set to Defaults to typeA string indicating the image format. The default type is image/png; that type is also used if the given type isn't supported. When supplied, the toCanvas function will return a blob matching the given image type and quality. Defaults to BrowsersOnly standard lib is currently used, but make sure your browser supports:
It's tested on latest Chrome and Firefox (49 and 45 respectively at the time of writing), with Chrome performing significantly better on big DOM trees, possibly due to it's more performant SVG support, and the fact that it supports Internet Explorer is not (and will not be) supported, as it does not support SVG Safari is not supported, as it uses a stricter security model on How it worksThere might some day exist (or maybe already exists?) a simple and standard way of exporting parts of the HTML to image (and then this script can only serve as an evidence of all the hoops I had to jump through in order to get such obvious thing done) but I haven't found one so far. This library uses a feature of SVG that allows having arbitrary HTML content inside of the
Things to watch out for
ContributingPlease let us know how can we help. Do check out issues for bug reports or suggestions first. To become a contributor, please follow our contributing guide. |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论