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

文章目录


准备

NPM下载指令

javascript 复制代码
npm install dom-to-image

框架加载

in ES6

javascript 复制代码
import domtoimage from 'dom-to-image';

in ES5

javascript 复制代码
var 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);
}
相关推荐
IT女孩儿1 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡2 小时前
commitlint校验git提交信息
前端
emmm4592 小时前
html兼容性问题处理
html
虾球xz3 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇3 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒3 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员3 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐3 小时前
前端图像处理(一)
前端
程序猿阿伟3 小时前
《智能指针频繁创建销毁:程序性能的“隐形杀手”》
java·开发语言·前端
疯狂的沙粒3 小时前
对 TypeScript 中函数如何更好的理解及使用?与 JavaScript 函数有哪些区别?
前端·javascript·typescript