问题：
android - uniapp开发app，怎么将网络路径的图片生成canvas图片？
江琦
图中的头像部分是通过后端请求来的图片，
现在我需要将整个卡片生成canvas图片，但是生成之后，其中的图片头像部分图片丢失了。
网上搜了很多，说是要把网路路径的图片转换为本地路径
这个具体要怎么转换呢？有没大佬遇到过类似的问题，救救孩子吧 \~^~/
共有3个答案
鲁博雅
<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，如果有更好更快的方法希望大佬可以告知。
栾鸣
uni.getImageInfo获取图片path，传给canvas.context的drawImage就行
吴腾
之前社区里应该有过类似的问题，你在html2canvas的时候需要等待头像加载完成。或者按照你说的把网络图片转换成临时路径。
去年好像也有问题过但是没找到，就找到了一个，解决思路的类似的。
- 小程序canvas drawImage 加载网络图片踩得坑
类似资料：
-
本文向大家介绍Android 通过网络图片路径查看图片实例详解，包括了Android 通过网络图片路径查看图片实例详解的使用技巧和注意事项，需要的朋友参考一下 Android 通过网络图片路径查看图片实例详解 1.在项目清单中添加网络访问权限 2.获取网络图片数据 3.处理查看图片的控制 感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
-
本文向大家介绍IOS 开发之网络图片轮播图的实现，包括了IOS 开发之网络图片轮播图的实现的使用技巧和注意事项，需要的朋友参考一下 IOS 开发之网络图片轮播图的实现 截图 1.使用 2.源码 如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
-
有坐标有图片但是图片缩放后就跑偏了 requ.js
-
本文向大家介绍Winform实现将网页生成图片的方法，包括了Winform实现将网页生成图片的方法的使用技巧和注意事项，需要的朋友参考一下 通常浏览器都有将网页生成图片的功能，本文实例讲述了Winform实现将网页生成图片的方法。分享给大家供大家参考。具体方法如下： 工具截图如下： 生成后的图片如下： 手动填写网站地址，可选择图片类型和保持图片地址，来生成页面的图片，当图片路径未选择时则保存桌面；
-
vite.config.ts文件代码 图片显示页面代码 下面是我build生成后的文件，我前面明明有一个room的文件夹，但是build后确直接在assets文件夹下面生成了，这是什么原因？还有../assets/${name}这里为什么不能写成@/assets/${name}?
-
本文向大家介绍IOS 开发获取本地图片路径及上传，包括了IOS 开发获取本地图片路径及上传的使用技巧和注意事项，需要的朋友参考一下 1、获取沙盒路径 2、读取数据的时候，直接从自己设置文件中读取出来就行了，例子如下： 顺便说一下设置的根目录的位置： 2，获取Documents目录路径的方法： 3，获取Caches目录路径的方法： 4，获取tmp目录路径的方法： 感谢阅读，希望能帮助到大家，