vue项目使用html2canvas实现截图

引入依赖

npm i html2canvas

 导入依赖

import html2canvas from 'html2canvas'

 

1: ref写哪里,就代表截取哪个容器下的所有内容

2: data-html2canvas-ignore 代表着 不计入截取范围, 如果你不想截取某部分,但是他又在容器里面

    可以加data-html2canvas-ignore 标签 (隐藏)

点击方法:

html2canva() {

            // 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等

            html2canvas(this.$refs.container, {

                backgroundColor: null, //画出来的图片有白色的边框,不要可设置背景为透明色（null）

                useCORS: true, //支持图片跨域

                scale: 1, //设置放大的倍数

            }).then((canvas) => {

                // 把生成的base64位图片上传到服务器,生成在线图片地址

                let url = canvas.toDataURL("image/png"); // toDataURL: 图片格式转成 base64

                this.imgUrl = url;

                //将图片下载到本地

                let a = document.createElement("a"); // 生成一个a元素

                let event = new MouseEvent("click"); // 创建一个单击事件

                a.download = name || "截图名称"; // 设置图片名称没有设置则为默认

                a.href = this.imgUrl; // 将生成的URL设置为a.href属性

                a.dispatchEvent(event); // 触发a的单击事件

            });

        },

附图