web之标签元素转换成图片、a标签元素下载图片、获取浏览器窗口名称、重命名、元素定位、旋转、拉伸文字、文字向心对齐

---

准备

NPM下载指令

npm install dom-to-image

---

框架加载

/* in ES 6 */
import domtoimage from 'dom-to-image';

/* in ES 5 */
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">1div>
	<div id="idItem" class="p_a fs_26 color_fff fw_800">5div>
	<div id="idItem" class="p_a fs_26 color_fff fw_800">2div>
	<div id="idItem" class="p_a fs_26 color_fff fw_800">8div>
	<div id="idItem" class="p_a fs_26 color_fff fw_800">9div>
	<div id="idItem" class="p_a fs_26 color_fff fw_800">6div>
	<div id="idItem" class="p_a fs_26 color_fff fw_800">8div>
	<div id="idItem" class="p_a fs_26 color_fff fw_800">2div>
	<div id="idItem" class="p_a fs_26 color_fff fw_800">5div>
	<div id="idItem" class="p_a fs_26 color_fff fw_800">1div>
	<div id="idItem" class="p_a fs_26 color_fff fw_800">7div>
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);
}