uniapp开发app，怎么将网络路径的图片生成canvas图片？

Question

图中的头像部分是通过后端请求来的图片，
现在我需要将整个卡片生成canvas图片，但是生成之后，其中的图片头像部分图片丢失了。
网上搜了很多，说是要把网路路径的图片转换为本地路径
这个具体要怎么转换呢？有没大佬遇到过类似的问题，救救孩子吧 \~^~/

Answer 1

<template>
    <view class="housekeepers" :style="'padding-top:' + height + 'px'">
        <myNavbars color="default">
            <view class="header">
                <view class="left item" @tap="back">
                    <view class="back">
                        <u-icon name="arrow-left" size="20" color="#fff"></u-icon>
                    </view>
                </view>
                <view class="title item" style="color: #fff">
                    <view class="txt">家政员简历</view>
                </view>
                <view class="right item">
                    <view class="more" style="color: #fff" ></view>
                </view>
            </view>
        </myNavbars>
        
        
        <view class="content">
            <view class="bm-info-container">
                <view class="header allBackGroundColor" :style="'background-color:' + zhutiColor">
                    <view class="content">
                        <view class="avater" v-if="housekeeperDetails.cover_info">
                            <u--image :src="housekeeperDetails.cover_info.url" width="110px" height="140px"></u--image>
                        </view>
                        <view class="avater" v-if="!housekeeperDetails.cover_info">
                            <u--image src="" width="110px" height="140px"></u--image>
                        </view>
                        <view class="bm-info">
                            <view class="names">
                                <view class="name">
                                    <view class="title">
                                        {{ housekeeperDetails.truename }}家政员
                                    </view>
                                    <view style="display: flex; flex-wrap: wrap;">
                                        <view>
                                            <!-- <van-tag color="orange" style="margin-right: 5px;">
                                                <span>{{  }}</span>
                                            </van-tag> -->
                                        </view>
                                        <!-- <van-tag type="success">{{  }}</van-tag> -->
                                    </view>
                                </view>
                                <view class="number" v-if="false">编号：</view>
                            </view>
                            <view class="info1">
                                <view class="item">
                                    <span>学历：</span>
                                    <span>{{ qualificationName }}</span>
                                </view>
                                <view class="item">
                                    <span>民族：</span>
                                    <span>{{ nationName }}</span>
                                </view>
                                <view class="item">
                                    <span>星座：</span>
                                    <span>{{ constellationName }}</span>
                                </view>
                                <view class="item">
                                    <span>属相：</span>
                                    <span>{{ animalsName }}</span>
                                </view>
                                <view class="item">
                                    <span>身高：</span>
                                    <span>{{ housekeeperDetails.shengao }}</span>
                                </view>
                                <view class="item">
                                    <span>体重：</span>
                                    <span>{{ housekeeperDetails.tizhong }}</span>
                                </view>
                                <view class="item">
                                    <span>城市：</span>
                                    <span>{{ areaName }}</span>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view class="headerFooter">
                        <view class="item">
                            <p>
                                <span>{{ housekeeperDetails.nianling }}</span>
                                <span>岁</span>
                            </p>
                            <p>年龄</p>
                        </view>
                        <view class="item">
                            <p>
                                <span>{{ housekeeperDetails.yw_gongzuo_years }}</span>
                                <span>年</span>
                            </p>
                            <p>经验</p>
                        </view>
                        <view class="item">
                            <p>
                                <span>{{ originName }}</span>
                            </p>
                            <p>籍贯</p>
                        </view>
                    </view>
                </view>
                <view class="contentItems">
                    <view class="items">
                        <view class="icons">
                            <view class="ic">
                                <!-- <van-icon class-prefix="iconfont icon-fuwubaozhang" name="extra" /> -->
                            </view>
                            <view class="title"><h3>服务保障</h3></view>
                        </view>
                        <view class="content service">
                            <view class="item">
                                <view class="ic">
                                    <!-- <van-icon class-prefix="iconfont icon-jiankangtiaochabiao" name="extra" /> -->
                                </view>
                                <span>健康证</span>
                            </view>
                            <view class="item">
                                <view class="ic">
                                    <!-- <van-icon class-prefix="iconfont icon-tiaocha" name="extra" /> -->
                                </view>
                                <span>背景调查</span>
                            </view>
                            <view class="item">
                                <view class="ic">
                                    <!-- <van-icon class-prefix="iconfont icon-peixun" name="extra" /> -->
                                </view>
                                <span>鉴定培训</span>
                            </view>
                            <view class="item">
                                <view class="ic">
                                    <!-- <van-icon class-prefix="iconfont icon-zhiyejinengjianding" name="extra" /> -->
                                </view>
                                <span>技能考核</span>
                            </view>
                        </view>
                    </view>
                    <view class="items">
                        <view class="icons salarys">
                            <view class="iconSalary">
                                <view class="ic">
                                    <!-- <van-icon class-prefix="iconfont icon-swticonjiazhengyuan" name="extra" /> -->
                                </view>
                                <view class="title"><h3>求职意向</h3></view>
                            </view>
                            <view class="salary"  v-if="housekeeperDetails.is_show_qiwang_xinzi === '1'">{{ housekeeperDetails.qiwang_xinzi_min }} ~ {{ housekeeperDetails.qiwang_xinzi_max }} 元 / 月</view>
                        </view>
                        <view class="content intention">
                            <view class="item">
                                <span>保姆类型：</span>
                                <span>{{ housekeeperType.toString() }}</span>
                            </view>
                            <view class="item">
                                <span>保姆技能：</span>
                                <span>{{ housekeeperTechnique.toString() }}</span>
                            </view>
                            <view class="item">
                                <span>保姆语言：</span>
                                <span>{{ housekeeperLanguage.toString() }}</span>
                            </view>
                            <view class="item">
                                <span>保姆证书：</span>
                                <span>{{ housekeeperCertificate.toString() }}</span>
                            </view>
                            <view class="item">
                                <span>工作时间：</span>
                                <span>{{ atHomeName }}</span>
                            </view>
                        </view>
                    </view>
                    <view class="items">
                        <view class="icons">
                            <view class="ic">
                                <!-- <van-icon class-prefix="iconfont icon-jieshao" name="extra" /> -->
                            </view>
                            <view class="title"><h3>保姆介绍</h3></view>
                        </view>
                        <view class="content intention">
                            <view class="item" style="width: 100%; display: flex;">
                                <h4>【工作类型】</h4>{{ housekeeperType.toString() }}
                            </view>
                            <view class="item" style="width: 100%; display: flex;">
                                <h4>【专业技能】</h4>{{ housekeeperTechnique.toString() }}
                            </view>
                            <view class="item" style="width: 100%; display: flex;">
                                <h4>【自我介绍】</h4>{{ housekeeperDetails.summery }}
                            </view>
                            <view class="item">
                                <h4>【培训经历】</h4>
                                <view 
                                    style="display: inline-block;padding: 0 10px;"
                                    v-for="(item, index) in trainList"
                                    :key="index"
                                >
                                    <p style="display: block;">
                                        {{ index+1 }}、{{ item.company_title }}
                                        <span style="margin-left: 10px;">{{ item.begin_year }}年{{ item.begin_month }}月-至{{ item.end_year }}年{{ item.end_month }}月</span>
                                    </p>
                                    <span>{{ item.content }}</span>。
                                </view>
                            </view>
                            <view class="item">
                                <h4>【工作经历】</h4>
                                <view 
                                    style="display: inline-block;padding: 0 10px;"
                                    v-for="(item, index) in workExprienceList"
                                    :key="index"
                                >
                                    <p style="display: block;">
                                        {{ index+1 }}、{{ item.company_title }}
                                        <span style="margin-left: 10px;">{{ item.begin_year }}年{{ item.begin_month }}月-至{{ item.end_year }}年{{ item.end_month }}月</span>
                                    </p>
                                    <span>{{ item.content }}</span>。
                                </view>
                            </view>
                            <view class="item" style="width: 100%; display: flex;">
                                <h4>【工作时间】</h4>{{ atHomeName }}
                            </view>
                            <view class="item" style="width: 100%; display: flex;">
                                <h4>【常住地址】</h4>{{ areaName + housekeeperDetails.address }}
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <!-- <view class="qr-box" v-show="qrShow">
                <view class="qrTitle">
                    <view class="title">扫描识别二维码</view>
                    <view class="title">查看完整简历信息</view>
                </view>
                <view class="imgs">
                    <uqrcode 
                        ref="uqrcode" 
                        canvas-id="qrcode" 
                        :value="`${this.h5_url}#/housekeeper/resume?mdsn=${this.mdsn}&house_keeper_id=${this.house_keeper_id}`" 
                        :options="{ margin: 10,  }"
                        size="100"
                    ></uqrcode>
                </view>
            </view>     -->
            
            <view class="bm-info-container">
                <view class="contentItems contentItemn">
                    <view class="items">
                        <view class="icons">
                            <view class="icon">
                                <view class="ic">
                                    <!-- <van-icon class-prefix="iconfont icon-fengcaizhanshi" name="extra" /> -->
                                </view>
                            </view>
                            <view class="title"><h3>内部可见照片</h3></view>
                        </view>
                        <view class="content">
                            <view
                                class="item"
                                v-for="(item, index) in interiorFileList"
                                :key="index"
                            >
                                <u--image :src="item.url" @click="seeImage(interiorFileList, index)" width="80px" height="80px" />
                            </view>
                        </view>
                    </view>
                    <view class="items">
                        <view class="icons">
                            <view class="icon">
                                <view class="ic">
                                    <!-- <van-icon class-prefix="iconfont icon-fengcaizhanshi" name="extra" /> -->
                                </view>
                            </view>
                            <view class="title"><h3>月子餐照片</h3></view>
                        </view>
                        <view class="content">
                            <view
                                class="item"
                                v-for="(item, index) in confineMealFileList"
                                :key="index"
                            >
                                <u--image :src="item.url" @click="seeImage(confineMealFileList, index)" width="80px" height="80px" />
                            </view>
                        </view>
                    </view>
                    <view class="items">
                        <view class="icons">
                            <view class="icon">
                                <view class="ic">
                                    <!-- <van-icon class-prefix="iconfont icon-fengcaizhanshi" name="extra" /> -->
                                </view>
                            </view>
                            <view class="title"><h3>体检照片</h3></view>
                        </view>
                        <view class="content">
                            <view
                                class="item"
                                v-for="(item, index) in checkupFileList"
                                :key="index"
                            >
                                <u--image :src="item.url" @click="seeImage(checkupFileList, index)" width="80px" height="80px" />
                            </view>
                        </view>
                    </view>
                    <view class="items">
                        <view class="icons">
                            <view class="icon">
                                <view class="ic">
                                    <!-- <van-icon class-prefix="iconfont icon-fengcaizhanshi" name="extra" /> -->
                                </view>
                            </view>
                            <view class="title"><h3>工作生活照</h3></view>
                        </view>
                        <view class="content">
                            <view
                                class="item"
                                v-for="(item, index) in workLifeFileList"
                                :key="index"
                            >
                                <u--image :src="item.url" @click="seeImage(workLifeFileList, index)" width="80px" height="80px" />
                            </view>
                        </view>
                    </view>
                    <view class="items">
                        <view class="icons">
                            <view class="icon">
                                <view class="ic">
                                    <!-- <van-icon class-prefix="iconfont icon-fengcaizhanshi" name="extra" /> -->
                                </view>
                            </view>
                            <view class="title"><h3>资格证照片</h3></view>
                        </view>
                        <view class="content">
                            <view
                                class="item"
                                v-for="(item, index) in qualificationFileList"
                                :key="index"
                            >
                                <u--image :src="item.url" @click="seeImage(qualificationFileList, index)" width="80px" height="80px" />
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="footers">
                <view class="btn">
                    <view class="txt allBackGroundColor" @click="toCreditQuery">
                        <u--image  :src="require('@/static/credit.png')" width="22px" height="22px"></u--image>
                        <view>信用查询</view>
                    </view>
                    <view class="txt allBackGroundColor" @click="editResume">
                        <u--image  :src="require('@/static/edits.png')" width="22px" height="22px"></u--image>
                        <view>编辑简历</view>
                    </view>
                    <!-- <view class="txt allBackGroundColor" @click="followEvaluation">
                        <u--image  :src="require('@/static/follow.png')" width="22px" height="22px"></u--image>
                        <span>跟进评价</span>
                    </view> -->
                    <view 
                        class="txt allBackGroundColor"
                        @click="shares"
                    >
                        <u--image  :src="require('@/static/share.png')" width="22px" height="22px"></u--image>
                        <view>分享简历</view>
                    </view>          
                </view>
            </view>
        </view>
        
        
        
        
        <!-- 用来生成canvas的html结构 -->
        <view class="content content2" id="canvarsHtml2">
            <view class="bm-info-container" id="canvarsHtml">
                <view class="header allBackGroundColor" :style="'background-color:' + zhutiColor">
                    <view class="content">
                        <view class="avater" v-if="housekeeperDetails.cover_info">
                            <u--image :showLoading="true" :src="housekeeperDetails.cover_info.url" width="110px" height="140px"></u--image>
                        </view>
                        <view class="bm-info">
                            <view class="names">
                                <view class="name">
                                    <view class="title">
                                        {{ housekeeperDetails.truename }}家政员
                                    </view>
                                    <view style="display: flex; flex-wrap: wrap;">
                                        <view>
                                            <!-- <van-tag color="orange" style="margin-right: 5px;">
                                                <span>{{  }}</span>
                                            </van-tag> -->
                                        </view>
                                        <!-- <van-tag type="success">{{  }}</van-tag> -->
                                    </view>
                                </view>
                                <view class="number" v-if="false">编号：</view>
                            </view>
                            <view class="info1">
                                <view class="item">
                                    <span>学历：</span>
                                    <span>{{ qualificationName }}</span>
                                </view>
                                <view class="item">
                                    <span>民族：</span>
                                    <span>{{ nationName }}</span>
                                </view>
                                <view class="item">
                                    <span>星座：</span>
                                    <span>{{ constellationName }}</span>
                                </view>
                                <view class="item">
                                    <span>属相：</span>
                                    <span>{{ animalsName }}</span>
                                </view>
                                <view class="item">
                                    <span>身高：</span>
                                    <span>{{ housekeeperDetails.shengao }}</span>
                                </view>
                                <view class="item">
                                    <span>体重：</span>
                                    <span>{{ housekeeperDetails.tizhong }}</span>
                                </view>
                                <view class="item">
                                    <span>城市：</span>
                                    <span>{{ areaName }}</span>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view class="headerFooter">
                        <view class="item">
                            <p>
                                <span>{{ housekeeperDetails.nianling }}</span>
                                <span>岁</span>
                            </p>
                            <p>年龄</p>
                        </view>
                        <view class="item">
                            <p>
                                <span>{{ housekeeperDetails.yw_gongzuo_years }}</span>
                                <span>年</span>
                            </p>
                            <p>经验</p>
                        </view>
                        <view class="item">
                            <p>
                                <span>{{ originName }}</span>
                            </p>
                            <p>籍贯</p>
                        </view>
                    </view>
                </view>
                <view class="contentItems">
                    <view class="items">
                        <view class="icons salarys">
                            <view class="iconSalary">
                                <view class="ic">
                                    <!-- <van-icon class-prefix="iconfont icon-swticonjiazhengyuan" name="extra" /> -->
                                </view>
                                <view class="title"><h3>求职意向</h3></view>
                            </view>
                            <view class="salary"  v-if="housekeeperDetails.is_show_qiwang_xinzi === '1'">{{ housekeeperDetails.qiwang_xinzi_min }} ~ {{ housekeeperDetails.qiwang_xinzi_max }} 元 / 月</view>
                        </view>
                        <view class="content intention">
                            <view class="item">
                                <span>保姆类型：</span>
                                <span>{{ housekeeperType.toString() }}</span>
                            </view>
                            <view class="item">
                                <span>保姆技能：</span>
                                <span>{{ housekeeperTechnique.toString() }}</span>
                            </view>
                            <view class="item">
                                <span>保姆语言：</span>
                                <span>{{ housekeeperLanguage.toString() }}</span>
                            </view>
                            <view class="item">
                                <span>保姆证书：</span>
                                <span>{{ housekeeperCertificate.toString() }}</span>
                            </view>
                            <view class="item">
                                <span>工作时间：</span>
                                <span>{{ atHomeName }}</span>
                            </view>
                        </view>
                    </view>
                    <view class="items">
                        <view class="icons">
                            <view class="ic">
                                <!-- <van-icon class-prefix="iconfont icon-jieshao" name="extra" /> -->
                            </view>
                            <view class="title"><h3>保姆介绍</h3></view>
                        </view>
                        <view class="content intention">
                            <view class="item" style="width: 100%; display: flex;">
                                <h4>【工作类型】</h4>{{ housekeeperType.toString() }}
                            </view>
                            <view class="item" style="width: 100%; display: flex;">
                                <h4>【专业技能】</h4>{{ housekeeperTechnique.toString() }}
                            </view>
                            <view class="item" style="width: 100%; display: flex;">
                                <h4>【自我介绍】</h4>{{ housekeeperDetails.summery }}
                            </view>
                            <view class="item">
                                <h4>【培训经历】</h4>
                                <view 
                                    style="display: inline-block;padding: 0 10px;"
                                    v-for="(item, index) in trainList"
                                    :key="index"
                                >
                                    <p style="display: block;">
                                        {{ index+1 }}、{{ item.company_title }}
                                        <span style="margin-left: 10px;">{{ item.begin_year }}年{{ item.begin_month }}月-至{{ item.end_year }}年{{ item.end_month }}月</span>
                                    </p>
                                    <span>{{ item.content }}</span>。
                                </view>
                            </view>
                            <view class="item">
                                <h4>【工作经历】</h4>
                                <view 
                                    style="display: inline-block;padding: 0 10px;"
                                    v-for="(item, index) in workExprienceList"
                                    :key="index"
                                >
                                    <p style="display: block;">
                                        {{ index+1 }}、{{ item.company_title }}
                                        <span style="margin-left: 10px;">{{ item.begin_year }}年{{ item.begin_month }}月-至{{ item.end_year }}年{{ item.end_month }}月</span>
                                    </p>
                                    <span>{{ item.content }}</span>。
                                </view>
                            </view>
                            <view class="item" style="width: 100%; display: flex;">
                                <h4>【工作时间】</h4>{{ atHomeName }}
                            </view>
                            <view class="item" style="width: 100%; display: flex;">
                                <h4>【常住地址】</h4>{{ areaName + housekeeperDetails.address }}
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="qr-box">
                <view class="qrTitle">
                    <view class="title">扫描识别二维码</view>
                    <view class="title">查看完整简历信息</view>
                </view>
                <view class="imgs">
                    <uqrcode
                        v-if="tempQrcode == ''"
                        ref="uqrcode" 
                        canvas-id="qrcode" 
                        :value="`${this.h5_url}#/housekeeper/resume?mdsn=${this.mdsn}&house_keeper_id=${this.house_keeper_id}`" 
                        :options="{ margin: 10,  }"
                        size="100"
                    ></uqrcode>
                    <img style="width: 100px;height: 100px;" v-if="tempQrcode !== ''" :src="tempQrcode" />
                </view>
            </view>    
        </view>
        
        <!-- 用来生成canvas的html结构 -->
        <view class="content3" id="canvarsHtml3">
            <view class="avaters" v-if="housekeeperDetails.cover_info">
                <u--image :showLoading="true" :src="housekeeperDetails.cover_info.url" width="110px" height="140px"></u--image>
            </view>
            <view class="infos">
                <view class="item">
                    <view class="txt">{{ housekeeperDetails.truename }}家政员</view>
                    <view class="txt">{{ areaName }}</view>
                    <view class="txt">{{ housekeeperDetails.nianling }}岁</view>
                    <view class="txt">{{ housekeeperDetails.yw_gongzuo_years }}经验</view>
                </view>
                <view class="item">
                    <view class="txt">{{ housekeeperType.toString() }}</view>
                </view>
                <u-divider></u-divider>
                <view class="item qrcode">
                    <view class="qrTitle">
                        <view class="title">扫描二维码获取</view>
                        <view class="title">家政员更多信息</view>
                    </view>
                    <view class="imgs">
                        <!-- <uqrcode
                            v-if="tempQrcode == ''"
                            ref="uqrcode" 
                            canvas-id="qrcode"
                            :value="`${this.h5_url}#/housekeeper/resume?mdsn=${this.mdsn}&house_keeper_id=${this.house_keeper_id}`" 
                            :options="{ margin: 10,}"
                            size="100"
                        ></uqrcode> -->
                        <uqrcode
                            v-if="tempQrcode === ''"
                            ref="uqrcode"
                            canvas-id="qrcode"
                            :value="`${this.h5_url}#/housekeeper/resume?mdsn=${this.mdsn}&house_keeper_id=${this.house_keeper_id}`" 
                            :options="{ margin: 10,}"
                            size="100"
                        ></uqrcode>
                        <img style="width: 100px;height: 100px;" v-if="tempQrcode !== ''" :src="tempQrcode" />
                    </view>
                </view>
            </view>
        </view>
        
        
        
        
        <!-- 底部分享 -->
        <u-popup
            class="shares"
            :show="showShare" 
            @close="showShare = false" 
            :safeAreaInsetBottom="true"
        >
            <view class="main">
                <view class="content">
                    <view class="title">分享链接</view>
                    <view class="itemsurl">
                        <view class="item">
                            <view class="imgs" @click="shareWechatUrl">
                                <u--image :showLoading="true" :src="require('@/static/wechat.png')" width="26px" height="26px"></u--image>
                                <view class="imgsTiel">链接</view>
                            </view>
                            <view class="txt">微信</view>
                        </view>
                        <view class="item">
                            <view class="imgs" @click="shareWechatFriendUrl">
                                <u--image :showLoading="true" :src="require('@/static/friends.png')" width="26px" height="26px"></u--image>
                                <view class="imgsTiel">链接</view>
                            </view>
                            <view class="txt">朋友圈</view>
                        </view>
                        <view class="item">
                            <view class="imgs" @click="shareResume">
                                <u--image :showLoading="true" :src="require('@/static/urls.png')" width="26px" height="26px"></u--image>
                                <view class="imgsTiel">链接</view>
                            </view>
                            <view class="txt">复制简历链接</view>
                        </view>
                    </view>
                    <view class="title">
                        <view>分享海报</view>
                        <view 
                            class="preSee"
                            @click="preview"
                            :msg="tempQrcode"
                            :change:msg="canvasImage.generateImage"
                        >
                            点击预览
                        </view>
                        <!-- <view class="preSee" @click="canvasImage.generateImage">点击预览</view> -->
                    </view>
                    <view class="itemsurl">
                        <view class="item">
                            <view class="imgs" @click="shareBillWechat">
                                <u--image :showLoading="true" :src="require('@/static/wechat.png')" width="26px" height="26px"></u--image>
                                <view class="imgsTiel">海报</view>
                            </view>
                            <view class="txt">分享海报到微信</view>
                        </view>
                        <view class="item">
                            <view class="imgs" @click="shareBillWechatFriend">
                                <u--image :showLoading="true" :src="require('@/static/friends.png')" width="26px" height="26px"></u--image>
                                <view class="imgsTiel">海报</view>
                            </view>
                            <view class="txt">分享海报到朋友圈</view>
                        </view>
                        <!-- @click="canvasImage.downloadImage" -->
                        <!-- :msg="tempQrcode"
                        :change:msg="canvasImage.downloadImage" -->
                        <view 
                            class="item"
                            :posterUrl="posterUrl"
                            :change:posterUrl="canvasImage.getPosterUrl"
                            @click="canvasImage.downloadImage"
                        >
                            <view class="imgs">
                                <u--image :showLoading="true" :src="require('@/static/download.png')" width="26px" height="26px"></u--image>
                                <view class="imgsTiel">下载</view>
                            </view>
                            <view class="txt">下载海报</view>
                        </view>
                    </view>
                </view>
            </view>
            <u-divider></u-divider>
            <view class="cancel" @click="cancel">取消</view>
        </u-popup>
        
        
        
        
        <!-- 预览海报 -->
        <u-overlay class="bills" :show="showBill" @click="showBill = false">
            <view class="warp">
                <view class="content">
                    <view class="tabs">
                        <view :class="showBillIndex === '1' ? 'itemactive item' : 'item'" @tap.stop="changeResumeBill('1')">详版简历</view>
                        <view :class="showBillIndex === '2' ? 'itemactive item' : 'item'" @tap.stop="changeResumeBill('2')">简版简历</view>
                    </view>
                    <view class="imgs" v-show="showBillIndex === '1'">
                        <u-loading-icon v-if="posterUrl === ''" :style="posterUrl === '' ? '' : 'width: 0px'" color="gray"></u-loading-icon>
                        <img 
                            v-if="posterUrl" 
                            :src="posterUrl" 
                            @tap.stop="seeImage([{url: posterUrl}], 1)"
                        />
                    </view>
                    <view class="imgs" v-show="showBillIndex === '2'">
                        <u-loading-icon v-if="posterUrl2 === ''" :style="posterUrl2 === '' ? '' : 'width: 0px'" color="gray"></u-loading-icon>
                        <img 
                            v-if="posterUrl2" 
                            :src="posterUrl2" 
                            @tap.stop="seeImage([{url: posterUrl2}], 1)" 
                        />
                    </view>
                </view>
            </view>
        </u-overlay>
        
        <u-toast ref="uToast"></u-toast>
        
    </view>
</template>

<script>
    import { uQRCode } from 'uqrcodejs'
    import { pathToBase64, base64ToPath } from '../../../js_sdk/mmmm-image-tools/index.js';
    import housekeeperHttp from '@/api/housekeeper/index.js'
    import publicHttp from '@/api/public/index.js'
    export default {
        data() {
            return {
                height: uni.getStorageSync('navbarHeight'),
                zhutiColor: this.$common.zhuti,
                house_keeper_id: '',        //家政员id
                h5_url: '',                    
                housekeeperDetails: {        //家政员详情数据
                    
                },
                qualificationName: '',    //学历
                nationName: '',            //民族
                constellationName: '',    //星座
                animalsName: '',        //属相
                areaName: '',            //城市、常住地址、现住地址
                originName: '',            //籍贯
                housekeeperType: [],    //家政员类型
                housekeeperTechnique: [],    //家政员技能
                housekeeperLanguage: [],    //家政员语言
                housekeeperCertificate: [],    //家政员证书
                atHomeName: '',            //住家情况
                workExprienceList: [],    //工作经历
                trainList: [],            //培训经历
                confineMealFileList: [],    //月子餐照片列表
                checkupFileList: [],    //体检照片列表
                workLifeFileList: [],    //工作生活照
                qualificationFileList: [],    //资格证照片
                interiorFileList: [],    //内部照片
                showShare: false,        //显示分享选择弹窗
                showBill: false,        //显示海报预览
                showBillIndex: '1',        //点击海报的下标
                posterUrl: '',            //详细海报canvas1
                posterUrl2: '',            //简单海报canvas2
                qrShow: false,            //二维码显示
                tempQrcode: '',            //二维码临时地址
                showBase64: false,        //二维码base64地址下载成功
                types: '',                //是否还没生成canvas就下载
            }
        },
        onLoad(options) {
            this.init(options)
        },
        onReady() {
            // // 用与生成二维码，确保在canvas绘制之前已经生成
            this.qrFun(`${this.h5_url}#/housekeeper/resume?mdsn=${this.mdsn}&house_keeper_id=${this.house_keeper_id}`)
        },
        methods: {
            init(options) {
                this.house_keeper_id = options.keeper_id
                this.h5_url = options.h5_url
                this.mdsn = options.mdsn
                // 用与生成二维码，确保在canvas绘制之前已经生成
                // this.qrFun(`${this.h5_url}#/housekeeper/resume?mdsn=${this.mdsn}&house_keeper_id=${this.house_keeper_id}`)
                this.getHousekeeperDetail()
            },
            back() {
                uni.navigateBack()
            },
            getHousekeeperDetail() {
                housekeeperHttp.getHousekeeperDetail({id: this.house_keeper_id}).then(res => {
                    console.log('家政员详情', res)
                    this.housekeeperDetails = this.$common.deepClone(res.data.keeper.houseKeeper)
                    this.getQualificationName(res.data.keeper.houseKeeper.xueli)    //计算学历
                    this.getNationName(res.data.keeper.houseKeeper.mingzu)            //计算民族
                    this.getConstellationName(res.data.keeper.houseKeeper.mingzu)    //计算星座
                    this.getAnimalsName(res.data.keeper.houseKeeper.shuxiang)        //计算属相
                    this.getAreaName(res.data.keeper.houseKeeper.province, res.data.keeper.houseKeeper.area, 1)    //计算城市、常住地址、现住地址
                    this.getAreaName(res.data.keeper.houseKeeper.jiguan_province, res.data.keeper.houseKeeper.jiguan_area, 2)    //计算籍贯
                    this.getHousekeeperTypeList(res.data.keeper.houseKeeper.yw_types)    //家政员类型
                    this.getTechniqueList(res.data.keeper.houseKeeper.yw_jinengs)    //家政员技能
                    this.getLanaugeName(res.data.keeper.houseKeeper.yw_putonghua)    //家政员语言
                    this.getCertificateList(res.data.keeper.houseKeeper.yw_zhengshu)    //家政员证书
                    this.getAtHomeName(res.data.keeper.houseKeeper.yw_zhujia)        //住家情况
                    this.getGoThroughList('1')                                        //工作经历
                    this.getGoThroughList('2')                                        //培训经历
                    this.getPhotoFileList('1')                                        //月子餐照片
                    this.getPhotoFileList('2')                                        //体检照片
                    this.getPhotoFileList('3')                                        //工作生活照
                    this.getPhotoFileList('4')                                        //资格证照片
                    this.getPhotoFileList('5')                                        //内部可见照片
                })
            },
            getQualificationName(id) {
                let qualificationData = this.$common.deepClone(this.$common.params.xueli)    //学历
                qualificationData.forEach((item, index) => {
                    if(item.key === id) {
                        this.qualificationName = item.title
                    }
                })
            },
            getNationName(id) {
                let nationData = this.$common.deepClone(this.$common.params.mingzu)    // 民族
                nationData.forEach((item, index) => {
                    if(item.key === id) {
                        this.nationName = item.title
                    }
                })
            },
            getConstellationName(id) {
                let constellationData = this.$common.deepClone(this.$common.params.xingzuo)    //星座
                constellationData.forEach((item, index) => {
                    if(item.key === id) {
                        this.constellationName = item.title
                    }
                })
            },
            getAnimalsName(id) {
                let animalsData = this.$common.deepClone(this.$common.params.shuxiang)    //属相
                animalsData.forEach((item, index) => {
                    if(item.key === id) {
                        this.animalsName = item.title
                    }
                })
            },
            getAreaName(province, area, type) {
                let areaData = this.$common.deepClone(this.$common.params.list)        // 获取省市县
                areaData.forEach((item, index) => {
                    if(item.area_id === province) {
                        if(type === 1) {
                            this.areaName += item.title
                        } else if(type === 2) {
                            this.originName += item.title
                        }
                        item.sons.forEach((items, indexs) => {
                            if(items.area_id === area) {
                                if(type === 1) {
                                    this.areaName += items.title
                                } else if(type === 2) {
                                    this.originName += items.title
                                }
                            }
                        })
                    }
                })
            },
            getHousekeeperTypeList(yw_types) {
                housekeeperHttp.getHousekeeperTypeList({}).then((res) => {
                    console.log('家政员类型', res)
                    let housekeeperTypeOptions = this.$common.deepClone(res.data.list)
                    housekeeperTypeOptions.forEach((item, index) => {
                        if(yw_types !== '' && yw_types !== null) {
                            yw_types.split(',').forEach((items, indexs) => {
                                if(items === item.id) {
                                    this.housekeeperType.push(item.title)
                                }
                            })
                        }
                    })
                })
            },
            getTechniqueList(yw_jinengs) {
                housekeeperHttp.getTechniqueList({type: 2}).then((res) => {
                    console.log('技能', res)
                    let techniqueOptions = this.$common.deepClone(res.data.list)
                    techniqueOptions.forEach((item, index) => {
                        if(yw_jinengs !== '' && yw_jinengs !== null) {
                            yw_jinengs.split(',').forEach((items, indexs) => {
                                if(items === item.id) {
                                    this.housekeeperTechnique.push(item.title)
                                }
                            })
                        }
                    })
                })
            },
            getLanaugeName(yw_putonghua) {
                let techniqueOptions = this.$common.params.yuzhong    //语言、普通话
                techniqueOptions.forEach((item, index) => {
                    if(yw_putonghua !== '' && yw_putonghua !== null) {
                        yw_putonghua.split(',').forEach((items, indexs) => {
                            if(items === item.key) {
                                this.housekeeperLanguage.push(item.title)
                            }
                        })
                    }
                })
            },
            getCertificateList(yw_zhengshu) {
                housekeeperHttp.getCertificateList({}).then((res) => {
                    console.log('证书', res)
                    let certificateOptions = this.$common.deepClone(res.data.list)
                    certificateOptions.forEach((item, index) => {
                        if(yw_zhengshu !== '' && yw_zhengshu !== null) {
                            yw_zhengshu.split(',').forEach((items, indexs) => {
                                if(items === item.id) {
                                    this.housekeeperCertificate.push(item.title)
                                }
                            })
                        }
                    })
                })
            },
            getAtHomeName(yw_zhujia) {
                let atHomeData = this.$common.deepClone(this.$common.params.zhujia)    //住家情况
                atHomeData.forEach((item, index) => {
                    if(yw_zhujia === item.key) {
                        this.atHomeName = item.title
                    }
                })
            },
            getGoThroughList(type) {
                let params = {
                    form: {
                        house_keeper_id: this.house_keeper_id,
                        type: type
                    }
                }
                housekeeperHttp.getGoThroughList(params).then(res => {
                    console.log('工作经历', res)
                    if(type == '1') {
                        this.workExprienceList = res.data.list
                    }
                    if(type == '2') {
                        this.trainList = res.data.list
                    }
                })
            },
            getPhotoFileList(type) {
                let params = {
                    form: {
                        house_keeper_id: this.house_keeper_id,
                        type: type
                    }
                }
                housekeeperHttp.getPhotoFileList(params).then(res => {
                    if(res.code == 0) {
                        console.log(res)
                        if(type == '1') {
                            this.confineMealFileList = []
                        }
                        if(type == '2') {
                            this.checkupFileList = []
                        }
                        if(type == '3') {
                            this.workLifeFileList = []
                        }
                        if(type == '4') {
                            this.qualificationFileList = []
                        }
                        if(type == '5') {
                            this.interiorFileList = []
                        }
                        res.data.list.forEach((item, index) => {
                            if(type == '1') {
                                this.confineMealFileList.push({url: item.cover_info.url, id: item.id})
                            }
                            if(type == '2') {
                                this.checkupFileList.push({url: item.cover_info.url, id: item.id})
                            }
                            if(type == '3') {
                                this.workLifeFileList.push({url: item.cover_info.url, id: item.id})
                            }
                            if(type == '4') {
                                this.qualificationFileList.push({url: item.cover_info.url, id: item.id})
                            }
                            if(type == '5') {
                                this.interiorFileList.push({url: item.cover_info.url, id: item.id})
                            }
                        })
                    }
                })
            },
            //看图
            seeImage(image, current){
                let urls = []
                image.forEach(item => {
                    urls.push(item.url)
                })
                uni.previewImage({
                    urls: urls,
                    current: current,
                    indicator: 'number'
                });
            },
            toCreditQuery() {
                console.log('信用查询')
                let params = {
                    shenfenzhenghao: this.housekeeperDetails.shenfenzhenghao,
                    truename: this.housekeeperDetails.truename,
                    tel: this.housekeeperDetails.tel,
                }
                uni.navigateTo({
                    url: '/pages/housekeeper/creditQuery/index',
                    success: function(res) {
                        // 通过eventChannel向被打开页面传送数据
                        res.eventChannel.emit('getCredit', params)
                    }
                })
            },
            editResume() {
                console.log('编辑简历')
                uni.navigateTo({
                    url: `/pages/housekeeper/editHousekeeper/index?keeper_id=${this.house_keeper_id}`
                })
            },
            followEvaluation() {
                console.log('跟进评价')
                uni.navigateTo({
                    url: `/pages/housekeeper/followComment/index?keeper_id=${this.house_keeper_id}`
                })
            },
            shares() {
                console.log('分享简历')
                if(this.showBase64 === true) {
                    this.showShare = true
                    this.showBillIndex = '1'
                } else {
                    uni.showToast({
                        icon: 'none',
                        title: '加载资源中，请稍后'
                    })
                }
            },
            cancel() {
                console.log('取消')
                this.showShare = false
            },
            // 分享微信链接
            shareWechatUrl() {
                console.log('分享微信链接')
                uni.showToast({
                    icon: 'none',
                    title: '暂未开放'
                })
            },
            // 分享微信朋友圈链接
            shareWechatFriendUrl() {
                console.log('分享微信朋友圈链接')
                uni.showToast({
                    icon: 'none',
                    title: '暂未开放'
                })
            },
            // 复制简历链接
            shareResume() {
                uni.setClipboardData({
                    data: `${this.h5_url}#/housekeeper/resume?mdsn=${this.mdsn}&house_keeper_id=${this.house_keeper_id}`,
                    showToast: false,
                    success: () => {
                        this.$refs.uToast.show({
                            type: 'success',
                            message: '链接已复制成功',
                            duration: 700,
                            iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
                        })
                    }
                })
            },
            
            // 改变简历
            changeResumeBill(type) {
                console.log(type)
                this.showBillIndex = type
            },
            
            
            // 分享海报到微信
            shareBillWechat() {
                console.log('分享海报到微信')
                uni.showToast({
                    icon: 'none',
                    title: '暂未开放'
                })
            },
            // 分享海报到微信朋友圈
            shareBillWechatFriend() {
                console.log('分享海报到微信朋友圈')
                uni.showToast({
                    icon: 'none',
                    title: '暂未开放'
                })
            },
            // 下载海报
            downLoadBill() {
                console.log('下载海报')
                this.types = 'down'
                uni.showLoading({
                    title: '下载中...'
                })
                if(this.tempQrcode === '') {
                    console.log('正在生成二维码canvas')
                } else if(this.tempQrcode !== ''){
                    console.log('二维码canvas已经生成好了')
                    if(this.posterUrl === '') {
                        console.log('htmlcanvas正在生成中,等待,不进行操作')
                    } else if (this.posterUrl !== '') {
                        console.log('htmlcanvas已经生成好了')
                        this.loadBase64Url(this.posterUrl)
                    }
                }
            },
            // 点击预览
            preview() {
                console.log('点击预览准备生成canvas')
                this.types = ''
                this.showBill = true
                if(this.tempQrcode === '') {
                    this.qrFun(`${this.h5_url}#/housekeeper/resume?mdsn=${this.mdsn}&house_keeper_id=${this.house_keeper_id}`)
                }
            },
            
            
            
            // 生成二维码临时图片地址，用于写入canvas
            async qrFun(text) {
                await this.$refs.uqrcode.toTempFilePath({
                    success: res => {
                        console.log('二维码临时文件', res);
                        this.turnBase64Image(res.tempFilePath, 'tempQrcode')
                    },
                    fail: err => {
                        console.log('二维码转换', err)
                    }
                });
            },
            // 将图片转为base 64 位url
            turnBase64Image(img, key) {
              uni.getImageInfo({
                src: img,
                success: image => {
                    console.log('二维码转换为base64', image)
                    pathToBase64(image.path).then(base64 => {
                        this[key] = base64.replace(/[\r\n]/g, '');
                        console.log('二维码的base64', base64)
                        this.showBase64 = true
                    }).catch(error => {
                        console.log('转换失败：', error);
                    });
                },
                fail: err => {
                    console.log('将本地图片转为base 64报错:', err);
                }
              });
            },
            // 获取生成的base64 图片路径
            receiveRenderData(val) {
                if(val.index === 1) {
                    console.log('生成canvas详版简历图片', val)
                    if(val.canvas === '') {
                        this.posterUrl = val.canvas.replace(/[\r\n]/g, ''); // 去除base64位中的空格
                    } else {
                        this.posterUrl = val.canvas
                    }
                }
                if(val.index === 2) {
                    console.log('生成canvas简版简历图片', val)
                    if(val.canvas === '') {
                        this.posterUrl2 = val.canvas.replace(/[\r\n]/g, ''); // 去除base64位中的空格
                    } else {
                        this.posterUrl2 = val.canvas
                    }
                }
                if(val.index === 4) {        //下载
                    console.log('下载详细简历', val)
                    this.loadBase64Url(val.canvas.replace(/[\r\n]/g, ''))
                }
            },
            
            /* 将base64 位的图片路径转换为 临时路径 */
            loadBase64Url(posterUrl) {
                const imageStr = posterUrl;
                base64ToPath(imageStr).then(path => {
                    console.log('转换下载图片')
                    this.saveImage(path);
                }).catch(error => {
                    console.error('临时路径转换出错了：', error);
                });
            },
            // 保存简历图片到手机相册
            saveImage(filePath) {
              uni.saveImageToPhotosAlbum({
                filePath, // 需要临时文件路径，base64无法保存
                success: () => {
                    uni.hideLoading()
                    this.$refs.uToast.show({
                        type: 'success',
                        message: '保存图片成功',
                        duration: 700,
                        iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
                    })
                },
                fail: (error) => {
                  console.error('保存失败，请重试', error);
                }
              });
            },
            
            
            callPhone(){
                console.log('你拨打的电话是' + this.phone)
                window.location.href = 'tel://' + this.phone;
            },
        },
    }
</script>

<script lang="renderjs" module="canvasImage">
import html2canvas from 'html2canvas'
export default {
    data() {
        return {
            posterUrl: ''
        }
    },
    mounted() {
    },
    methods: {
        // 生成图片需要调用的方法
        // 通过监听逻辑层数据 调用视图层方法
        generateImage(newValue, oldValue, ownervm, vm) {
            console.log('renderjs')
            console.log(newValue)
            console.log()
            
            // 逻辑层this.tempQrcode是否为空
            if(newValue !== '') {
                console.log('800ms后开始生成canvas')
                setTimeout(() => {
                    console.log('开始生成canvas')
                    const dom = document.getElementById('canvarsHtml2') // 需要生成图片内容的 dom 节点
                    html2canvas(dom, {
                      width: dom.clientWidth, //dom 原始宽度
                      height: dom.clientHeight,
                      scrollY: 0, // html2canvas默认绘制视图内的页面，需要把scrollY，scrollX设置为0
                      scrollX: 0,
                      useCORS: true, //支持跨域
                      scale: 2, // 设置生成图片的像素比例，默认是1，如果生成的图片模糊的话可以开启该配置项。（设置为1无法触发长按扫一扫）
                    }).then((canvas) => {
                      // 生成成功
                      // html2canvas 生成成功的图片链接需要转成 base64位的url
                      // 调用逻辑层的方法this.$ownerInstance.callMethod('receiveRenderData', {})
                      this.$ownerInstance.callMethod('receiveRenderData', { canvas: canvas.toDataURL('image/png'), index: 1 })
                    }).catch(err=>{
                      // 生成失败 弹出提示弹窗
                    })
                    
                    const dom2 = document.getElementById('canvarsHtml3') // 需要生成图片内容的 dom 节点
                    html2canvas(dom2, {
                      width: dom2.clientWidth, //dom 原始宽度
                      height: dom2.clientHeight,
                      scrollY: 0, // html2canvas默认绘制视图内的页面，需要把scrollY，scrollX设置为0
                      scrollX: 0,
                      useCORS: true, //支持跨域
                      scale: 2, // 设置生成图片的像素比例，默认是1，如果生成的图片模糊的话可以开启该配置项。（设置为1无法触发长按扫一扫）
                    }).then((canvas) => {
                      // 生成成功
                      // html2canvas 生成成功的图片链接需要转成 base64位的url
                     this.$ownerInstance.callMethod('receiveRenderData', { canvas: canvas.toDataURL('image/png'), index: 2 })
                    }).catch(err=>{
                      // 生成失败 弹出提示弹窗
                    })
                }, 800)
            }
            
            
        },
        // 获取视图层的数据
        getPosterUrl(value) {
            console.log('接收下载时的数据')
            this.posterUrl = value
            
        },
        // // 通过触发逻辑层点击事件 调用
        downloadImage(newValue, oldValue, ownervm, vm) {
            // 下载之前必须确保二维码已经生成好了
            // 调用逻辑层方法
            
                if(this.posterUrl === '') {
                    this.$ownerInstance.callMethod('downLoadBill')
                    setTimeout(() => {
                        console.log('posterUrl === 空开始生成canvas')
                        const dom = document.getElementById('canvarsHtml2') // 需要生成图片内容的 dom 节点
                        html2canvas(dom, {
                          width: dom.clientWidth, //dom 原始宽度
                          height: dom.clientHeight,
                          scrollY: 0, // html2canvas默认绘制视图内的页面，需要把scrollY，scrollX设置为0
                          scrollX: 0,
                          useCORS: true, //支持跨域
                          scale: 2, // 设置生成图片的像素比例，默认是1，如果生成的图片模糊的话可以开启该配置项。（设置为1无法触发长按扫一扫）
                        }).then((canvas) => {
                          // 生成成功
                          // html2canvas 生成成功的图片链接需要转成 base64位的url
                          // 调用逻辑层的方法ownerFun.callMethod('receiveRenderData', {})
                          this.$ownerInstance.callMethod('receiveRenderData', { canvas: canvas.toDataURL('image/png'), index: 4 })
                        }).catch(err=>{
                          // 生成失败 弹出提示弹窗
                        })
                    }, 800)
                } else if(this.posterUrl !== ''){
                    console.log('posterUrl !== 空开始生成canvas')
                    this.$ownerInstance.callMethod('downLoadBill')
                    // this.$ownerInstance.callMethod('receiveRenderData', { canvas: canvas.toDataURL('image/png'), index: 4 })
                }
        },
    }
}
</script>


<style lang="scss" scoped>
    .housekeepers {
        .header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 20px 20px 10px;
            .left {
                display: flex;
                align-items: center;
                justify-content: flex-start;
            }
            .title {
                text-align: center;
            }
            .right {
                height: 34px;
                opacity: 0;
                display: flex;
                align-items: center;
                justify-content: flex-end;
            }
        }
        ::v-deep {
            .bills, .u-transition {
                z-index: 9999!important;
                .warp {
                    z-index: 99999!important;
                    color: #fff;
                    .uni-scroll-view-content {
                        display: flex;
                        justify-content: center;
                    }
                    .content {
                        width: 100%;
                        padding: 100px 0;
                    }
                    .tabs {
                        width: 160px;
                        margin: 0 auto;
                        display: flex;
                        border: 2px solid #fff;
                        border-radius: 5px;
                        justify-content: center;
                    }
                    .item {
                        font-size: 16px;
                        padding: 6px;
                        width: 100%;
                    }
                    .itemactive {
                        background-color: #fff;
                        color: $u-primary;
                    }
                    .imgs {
                        display: flex;
                        justify-content: center;
                        .scroll-Y {
                            height: 600px;
                        }
                        img {
                            width: 300px;
                            height: 500px;
                        }
                    }
                }
            }
        }
        .content2 {
            width: 400px;
            background: #fff;
            position: absolute;
            top: 0px;
            right: -9999px;
            .qr-box {
                display: flex;
                background-color: #fff;
                padding: 10px 0.5rem;
                justify-content: space-around;
                .qrTitle {
                    display: flex;
                    flex-wrap: wrap;
                    .title {
                        width: 100%;
                        &:nth-child(2) {
                            color: gray;
                        }
                    }
                }
                .imgs {
                    .qrcode {
                        width: 100px;
                        height: 100px;
                    }
                }
            }
        }
        .content3 {
            width: 400px;
            background: #fff;
            position: absolute;
            top: 0px;
            left: -9999px;
            .avaters {
                width: 100%;
                display: flex;
                justify-content: center;
            }
            .infos {
                display: flex;
                flex-wrap: wrap;
                padding: 0 20px;
                .item {
                    width: 100%;
                    display: flex;
                    margin: 5px 0;
                    .txt {
                        margin-right: 10px;
                    }
                }
                .qrcode {
                    justify-content: space-around;
                    .qrTitle {
                        display: flex;
                        flex-wrap: wrap;
                        .title {
                            width: 100%;
                        }
                    }
                }
            }
        }
        .content {
            .bm-info-container {
                .header {
                    padding: 20px 15px;
                    display: flex;
                    flex-wrap: wrap;
                    align-content: space-between;
                    color: white;
                    .content {
                        display: flex;
                        justify-content: flex-start;
                        width: 100%;
                        .avater {
                            margin-right: 15px;
                            width: 105px;
                            height: 130px;
                            .van-image {
                                box-shadow: 2px 3px 10px #383838;
                            }
                        }
                        .bm-info {
                            display: flex;
                            flex-wrap: wrap;
                            .names {
                                width: 100%;
                                .name {
                                    display: flex;
                                    align-items: baseline;
                                    .title {
                                        margin-right: 10px;
                                        font-size: 20px;
                                    }
                                }
                                .number {
                                    font-size: 14px;
                                }
                            }
                            .info1 {
                                display: flex;
                                justify-content: space-between;
                                flex-wrap: wrap;
                                font-size: 14px;
                                .item {
                                    width: 50%;
                                    span {
                                        &:first-child {
                                            opacity: .8;
                                        }
                                    }
                                }
                            }
                        }
                    }
                    .headerFooter {
                        width: 100%;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        padding: 10px 30px;
                        margin: 20px 0 0;
                        .item {
                            text-align: center;
                            p {
                                &:first-child {
                                    span {
                                        font-size: 19px;
                                    }
                                }
                            }
                        }
                    }
                }
                .contentItems {
                    // padding-bottom: 55px;
                    .items {
                        background: #fff;
                        padding: 10px 0.5rem;
                        margin: 8px 0;
                        .salarys {
                            display: flex;
                            justify-content: space-between;
                        }
                        .icons {
                            display: flex;
                            align-items: center;
                            padding: 10px;
                            .iconSalary {
                                display: flex;
                            }
                            .salary {
                                color: red;
                                font-weight: bold;
                            }
                            .ic {
                                background: #ffb100;
                                text-align: center;
                                display: flex;
                                align-items: center;
                                padding: 4px 5px;
                                border-radius: 50%;
                                margin-right: 5px;
                                .iconfont {
                                    color: #fff;
                                }
                            }
                        }
                        .service {
                            justify-content: space-between!important;
                        }
                        .content {
                            display: flex;
                            justify-content: flex-start;
                            flex-wrap: wrap;
                            align-items: center;
                            padding: 10px 5px;
                            .item {
                                text-align: center;
                                margin: 10px 10px 10px;
                                .ic {
                                    color: rgb(255, 127, 80);
                                    .iconfont {
                                        font-size: 26px;
                                    }
                                }
                                &:nth-child(2) {
                                    .ic {
                                        color: rgb(0, 191, 255);
                                    }
                                }
                                &:nth-child(3) {
                                    .ic {
                                        color: rgb(221, 160, 221);
                                    }
                                }
                                &:nth-child(4) {
                                    .ic {
                                        color: rgb(34, 139, 34);
                                    }
                                }
                            }
                        }
                        .intention {
                            flex-wrap: wrap;
                            display: flex;
                            justify-content: flex-start;
                            p {
                                width: 100%;
                                padding: 5px 0;
                            }
                            .item {
                                width: 100%;
                                text-align: left;
                            }
                        }
                    }
                }
                .contentItemn {
                    padding-bottom: 55px;
                }
            }
            .footers {
                position: fixed;
                bottom: 0px;
                left: 0px;
                display: flex;
                width: 100%;
                align-items: center;
                background: #f3f3f3;
                .btn {
                    padding: 0px 15px;
                    width: 100%;
                    display: flex;
                    border-top: 1px solid #e5e5e5;
                    .txt {
                        width: 50%;
                        text-align: center;
                        padding: 10px 10px;
                        font-size: 15px;
                        display: flex;
                        flex-wrap: wrap;
                        justify-content: center;
                        color: #515151;
                        ::v-deep {
                            .u-transition {
                                display: flex;
                                align-items: center;
                            }
                        }
                        view {
                            width: 100%;
                        }
                    }
                }
            }
        }
        .shares {
            .main {
                padding: 10px 20px 0px;
                .content {
                    .title {
                        font-weight: bold;
                        display: flex;
                        align-items: center;
                        .preSee {
                            margin-left: 10px;
                            font-weight: normal;
                            font-size: 14px;
                            border: 1px solid #f3f3f3;
                            padding: 5px;
                            border-radius: 5px;
                        }
                    }
                    .itemsurl {
                        display: flex;
                        margin: 10px 0;
                        .item {
                            width: 60px;
                            display: flex;
                            justify-content: center;
                            flex-wrap: wrap;
                            margin-right: 10px;
                            .imgs {
                                width: 100%;
                                height: 50px;
                                display: flex;
                                justify-content: center;
                                flex-wrap: wrap;
                                border: 1px solid #f3f3f3;
                                border-radius: 8px;
                                padding-top: 10px;
                                .imgsTiel {
                                    width: 100%;
                                    text-align: center;
                                    font-size: 12px;
                                    background-color: $u-primary;
                                    border-radius: 0 0 8px 8px;
                                    color: #fff;
                                }
                            }
                            .txt {
                                text-align: center;
                                font-size: 12px;
                            }
                        }
                    }
                }
            }
            .cancel {
                text-align: center;
                color: #515151;
                padding: 0 0 20px 0;
            }
        }
    }
</style>

这个是我的解决方案，通过renderjs加载canvas，之前在测试的时候发现生成的海报，有时候二维码会是空白，后来发现是因为二维码的base64图是空白，肯定是二维码没有生成成功（value为空导致的），所以后面加了个判断，必须要在二维码生成成功后才能生成canvas图片。示例代码附上，这个可以在app上使用，h5不能使用，使用的ui框架是uview，如果有更好更快的方法希望大佬可以告知。

Answer 2

之前社区里应该有过类似的问题，你在html2canvas的时候需要等待头像加载完成。或者按照你说的把网络图片转换成临时路径。

去年好像也有问题过但是没找到，就找到了一个，解决思路的类似的。

• 小程序canvas drawImage 加载网络图片踩得坑

Answer 3

uni.getImageInfo获取图片path，传给canvas.context的drawImage就行