文章目录
准备
NPM下载指令
javascript
npm install dom-to-image
框架加载
in ES6
javascriptimport domtoimage from 'dom-to-image';
in ES5
javascriptvar domtoimage = require('dom-to-image');
CDN(标签)加载
案例
html<script src="dist/dom-to-image.min.js"></script>
引入方式
src/dom-to-image.js
或
dist/dom-to-image.min.js
"
方法返回domtoimage
对象,对象中存有对应方法。
详细文档传送门
版本二的效果图
版本一
html
html
<!-- 需要下载的元素标签 -->
<div id="idDemo" class="w_200 h_200 d_f jc_c ai_c p_r bc_1296db">
<div id="idItem" class="p_a fs_26 color_fff fw_800">1</div>
<div id="idItem" class="p_a fs_26 color_fff fw_800">5</div>
<div id="idItem" class="p_a fs_26 color_fff fw_800">2</div>
<div id="idItem" class="p_a fs_26 color_fff fw_800">8</div>
<div id="idItem" class="p_a fs_26 color_fff fw_800">9</div>
<div id="idItem" class="p_a fs_26 color_fff fw_800">6</div>
<div id="idItem" class="p_a fs_26 color_fff fw_800">8</div>
<div id="idItem" class="p_a fs_26 color_fff fw_800">2</div>
<div id="idItem" class="p_a fs_26 color_fff fw_800">5</div>
<div id="idItem" class="p_a fs_26 color_fff fw_800">1</div>
<div id="idItem" class="p_a fs_26 color_fff fw_800">7</div>
</div>
<!-- 下载操作 -->
<div class="m_t_68 bc_1296db radius_6 ta_c p_10 color_fff cursor_pointer" onclick="domToImg()">创建并下载图片</div>
JavaScript
javascript
/**
* 实现环形文字
*/
function init() {
let elItem = document.querySelectorAll('#idItem'),
radius = document.querySelector('#idDemo').clientWidth / 3.2,
itemLen = elItem.length,
pieceDeg = 360 / itemLen;
for (let i = 0; i < itemLen; i++) {
let t = i * pieceDeg,
x = undefined,
y = undefined,
deg = t;
t = (Math.PI / 180) * t;
x = Math.sin(t) * radius;
y = -Math.cos(t) * radius;
elItem[i].style.transform = `translate(${x}px, ${y}px) rotate(${deg}deg) scale(2, 1)`;
}
}
init();
/**
* 创建并下载图片
*/
async function domToImg() {
let idDemo = document.querySelector('#idDemo'),
dataUrl = await domtoimage.toPng(idDemo, 1),
a = document.createElement("a"),
filename = document.title,
event = new MouseEvent("click");
a.download = filename;
a.href = dataUrl;
a.dispatchEvent(event);
}
版本二
html
html
<!-- 需要下载的元素标签 -->
<div id="idDemo" class="w_1000 h_1000 p_r d_f jc_c ai_c bc_f5f5f5">
<div id="idItemBox" class="w_100_ h_100_ d_f jc_c ai_c p_r fs_150 fw_800 ff_NSimSun color_red wts_ffd700_3"></div>
<div class="p_a fs_60 fw_800 ff_NSimSun d_f">
<div class="w_70 h_300 d_f ff_c jc_sb ai_c bs_bb radius_2 p_t_2 p_b_2 bc_ffd700 color_red">
<div>牧</div>
<div>码</div>
<div>人</div>
</div>
<div class="w_270 m_l_30 color_red">
<div class="h_70 lh_70 tal_j bc_ffd700 radius_2 bs_bb p_l_2 p_r_2">程序员</div>
<div class="w_70 h_230 m_l_a m_r_a d_f ff_c jc_sb ai_c bc_ffd700 radius_bl_2 radius_br_2 bs_bb p_t_2 p_b_2">
<div>源</div>
<div>代</div>
<div>码</div>
</div>
</div>
</div>
</div>
<!-- 下载操作 -->
<div class="m_t_68 bc_1296db radius_6 ta_c p_10 color_fff cursor_pointer" onclick="domToImg()">创建并下载图片</div>
JavaScript
javascript
/**
* 实现环形文字
*/
function init() {
let arr = ['1', '5', '2', '8', '9', '6', '8', '2', '5', '1', '7'],
idItemBox = document.querySelector('#idItemBox'),
radius = document.querySelector('#idDemo').clientWidth / 3,
itemLen = arr.length,
pieceDeg = 360 / itemLen;
for (let i = 0; i < itemLen; i++) {
let div = document.createElement('div'),
t = i * pieceDeg,
x = undefined,
y = undefined,
deg = t;
t = (Math.PI / 180) * t;
x = Math.sin(t) * radius;
y = -Math.cos(t) * radius;
// bc_409eff
div.className = 'p_a';
div.style.transform = `translate(${x}px, ${y}px) rotate(${deg}deg) scale(2, 1)`;
div.innerText = arr[i];
idItemBox.append(div);
}
}
init();
/**
* 创建并下载图片
*/
async function domToImg() {
let idDemo = document.querySelector('#idDemo'),
dataUrl = await domtoimage.toPng(idDemo, 1),
a = document.createElement("a"),
filename = document.title,
event = new MouseEvent("click");
a.download = filename;
a.href = dataUrl;
a.dispatchEvent(event);
}