dom-to-image是一個js庫,可以將任意dom節(jié)點轉(zhuǎn)換為矢量(SVG)或光柵(PNG或JPEG)圖像。
npm install dom-to-image -S
/* in ES 6 */
import domtoimage from 'dom-to-image';
/* in ES 5 */
var domtoimage = require('dom-to-image');
所有高階函數(shù)都接受DOM節(jié)點和渲染選項options ,并返回promises。
<div id="my-node"></div>
var node = document.getElementById('my-node');
// options 可不傳
var options = {}
domtoimage.toPng(node, options)
.then(function (dataUrl) {
var img = new Image();
img.src = dataUrl;
document.body.appendChild(img);
})
.catch(function (error) {
console.error('oops, something went wrong!', error);
});
domtoimage.toBlob(document.getElementById('my-node'))
.then(function (blob) {
console.log('blob', blob)
});
domtoimage.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();
});
function filter (node) {
return (node.tagName !== 'i');
}
domtoimage.toSvg(document.getElementById('my-node'), {filter: filter})
.then(function (dataUrl) {
/* do something */
});
var node = document.getElementById('my-node');
domtoimage.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);
}
}
});
Name | 類型 | Default | Description |
filter | Function | —— | 以DOM節(jié)點為參數(shù)的函數(shù)。如果傳遞的節(jié)點應包含在輸出中,則應返回true(排除節(jié)點意味著也排除其子節(jié)點) |
bgcolor | String | —— | 背景色的字符串值,任何有效的CSS顏色值。 |
height | Number | —— | 渲染前應用于節(jié)點的高度(以像素為單位)。 |
width | Number | —— | 渲染前應用于節(jié)點的寬度(以像素為單位)。 |
style | Object | —— | object對象,其屬性在渲染之前要復制到節(jié)點的樣式中。 |
quality | Number | 1.0 | 介于0和1之間的數(shù)字,表示JPEG圖像的圖像質(zhì)量(例如0.92=>92%)。默認值為1.0(100%) |
cacheBust | Boolean | false | 設置為true可將當前時間作為查詢字符串附加到URL請求以啟用清除緩存。 |
imagePlaceholder | Boolean | undefined | 獲取圖片失敗時使用圖片的數(shù)據(jù)URL作為占位符。默認為未定義,并將在失敗的圖像上引發(fā)錯誤。 |
dom-to-image使用SVG的一個特性,它允許在標記中包含任意HTML內(nèi)容。
dom-to-image.js
// Default impl options
var defaultOptions = {
// Default is to fail on error, no placeholder
imagePlaceholder: undefined,
// Default cache bust is false, it will use the cache
cacheBust: false
};
var domtoimage = {
toSvg: toSvg,
toPng: toPng,
toJpeg: toJpeg,
toBlob: toBlob,
toPixelData: toPixelData,
impl: {
fontFaces: fontFaces,
images: images,
util: util,
inliner: inliner,
options: {}
}
};
if (typeof module !== 'undefined')
module.exports = domtoimage;
else
global.domtoimage = domtoimage;
function toJpeg(node, options) {
options = options || {};
return draw(node, options)
.then(function (canvas) {
return canvas.toDataURL('image/jpeg', options.quality || 1.0);
});
}
復制代碼
function draw(domNode, options) {
return toSvg(domNode, options)
.then(util.makeImage)
.then(util.delay(100))
.then(function (image) {
var canvas = newCanvas(domNode);
canvas.getContext('2d').drawImage(image, 0, 0);
return canvas;
});
function newCanvas(domNode) {
var canvas = document.createElement('canvas');
canvas.width = options.width || util.width(domNode);
canvas.height = options.height || util.height(domNode);
if (options.bgcolor) {
var ctx = canvas.getContext('2d');
ctx.fillStyle = options.bgcolor;
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
return canvas;
}
}
function toSvg(node, options) {
options = options || {};
copyOptions(options);
return Promise.resolve(node)
.then(function (node) {
return cloneNode(node, options.filter, true);
})
.then(embedFonts)
.then(inlineImages)
.then(applyOptions)
.then(function (clone) {
return makeSvgDataUri(clone,
options.width || util.width(node),
options.height || util.height(node)
);
});
function applyOptions(clone) {
if (options.bgcolor) clone.style.backgroundColor = options.bgcolor;
if (options.width) clone.style.width = options.width + 'px';
if (options.height) clone.style.height = options.height + 'px';
if (options.style)
Object.keys(options.style).forEach(function (property) {
clone.style[property] = options.style[property];
});
return clone;
}
}
作者:知其
https://juejin.cn/post/6988045156473634852
友們,下午好!
都說一張美美的圖能為文章增色三分!
那如果是一個交互的圖片樣式 + 幾張美美圖呢?這能為文章增色多少呢?
比如這種(樣式ID:90298)
使用這種樣式,即能有效的展示圖片,還能縮小文章空間,而且還與讀者存在互動交互,想不想知道這種樣式怎么做出來呢?
上面兩種樣式都可以在樣式中心輸入ID搜索到。
但是,樣式中心的原樣式,都是四張圖片滑動的,直接進行換圖就可以使用了。
但如果要像三兒上面做的兩個樣式,一個是5張圖,一個是9張圖,就要進HTML進行修改了。
進入到“HTML”模式,找到<section .........> </section>這段代碼,先選擇Ctrl+C復制。
然后在此段代碼結(jié)尾處敲回車鍵換行,再選擇Ctrl+V粘貼。
粘貼幾次,樣式就會在原有四張的基礎上多出幾張,胖友們可以根據(jù)自己的需求進行多次粘貼。
進入到“HTML”模式,找到<img src=........./>這段代碼,先選擇Ctrl+C復制,然后在此段代碼結(jié)尾處,再Ctrl+V粘貼。
同上個樣式,粘貼幾次,樣式就會在原有四張的基礎上多出幾張,胖友們可以根據(jù)自己的需求進行多次粘貼。
為了樣式的美感,還是有三點建議給大家。
1、圖片請保持尺寸一致。否則會導致圖片層次不齊。
2、尺寸請500x500以上。否則可能會使圖片不清楚。
3、圖片大小盡可能小點。否則瀏覽時加載會不流暢。
更多好玩樣式,請進樣式中心搜索“滾動”
好了,本次教程就到這里~bye
這樣一個需求,就是在一個DIV中包含有一個Image標簽,但是在Div標簽中包含有一張背景圖片,設計圖上的樣子是這張背景圖片是有一個透明度的,但是如果直接使用opacity屬性設置的的話就會連Div中的內(nèi)容的透明度也會受到影響,那么我們?nèi)绾卧贖TML中設置div背景圖片的透明度呢?,可以通過以下幾種方法實現(xiàn)。
這是在日常開發(fā)中被推薦使用的方法,通過這種方式實現(xiàn)不會影響到div中的其他內(nèi)容的透明度只會影響它自己背景的透明度,詳細實現(xiàn)如下。
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 300px;
height: 200px;
overflow: hidden;
}
.container::before {
content: "";
background-image: url('your-image.jpg');
background-size: cover;
background-position: center;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.5; /* 調(diào)整透明度 */
z-index: 1;
}
.content {
position: relative;
z-index: 2;
color: white;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
這里是內(nèi)容
</div>
</div>
</body>
</html>
這種方式比較適合那種需要給背景圖片上添加蒙版的情況,但是筆者嘗試的時候,結(jié)果實在是不盡人意。所以還是選擇了上面的推薦方法,不過這種方式要比上面的那種方式實現(xiàn)起來要簡單很多。如下所示。
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 300px;
height: 200px;
background: rgba(255, 255, 255, 0.5) url('your-image.jpg') no-repeat center center;
background-size: cover;
}
</style>
</head>
<body>
<div class="container">
這里是內(nèi)容
</div>
</body>
</html>
這種方式實現(xiàn)會影響到整個的div的樣式,也就是說頁面中的內(nèi)容的透明度也會受到影響,并且這種影響不會被其他樣式所改變。如下所示。
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 300px;
height: 200px;
background: url('your-image.jpg') no-repeat center center;
background-size: cover;
filter: opacity(0.5); /* 調(diào)整透明度 */
}
</style>
</head>
<body>
<div class="container">
這里是內(nèi)容
</div>
</body>
</html>
以上就是實現(xiàn)如何調(diào)整div的背景透明度,在一些特殊場景中我們還可以通過JS的方式來實現(xiàn)。上面的方法中,推薦使用的是偽元素方法,因為它在修改了div背景透明度之后,并不會影響到其他的元素,RGBA色彩添加則是局限于一些色彩華麗的地方使用,而對于一些單色調(diào)的內(nèi)容來講這種方式實現(xiàn)效果不是太好。通過CSS過濾樣式,雖然是最直接的方式,但是如果在div內(nèi)部有內(nèi)容的情況下會影響到整個組件體系的樣式。
在實際開發(fā)中,我們可以選擇合適的方式來實現(xiàn)這個需求。當然還有其他的實現(xiàn)方式,有興趣的讀者可以留言我們一起討論。
*請認真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。