---

准备

NPM下载指令

npm install dom-to-image

---

框架加载

in ES6

import domtoimage from 'dom-to-image';

in ES5

var domtoimage = require('dom-to-image');

---

CDN(标签)加载

案例

<script src="dist/dom-to-image.min.js"></script>

引入方式
src/dom-to-image.js
或
dist/dom-to-image.min.js”
方法返回domtoimage对象，对象中存有对应方法。
详细文档传送门

---

版本二的效果图

---

版本一

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

/*** 实现环形文字*/
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

<!-- 需要下载的元素标签 -->
<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

/*** 实现环形文字*/
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_409effdiv.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);
}