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的单击事件

            });

        },

附图

 

  • 0
    点赞
  • 1
    收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:深蓝海洋 设计师:CSDN官方博客 返回首页
评论
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值