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);
}
相关推荐
清灵xmf11 分钟前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
小白学大数据17 分钟前
JavaScript重定向对网络爬虫的影响及处理
开发语言·javascript·数据库·爬虫
qq_3901617726 分钟前
防抖函数--应用场景及示例
前端·javascript
334554321 小时前
element动态表头合并表格
开发语言·javascript·ecmascript
John.liu_Test1 小时前
js下载excel示例demo
前端·javascript·excel
Yaml41 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事1 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶1 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
getaxiosluo1 小时前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
理想不理想v1 小时前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript