cdn引入html2canvas,并解决截图有空白问题

最新推荐文章于 2024-09-13 07:14:44 发布

前端技术负责人

最新推荐文章于 2024-09-13 07:14:44 发布

阅读量6.5k

点赞数

分类专栏： web前端文章标签： vue

本文链接：https://blog.csdn.net/weixin_43837268/article/details/95636808

版权

web前端专栏收录该内容

420 篇文章 10 订阅

订阅专栏

1.在index.html中cdn引入

    <!-- 图片生成 -->
    <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>

2.vue.config.js

  configureWebpack: {
        externals: {
            'html2canvas': 'html2canvas'
        },
        
    },

3.使用

<style>
    .noshow{
        position: absolute;
        top: 0;
        width: 100px;
        height: 100px;
        opacity: 1;
        .htmlToImage{
            background: #009a61;
            width: 100px;
            height: 100px;
            display: flex;
            justify-content: center;
            align-items: center;
            .activaty-keyword-box{
                font-size: 15px;
                font-weight: bold;
                color:#fff;
            }
        }
    }
<style>
<template>        
         <div class="noshow">
            <div class="canvasImg" ref="imageWrapper">
                <div class="htmlToImage">
                    <div class="activaty-keyword-box">{{activityKeyword}}</div>
                </div>
            </div>
            <img class="real_pic" :src="dataURL"/>
        </div>
        
</template>
<script>
//引入
import html2canvas from 'html2canvas'
mounted(){
        setTimeout(() => {
            //获取到当前元素的高度
            var getHeight=document.getElementsByClassName('activaty-box')[0].clientHeight;
            html2canvas(this.$refs.imageWrapper,{
                backgroundColor:null,
                y:getHeight
            }).then((canvas) => {
                let dataURL = canvas.toDataURL("image/png")
                this.dataURL = dataURL;
                console.log(this.dataURL);
           });
        }, 1000);
}
</script>