kylin
/
zdxtDrillProgram
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

海报优化

h5_css
yanyan 3 years ago
parent
6ca4436f82
commit
f002033625
1 changed files with 210 additions and 7 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 213
      subpkg/complete/complete.vue

213
subpkg/complete/complete.vue
View File

@ -62,15 +62,21 @@
<view @click=""><label><button open-type="share"></button><image src="/static/images/btn-wx.png"></image></label>分享给微信好友</view>
</view>
<view class="myitem">
<view @click=""><label><button @tap="share"></button><image src="/static/images/btn-pyq.png"></image></label>分享到朋友圈</view>
<view @click="formSubmit()"><label><image src="/static/images/btn-ma.png"></image></label>二维码邀请</view>
</view>
<view class="myitem">
<view @click=""><label><image src="/static/images/btn-ma.png"></image></label>二维码邀请</view>
</view>
</view>
<canvas class="shengcheng" id="photo" type="2d" style="width: 600rpx;height: 1000rpx"></canvas>
<!--生成海报后的图 -->
<view v-if="showLoad">
<view class='imagePathBox'>
<!-- <image :src="tempFilePath" class='shengcheng' show-menu-by-longpress="true"></image> -->
<button class='baocun' @click="saveImage()">保存至相册</button>
</view>
<view class="mask"></view>
</view>
</view>
</template>
<script>
@ -92,6 +98,10 @@
"showAnlysisc":false,
"showMedal":true,
"showShare":false,
"showLoad":false,
canvas: null, //canvas 对象
tempFilePath: "",
"imageQR":''
};
},
//分享到好友
@ -118,12 +128,13 @@
this.showLayer = false
clearTimeout(this.timer)
}, 5000)
this.roleId = options.roleId
this.questionFreId = options.questionFreId
this.roleId = options.roleId !=null ? options.roleId : this.roleId
this.questionFreId = options.questionFreId!=null ? options.questionFreId : this.questionFreId
this.sceneId = options.sceneId;
this.getQuestionList()
this.getRecordList()
this.editUserMedal();
this.getQR();
},
computed: {
...mapState('m_user', ['userId'])
@ -180,6 +191,14 @@
//uni.$showMsg('数据请求成功！')
},
async getQR() {
const {
data: res
} = await uni.$http.post('/small/scene/manage/getQRCode')
if (!res.success) return uni.$showMsg()
this.imageQR = uni.$http.baseUrl + res.data
//uni.$showMsg('数据请求成功！')
},
backIndex() {
uni.switchTab({
url: '/pages/index/index'
@ -204,6 +223,150 @@
this.showShare = false
this.showLayer = false
},
formSubmit(){
wx.createSelectorQuery()
.select('#photo') // 在 canvas的 id
.fields({
node: true,
size: true
})
.exec((res) => {
// Canvas 对象
const canvas = res[0].node
this.canvas = canvas
// 渲染上下文
const context = canvas.getContext('2d')
// canvas 画布的实际绘制宽高
const width = res[0].width
const height = res[0].height
// 初始化画布大小
const dpr = wx.getWindowInfo().pixelRatio
canvas.width = width * dpr
canvas.height = height * dpr
context.scale(dpr, dpr)
// 清空画布
context.clearRect(0, 0, width, height)
//canvas背景色
context.fillStyle = '#3c9cff';
context.fillStyle ="#FFF" // 背景颜色
context.fillRect(0, 0, 500, 800) // 667 绘制一个矩形作为背景矩形x坐标、y坐标、图片宽、高
//绘制左下角文字
context.fontSize = 12;
context.fillStyle = '#333';
context.textAlign ='left';
context.fillText("长按识别小程序～", 10, 520);
context.stroke();
// 图片对象
const image = canvas.createImage()
image.src = '/static/images/share_bg.png'
// 图片对象
const imageQR = canvas.createImage()
imageQR.src = this.imageQR
image.onload = () => {
// 将图片绘制到 canvas 上
context.drawImage(image, 0, 0, 350, 450)
context.drawImage(imageQR, 200, 450, 130, 120)
}
})
this.showLoad = true
this.showShare = false
this.showLayer = false
},
saveImage() {
uni.canvasToTempFilePath({
canvasId: 'photo',
destWidth: 286,
destHeight: 417,
canvas: this.canvas,
success: (res) => {
this.tempFilePath = res.tempFilePath
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: (res)=> {
wx.showToast({
title: '保存成功',
})
this.showLoad = false
const canvas = this.canvas;
const ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, 500, 800)
}
})
}
});
},
formSubmit(){
wx.createSelectorQuery()
.select('#photo') // 在 canvas的 id
.fields({
node: true,
size: true
})
.exec((res) => {
// Canvas 对象
const canvas = res[0].node
this.canvas = canvas
// 渲染上下文
const context = canvas.getContext('2d')
// canvas 画布的实际绘制宽高
const width = res[0].width
const height = res[0].height
// 初始化画布大小
const dpr = wx.getWindowInfo().pixelRatio
canvas.width = width * dpr
canvas.height = height * dpr
context.scale(dpr, dpr)
// 清空画布
context.clearRect(0, 0, width, height)
//canvas背景色
context.fillStyle = '#3c9cff';
context.fillStyle ="#FFF" // 背景颜色
context.fillRect(0, 0, 500, 800) // 667 绘制一个矩形作为背景矩形x坐标、y坐标、图片宽、高
//绘制左下角文字
context.fontSize = 12;
context.fillStyle = '#333';
context.textAlign ='left';
context.fillText("长按识别小程序～", 10, 520);
context.stroke();
// 图片对象
const image = canvas.createImage()
image.src = '/static/images/share_bg.png'
// 图片对象
const imageQR = canvas.createImage()
imageQR.src = this.imageQR
image.onload = () => {
// 将图片绘制到 canvas 上
context.drawImage(image, 0, 0, 350, 450)
context.drawImage(imageQR, 200, 450, 130, 120)
}
})
this.showLoad = true
this.showShare = false
this.showLayer = false
},
saveImage() {
uni.canvasToTempFilePath({
canvasId: 'photo',
destWidth: 286,
destHeight: 417,
canvas: this.canvas,
success: (res) => {
this.tempFilePath = res.tempFilePath
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: (res)=> {
wx.showToast({
title: '保存成功',
})
this.showLoad = false
const canvas = this.canvas;
const ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, 500, 800)
}
})
}
});
},
itemClickHandler(item) {
if (item !== "") {
this.ask = item.ask
@ -472,4 +635,44 @@
height: 4rpx;
width: 24rpx;
}
.imagePathBox{
width: 100%;
height: 100%;
background: rgba(0,0,0,0.7);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 100000;
}
.shengcheng{
width: 86%;
height: 60%;
position: fixed;
top: 18%;
left: 50%;
margin-left: -43%;
z-index: 999;
}
.baocun{
display: block;
width: 80%;
height: 75rpx;
padding: 0;
line-height: 75rpx;
text-align: center;
position: fixed;
bottom: 50rpx;
left: 10%;
color: #fff;
font-size: 32rpx;
border-radius: 50rpx;
background: #1367fe;
}
button[class="baocun"]::after{
border: 0;
}
</style>
Write Preview
Loading…
Cancel
Save