利用canvas截取图片再转成base64图片流【解决图片跨域问题】

0.最重要的话：后端设置！！！

//后端支持：图片要是cdn上的地址，并且允许图片跨域，header头中设置应为
Access-Control-Allow-Origin:  *

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.使用：切记去除'data:image/png;base64,'，否则后台无法读取！！！！！！！

<style>
    .noshow{
        position: absolute;
        top: 0;
        width: 100px;
        height: 150px;
        opacity: 1;
        z-index:1;
        .htmlToImage{
            background: #fff;
            width: 100px;
            height: 150px;
            display: flex;
            justify-content: center;
            align-items: center;
            .image-to-base64{
                height: 150px;
                width: 100px;
                object-fit: cover;
            }
        }
    }
    .real_pic{
        // display: none;
        z-index: 1;
        position: relative;
        top: 150px;
    }
<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('noshow')[0].clientHeight;
            html2canvas(this.$refs.imageWrapper,{
                            backgroundColor:null,
                            y:0,
                            useCORS: true,//允许跨域（图片跨域相关）
                            allowTaint: false, //允许跨域（图片跨域相关）
            }).then((canvas) => {
                let dataURL = canvas.toDataURL("image/png")
                //一定要去除头部，不然传递给后台无法读取
                this.dataURL = dataURL.replace('data:image/png;base64,', "");
                console.log(this.dataURL)
            });
        }, 500);
}
</script>