Vue项目，Dom元素转换成图片（手机访问时，可保存该图片）

原创已于 2022-03-31 10:36:19 修改 · 669 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue #javascript #前端 #html #css

于 2021-06-28 11:46:59 首次发布

vue 专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何利用html2canvas插件将网页DOM元素转换为图片。通过具体步骤指导读者下载安装、引入插件，并在项目中实现截图功能。文章包含代码示例，帮助理解如何配置参数以解决跨域等问题。

一、准备工作

1、下载插件

npm install html2canvas 或者 yarn add html2canvas

2、在使用到的项目中引入

import html2canvas from 'html2canvas';

二、页面使用

1、定义template模板

因为 html2canvas插件返回的是一串图片地址，要用到img标签。转换成功后之前的dom元素还存在，所以要做一些细微的判断

<div v-if="htmlUrl==''">
    <p>xxx</p>
</div>
<img :src="htmlUrl" />

2、data中定义数据

data () {
        return {
            htmlUrl:''
        }
    },

3、编写该函数

mounted(){
        this.images()
    },
    methods: {
        images(){
            let dom = document.getElementById("id");
            // 第一个参数是须要生成截图的元素,第二个是本身须要配置的参数,宽高等
                html2canvas(dom, {
                    backgroundColor: null,
                    useCORS: true // 解决文件跨域问题
                }).then((canvas) => {
                    let url = canvas.toDataURL('image/png');
                    this.htmlUrl = url;
                })
        }
    }