html2canvas生成图片出现白边儿的解决方法

性野喜悲

已于 2022-08-15 21:18:50 修改

阅读量3.9k

点赞数 1

分类专栏： vue html+css 文章标签： html5 vue.js html

于 2021-11-18 18:46:03 首次发布

本文链接：https://blog.csdn.net/leng0920/article/details/121400477

版权

vue 同时被 2 个专栏收录

133 篇文章 4 订阅

订阅专栏

html+css

113 篇文章 1 订阅

订阅专栏

主要代码:

backgroundColor: "#01257E",//颜色设置成和背景图片一样即可解决白边问题,如果为transparent则有白边

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <title>2021年度VR/AR企业图谱</title>
       <script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <style>
         body{
			 background: #06FFDF;
		 }
		 /* 生成按钮 */
		 .create-btn{
			 width: 200px;
			 height: 70px;
			 line-height: 70px;
			 text-align: center;
			 background: #fff;
			 border:1px solid #ccc;
			 color:  #06FFDF;
			 font-size: 40px;
			 margin: 0 auto 0 auto;
		 }
		 .create-btn-none{
			width: 200px;
			height: 70px;
			line-height: 70px;
			 text-align: center;
			 background: transparent;
			 border:1px solid transparent;
			 color:  transparent;
			  font-size: 40px;
			  margin: 0 auto 0 auto;
		 }
        /* 分享 */
        .poster-company-details-box {
            width: 300px;
            height: 464px !important;
            min-height:  464px !important;
        }

        .poster-company-bg {
            width: 100%;
            height: 100%;
        }

        .poster-company-details-cont {
            position: absolute;
            left: 20%;
            right: 0;
            top: 10%;
            bottom: 0;
            margin: auto;
            padding: 90px 18px 0 31px;
        }

        .poster-company-details-name,
        .poster-company-details-field {
            font-size: 12px;
            font-family: PingFangSC-Light, PingFang SC;
            font-weight: 300;
            color: #FFFFFF;
            line-height: 16px;
        }

        .poster-company-details-field {
            margin-top: 6px;
        }


        .poster-box,
        .poster-company-details-box {
          width: 300px;
          height: 464px !important;
          min-height:  464px !important;
            margin: 0 auto;
        }

        .poster-box img {
            width: 100%;
            display: block;
        }

        .poster-company-details-box-panel {
            height: 550px;
        }

        .company-details-close {
            position: relative;
        }

        .poster-text {
            position: absolute;
            top: 30%;
            left: 50%;
            transform: translateX(-50%);
            z-index: 100000000;
            width: 100%;
            text-align: center;
            font-size: 16px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #06FFDF;
            letter-spacing: 2px;
            display: block;
        }



      
    </style>
</head>

<body>
    <div id="app" v-cloak>
       
        <!-- 公司详情 -->
        <van-dialog class="company-details-panel com-dialog-style" v-model="showCompany" title=""
            :show-confirm-button="false" :show-cancel-button="false">
			<!-- 生成海报按钮 !poster判断显示是为了生成的时候避免按钮隐藏内容上移,div设置为透明可占位-->
			 <div  @click="generatePoster" :class="!poster?'create-btn':'create-btn-none'">{{!poster ?'生成海报' :''}}</div>
			 <!-- 海报内容 -->
            <div class="company-details-close com-white-close flex-center-end" @click="canelCompanyDialog">
                <span v-show="poster&&showCompany" class="poster-text">长按保存分享海报</span>
                <div class="white-close"></div>
            </div>
            <div>
                <div class="poster-company-details-box com-dialog-bg" v-show="!isShowCompany&&!poster">
                    <img src="https://eventimg.oss-cn-shenzhen.aliyuncs.com/micro_station/vr_ar/share_img.png?v=4"
                        crossorigin="*" alt="" class="poster-company-bg">
                    <div class="poster-company-details-cont">
                        <div class="poster-company-details-name">公司名称</div>
                        <div class="poster-company-details-field">所属领域：服务内容</div>
                 
                    </div>
                </div>
                <div class="poster-box flex-center-center" v-show="poster">
                    <img :src="poster" alt="">
                </div>
            </div>

        </van-dialog>
    </div>
</body>
<script src="https://unpkg.zhimg.com/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.10/lib/vant.min.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>

<script>
 
    const TL_APP = new Vue({
        el: '#app',
        data: {

            showCompany: true, //公司详情
            isShowCompany: true, //显示的是否为详情(为true显示详情,false显示分享海报)
            poster: ''
        },
        computed: {},
        watch: {

        },
        mounted() {},
        methods: {
            // 错误 token 会回调这个方法
            invalidTokenCallBack(e) {},
            // 返回上一页
             // 关闭公司简介弹框
                     canelCompanyDialog() {
                         this.showCompany = false;
                     },
            generatePoster() {
                this.isShowCompany = false;
                setTimeout(() => {
                    let widthTemp = document.querySelector(`.poster-company-details-box`).clientWidth;
                    let heightTemp = document.querySelector(`.poster-company-details-box`).clientHeight;
                    html2canvas(document.querySelector(`.poster-company-details-box`), {
                        useCORS: true,
                        scrollY: 0,
                        scrollX: 0,
                        backgroundColor: "#01257E",//颜色设置成和背景图片一样即可解决白边问题,如果为transparent则有白边
                        width: widthTemp,
                        height: heightTemp
                    }).then(canvas => {
                        this.poster = canvas.toDataURL('image/png');
                    })
                }, 100);

            },

         
         
         
        }
    })
</script>

</html>

效果图:

性野喜悲

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
html2canvas生成图片出现白边儿的解决方法

html:生成按钮:<div class="share-btn" @click="generatePoster">生成图片</div>海报内容: <div class="s-page" id="sPage" v-show="!poster"> <img src="https://eventimg.oss-cn-shenzhen.aliyuncs.com/micro_station/vr_ar/share_img.p.
复制链接

扫一扫