vue2中通过html2canvas实现海报下载

海报下载预览图：

注意闭坑：
1. 海报底图需要处理成base64的格式才能正常下载（或使用项目中的图片资源）

<el-dialog title="海报分享" :visible.sync="isShowDialog" width="27%" :before-close="handleClose">

            <div class="content-container">

                <div class="top-img-container" :class="{ 'defaultBg': pullBgListPath && pullBgListPath.length <= 0 }"

                    ref="creditQrCodeShare"

                    :style="{ backgroundImage: curSelectBgImg.length <= 0 && !bgClickFlag ? 'url(' + require('@/assets/img/haibaobg.png') + ')' : 'url(' + 'data:image/png;base64,' + curSelectBgImg + ')' }">

                    <div class="top-container">

                        <div class="img-title-container">

                            <el-image class="img" v-if="curShareUserHeadPortrait && curShareUserHeadPortrait.length"

                                :src="'data:image/png;base64,' + curShareUserHeadPortrait"

                                :preview-src-list="['data:image/png;base64,' + curShareUserHeadPortrait]">

                            </el-image>

                            <img class="img" v-else src="@/assets/img/icon_role.png">

                            <span class="title">{{ curRowShareData.invite_name + '邀请您参加活动' }}</span>

                        </div>

                        <div class="date-slogan-container">

                            <div class="slogan-date">{{ curRowShareData.activity_name }}</div>

                            <div class="date-container">

                                <span class="label">活动日期：</span>

                                <span class="value">{{ curRowShareData.activity_start_time }}</span>

                            </div>

                            <div class="date-container">

                                <span class="label">结束日期：</span>

                                <span class="value">{{ curRowShareData.activity_end_time }}</span>

                            </div>

                        </div>

                    </div>

                    <div class="bottom-link-container">

                        <div class="left-code-container">

                            <el-image v-if="qrCode.length" class="left-img" :src="'data:image/png;base64,' + qrCode"

                                :preview-src-list="previewQrCode">

                            </el-image>

                            <img v-else class="left-img" src="@/assets/img/upload-image.png">

                            <div class="right-describe">

                                <span class="top-describe">黔程派活动</span>

                                <span class="bottom-describe">微信扫一扫参加活动</span>

                            </div>

                        </div>

                        <div class="center-link-containe">

                            <div class="line"></div>

                        </div>

                        <div class="right-link-container">

                            <span class="top-title">企业链接</span>

                            <span class="link live-link"

                                @click="copyCurValue('live-link')">http://www.baidu.com</span>

                        </div>

                    </div>

                </div>


                <div class="center-img-list-container" v-if="fileListBaseMap && fileListBaseMap.length">

                    <div class="img-item-container" @click="clickSwitchBg(item.url)"

                        v-for="( item, index ) in fileListBaseMap">

                        <img class="img" :src="'data:image/png;base64,' + item.url" :key="index">

                        <span class="del" @click="delBg(index)">×</span>

                    </div>

                </div>


                <div class="btn-container">

                    <div class="uploading-btn">

                        <el-upload class="upload-demo" :action="devImgPathPrefox" name="formFile"

                            :on-success="bgUploadSuccess" :on-preview="handlePreview" :on-remove="handleRemove"

                            :before-remove="beforeRemove" :on-exceed="handleExceed" :file-list="fileListBaseMap">

                            <el-button size="small" type="primary">上传图片</el-button>

                        </el-upload>

                    </div>

                    <div class="download-poster" @click="saveImage">下载海报</div>

                </div>

            </div>

        </el-dialog>



 // 下载直播海报

        saveImage() {

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

            html2canvas(this.$refs.creditQrCodeShare, {

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

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

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

                allowTaint: true,

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


                this.$message.success('下载完成');

            });

        },