<template>
<view class="team_poster">
<view v-if="showLoading">
<loading></loading>
</view>
<view class="new_btn" @click="createPoster()">生成海报</view>
<view class="poster" @touchmove.stop.prevent="" v-if="isShowPoster">
<canvas canvas-id="imgCanvas" id="imgCanvas"></canvas>
<view class="img_box">
<image :src="imageUrl" class="img" :show-menu-by-longpress="true"></image>
</view>
<!-- #ifdef APP-PLUS -->
<view class="new_btn" @click="bankImg()">保存到相册</view>
<!-- #endif -->
<!-- #ifndef APP-PLUS -->
<view class="tips">长按保存海报</view>
<!-- #endif -->
</view>
</view>
</template>
<script>
export default {
data() {
return {
preUrl: this.$picUrl,
showLoading: false,
imgSrcArr : [],
localImageArray : [],
count : 0,
imageUrl: '',
isShowPoster: false,
invitedData:{}
}
},
methods: {
// 保存图片
bankImg() {
//只在app端
// #ifdef APP-PLUS
if (this.imageUrl) {
uni.saveImageToPhotosAlbum({
filePath: this.imageUrl, //传入临时地址
success: ()=> {
uni.showToast({
title: '保存成功',
duration: 2000
});
},
fail: ()=> {
uni.showToast({
title: '保存失败',
icon: 'error',
duration: 2000
});
}
})
} else {
uni.showToast({
title: '请刷新重试',
duration: 2000,
icon: 'none'
});
}
// #endif
},
// 生成海报
async createPoster(){
this.showLoading = true;
try{
if(true){
this.isShowPoster = true;
this.imgSrcArr = [
'https://stage-dachun-pic.xadazhihui.cn/image/dc_5099031000176 - .jpg',
'https://stage-dachun-pic.xadazhihui.cn/wx_invitation/team_poster_5终身会员_220211160317'
]
this.imgSrcArr.forEach((img) => {
let that = this;
uni.getImageInfo({
src: img,
success: async function(image) {
if(img === that.imgSrcArr[0]) {
that.$set(that.localImageArray,0,image.path)
}else if(img === that.imgSrcArr[1]){
that.$set(that.localImageArray,1,image.path)
}
that.count++;
if (that.count == 2) {
await that.createReport();
}
}
});
})
}
}catch(e){
console.log(e);
this.isShowPoster = false;
this.showLoading = false;
}
},
createReport(){
let canvasObj = {};
var that = this;
this.$nextTick(() => {
const query = uni.createSelectorQuery().in(this);
query.select('#imgCanvas').boundingClientRect(data => {
canvasObj = {
width: data.width,
height: data.height
};
const ctx = uni.createCanvasContext('imgCanvas', this);
ctx.rect(0, 0, canvasObj.width, canvasObj.height)
ctx.setFillStyle('#FFFFFF')
ctx.fillRect()
ctx.draw()
this.ctx = ctx
let createImg = new Promise((resolve, reject) => {
ctx.drawImage(that.localImageArray[0], 0, 0, canvasObj.width, canvasObj.height);
resolve();
});
let createQrCode = new Promise((resolve, reject) => {
ctx.drawImage(that.localImageArray[1],uni.upx2px(506), uni.upx2px(788), uni.upx2px(112), uni.upx2px(112));
resolve();
})
Promise.all([createImg,createQrCode]).then(() => {
ctx.setTextAlign('left')
ctx.font = 'normal bold 14px Arial,sans-serif '
ctx.setFontSize(uni.upx2px(32))
ctx.setFillStyle('#333333')
let recommend;
if(this.invitedData.recommend.length > 13){
recommend = this.invitedData.recommend.substr(0, 13) + '...'
}else{
recommend = this.invitedData.recommend
}
ctx.fillText(`${recommend}`,uni.upx2px(36), uni.upx2px(846))
ctx.draw(false, setTimeout(() => {
uni.canvasToTempFilePath({
canvasId: 'imgCanvas',
success: (res) => {
this.imageUrl = res.tempFilePath;
this.showLoading = false
},
fail(e) {
console.log(e);
uni.showToast({
title: '生成海报失败,请刷新重试',
icon: 'none'
});
}
}, that);
}, 300));
});
})
.exec();
})
}
}
}
</script>
<style scoped lang="scss">
.team_poster{
width: 100%;
height: 100vh;
background-color: #FFFFFF;
padding: 80rpx 32rpx 0;
box-sizing: border-box;
}
.poster{
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: 10;
background-color: #F9F9F9;
}
/deep/#imgCanvas,
/deep/uni-canvas,
/deep/ canvas {
position: absolute;
top: -2000rpx;
width: 654rpx;
height: 920rpx;
text-align: center;
z-index: 2;
background: #fff;
// transform: translateX(-50%);
// opacity: 0;
}
.img_box {
position: fixed;
/* #ifdef APP-PLUS */
// top: 100rpx;
/* #endif */
/* #ifndef APP-PLUS */
// top: 120rpx;
/* #endif */
top: 50%;
left: 50%;
margin: auto;
transform: translate(-50%,-60%);
width: 654rpx;
height: 920rpx;
z-index: 15;
border-radius: 8px;
.img {
width: 100%;
height: 100%;
border-radius: 8px;
vertical-align: middle;
}
}
.new_btn{
width: calc(100vw - 64rpx);
height: 88rpx;
background-color: #109DC9;
border-radius: 8rpx;
text-align: center;
line-height: 88rpx;
font-size: 34rpx;
font-weight: bold;
color: #FFFFFF;
position: fixed;
bottom: 80rpx;
left: 32rpx;
z-index: 20;
margin-bottom: calc(constant(safe-area-inset-bottom));
margin-bottom: calc(env(safe-area-inset-bottom));
}
.tips {
position: fixed;
// top: 992rpx;
bottom: 80rpx;
font-size: 32rpx;
line-height: 44rpx;
color: #999999;
width: 100%;
text-align: center;
z-index: 20;
}
</style>
- 发布:2022-02-11 10:41
- 更新:2022-02-23 11:38
- 阅读:1238
产品分类: HbuilderX
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: win10
HBuilderX版本号: 3.3.11
示例代码:
操作步骤:
升级编辑器版本后,线上正常的海报在ios都生成不了
升级编辑器版本后,线上正常的海报在ios都生成不了
预期结果:
生成正常
生成正常
实际结果:
生成不了,没有报错信息,回退编辑器版本后运行到手机正常了,但是放到云端打包还是生成不了
生成不了,没有报错信息,回退编辑器版本后运行到手机正常了,但是放到云端打包还是生成不了
3 个回复
DCloud_UNI_Anne
HBuilderX alpha 3.3.12+ 已修复
9***@qq.com (作者)
ios的app端生成不了,ios微信公众号和小程序是正常的
BoredApe - 有问题就会有答案。
请上传一个能完整重现问题的测试工程
不会飞的羊
应该是getImageInfo 问题,ios中网络图片无反应,回调无反应,只能先download,我看这个bug前几年出现过,我在hbuilder 3.3.10上出现的
2022-02-11 16:26
9***@qq.com (作者)
回复 不会飞的羊: 经排查,就是getImageInfo 的问题,改为download暂时解决了
2022-02-11 17:13