前言

之前的文章:vue基于html2canvas和jspdf 生成pdf 、解决jspdf中文乱码问题 简单介绍了html2canvas的基本使用,html2canvas 只能截取可视区域,对于含有滚动条的无法完全截取。后来发现还有一个dom-to-image的库可以支持,并且能够生成svgpngjpeg 3种格式,当然缺点是不支持safari,并且手机端上兼容性不好。

官方文档 ,不得不说有些库是真恶心,起个差不多的名字,找了半天才找到

安装

npm install dom-to-image

import domtoimage from 'dom-to-image';

主要方法和属性

方法:

  • domtoimage.toPng(…);将节点转化为png格式的图片
  • domtoimage.toJpeg(…);将节点转化为jpg格式的图片
  • domtoimage.toSvg(…);将节点转化为svg格式的图片,生成的图片的格式都是base64格式
  • domtoimage.toBlob(…);将节点转化为二进制格式,这个可以直接将图片下载
  • domtoimage.toPixelData(…);获取原始像素值,以Uint8Array 数组的形式返回,每4个数组元素表示一个像素点,即rgba值。这个方法也是挺实用的,可以用于WebGL中编写着色器颜色。

属性:

  • filter : 过滤器节点中默写不需要的节点;
  • bgcolor : 图片背景颜色;
  • height, width : 图片宽高;
  • style :传入节点的样式,可以是任何有效的样式;
  • quality : 图片的质量,也就是清晰度;一个介于 0 和 1 之间的数字,表示 JPEG 图像的图像质量(例如 0.92 => 92%)。默认为 1.0 (100%)
  • cacheBust : 将时间戳加入到图片的url中,相当于添加新的图片;
  • imagePlaceholder : 图片生成失败时,在图片上面的提示,相当于img标签的alt;

使用

png

<template>
    <div>
        <div style="padding:50px;width:500px;border:1px solid red;" id="test">
            <p>我是p标签</p>
            <h1>我是h1标签</h1>
            <div>我是div标签</div>
            <img src="./11.jpg" style="width:200px;" />
        </div>
        <el-button type="primary" @click="createImage">生成图片</el-button>

        <div style="width:500px;height:200px;margin-top:20px;border:1px solid red;">
            <p>生成的图片</p>
            <img :src="dataUrl" style="width:200px;" />
        </div>
    </div>
</template>

<script>
import domtoimage from 'dom-to-image'
export default {
    data() {
        return {
            dataUrl: ''
        }
    },
    methods: {
        createImage() {
            let node = document.getElementById('test');
            let that = this
            domtoimage.toPng(node)
                .then(function (dataUrl) {
                    //console.log(dataUrl)
                    that.dataUrl = dataUrl
                })
                .catch(function (error) {
                    console.error('生成失败', error);
                });

        }
    }
}
</script>

效果
在这里插入图片描述

其他格式

代码同png,用对应的方法即可

属性

filter

createImage() {
    let node = document.getElementById('test');
    let that = this
    domtoimage.toPng(node, { filter: that.filterTag })
        .then(function (dataUrl) {
            console.log(dataUrl)
            that.dataUrl = dataUrl
        })
        .catch(function (error) {
            console.error('生成失败', error);
        });
},
filterTag(node) {
    console.log(node, node.tagName)
    return node.tagName == 'IMG'
}

注意:先打印一下标签名,一开始以为图片就是img结果是IMG
在这里插入图片描述

bgcolor

domtoimage.toPng(node, { bgcolor: '#ddd' })
 .then(function (dataUrl) {
     console.log(dataUrl)
     that.dataUrl = dataUrl
     // FileSaver.saveAs(dataUrl, 'a.png');
 })
 .catch(function (error) {
     console.error('生成失败', error);
 });

在这里插入图片描述

其他略,没有尝试

下载图片

需要借助:file-saver,基本使用见:FileSaver.js的简单使用

示例:

<template>
    <div>
        <div style="padding:50px;width:500px;border:1px solid red;" id="test">
            <p>我是p标签</p>
            <h1>我是h1标签</h1>
            <div>我是div标签</div>
            <img src="./11.jpg" style="width:200px;" />
        </div>
        <el-button type="primary" @click="createImage">生成图片</el-button>
        <div style="width:500px;height:200px;margin-top:20px;border:1px solid red;">
            <p>生成的图片</p>
            <img :src="dataUrl" style="width:200px;" />
        </div>
    </div>
</template>

<script>
import domtoimage from 'dom-to-image'
import FileSaver from 'file-saver';
export default {
    data() {
        return {
            dataUrl: ''
        }
    },
    methods: {
        createImage() {
            let node = document.getElementById('test');
            let that = this
            domtoimage.toPng(node)
                .then(function (dataUrl) {
                    console.log(dataUrl)
                    that.dataUrl = dataUrl
                    FileSaver.saveAs(dataUrl, 'a.png');
                })
                .catch(function (error) {
                    console.error('生成失败', error);
                });
        },
    }
}
</script>
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐