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

文章目录

• 准备
• 版本二的效果图
• 版本一
• • html
  • JavaScript
• 版本二
• • html
  • JavaScript

---

准备

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_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);
}