dom-to-image是一个可以将任意DOM节点转换为用JavaScript编写的矢量(SVG)或光栅(PNG或JPEG)图像的库。 它基于Paul Bakaus的domvas并且已被完全重写,修复了一些错误并添加了一些新功能(如Web字体和图像支持)。
github:点击查看
线上demo:点击查看
npm安装和引用
npm install dom-to-image
import domtoimage from ‘dom-to-image‘;
domtoimage方法和属性
domtoimage主要的方法有:
domtoimage.toPng(...);将节点转化为png格式的图片
domtoimage.toJpeg(...);将节点转化为jpg格式的图片
domtoimage.toSvg(...);将节点转化为svg格式的图片,生成的图片的格式都是base64格式
domtoimage.toBlob(...);将节点转化为二进制格式,这个可以直接将图片下载
domtoimage.toPixelData(...);获取原始像素值,以Uint8Array 数组的形式返回,每4个数组元素表示一个像素点,即rgba值。这个方法也是挺实用的,可以用于WebGL中编写着色器颜色。
domtoimage主要的属性有:
filter : 过滤器节点中默写不需要的节点;
bgcolor : 图片背景颜色;
height, width : 图片宽高;
style :传入节点的样式,可以是任何有效的样式;
quality : 图片的质量,也就是清晰度;
cacheBust : 将时间戳加入到图片的url中,相当于添加新的图片;
imagePlaceholder : 图片生成失败时,在图片上面的提示,相当于img标签的alt;
实现代码
<template> <div id="pageDiv" :style="{‘padding-top‘:isWeiXin || isApps?‘0‘:‘3rem‘}"> <!-- 页面头部--> <header-com :poptitle="‘domtoimage截图‘" :type="‘doc_title‘" v-if="!isWeiXin && !isApps"></header-com> <!-- 页面的主要内容 --> <section class="content"> <div class="qr-code-box" id="my-node"> <vue-qr :logoSrc="config.logo" :text="config.value" class="qr-code-pic" :correctLevel="3" :margin="0" :dotScale="0.5" ></vue-qr> <button type="button" class="shot-btn" @click="shotPic">截图</button> <img :src="img" v-if="img" /> </div> </section> </div> </template> <script> import HeaderCom from "@/components/header"; //页面头部 import { changeUrl } from "@/utils/changeUrl"; import VueQr from ‘vue-qr‘; //二维码插件 import domtoimage from ‘dom-to-image‘ export default { data() { return { isWeiXin: TS_WEB.isWeiXin, isApps: TS_WEB.isApp, config: { value: "", logo: require("@/statics/images/system/sjbj.jpg") }, img: "" }; }, components: { HeaderCom, VueQr, domtoimage }, methods: { changeUrl, shotPic() { let node = document.getElementById(‘my-node‘); domtoimage.toPng(node) .then((dataUrl) => { this.img = dataUrl; }) .catch(function (error) { console.error(‘oops, something went wrong!‘, error); }); } }, mounted() { this.config.value = "https://www.baidu.com/"; }, created() { document.title = "domtoimage截图"; } }; </script> <style lang="less" scoped> // 盒子模型 #pageDiv { width: 100%; height: 100%; padding-top: 0; padding-bottom: 0; overflow: hidden; position: relative; box-sizing: border-box; .content { height: 100%; width: 100%; overflow: scroll; overflow-x: hidden; .qr-code-box { width: 100%; height: 100%; #new_img { width: 100%; display: block; } } } } </style>
效果预览