uniapp 开发微信小程序 canvas

<template>
<view class="prompt-box" v-if="isHidden==true">
<view class="prompt-content contentFontColor">
<view class="content">
<canvas id="myCanvas" canvas-id="myCanvas" canvas-type="2d"></canvas>
</view>
<view class="options">
<button class="left" size="mini" @click="saveImgToLocal">下载</button>
<button style="margin-left: 100rpx;" class="right" size="mini" @click="_close">关闭</button>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
isHidden: false,
imageUrl:'https://res1.meiben666.com/xcx/stu_haibao_null.jpg',//海报
};
},
props: {
detail: {
type: Object,
default: {},
},
showBtn: {
type: Boolean,
default: false
},
},
watch: {
showBtn(val) {
if (val === false) {} else {
this.writeCanvas();
}
}
},
mounted() {
// this.writeCanvas();
},
methods: {
writeCanvas(){
var that = this;
new Promise(function(resp,rej){
uni.getImageInfo({
src: that.imageUrl,//这里是一张网络图片
success: (response) => {
console.log("response=",response)
resp(response)
},
})
}).then(function(data){
console.log(data,11111111);
let city=that.detail.component.countryName+'-'+that.detail.component.svProvinceName

const ctx = wx.createCanvasContext('myCanvas',that)
ctx.textAlign = 'center';
ctx.font='bold 20px Arial';
ctx.drawImage(data.path, 0, 0,300,400)//将获取到的网络图片的临时图片画到屏幕中
ctx.setFillStyle('#000')
ctx.fillText(that.detail.students.nickName, 150, 100,300,400)
ctx.setFontSize('14')
ctx.fillText(city, 145, 120,300,400)
for(var i = 0;i<that.detail.offers.length;i++){
var item =that.detail.offers[i];
let schoolName = item.universityName+'-'+item.type+'-'+item.offerYear
ctx.setFillStyle('#000')
ctx.fillText(schoolName, 135, 150+40*i,300,400)
ctx.setFillStyle('#666')
ctx.fillText(item.universityEnName, 135, 170+40*i,300,400)
}

ctx.draw()
that.show();//显示海报
// that.saveImgToLocal();
}).catch(function(data){
console.log("catch",data)
});
},
//保存页面中的myCanvas到本地相册
saveImgToLocal(){
var that = this;
//将生成好的图片保存到本地，需要延迟一会，绘制期间耗时
setTimeout(function() {
wx.canvasToTempFilePath({
canvasId: 'myCanvas',
success: function(res) {
console.log("save ok canvasToTempFilePath",res)
var tempFilePath = res.tempFilePath;
wx.saveImageToPhotosAlbum({
filePath: tempFilePath,
success(res) {
console.log('saveImageToPhotosAlbum', res);
wx.showToast({
title: '已保存到相册',
icon: 'success',
duration: 2000
})
}
},that)
},
fail: function(res) {
console.log(res);
}
},that);
}, 500);
},
hide() {
this.isHidden = false;
},
show() {
this.isHidden = true;
},
_close() {
this.hide();
this.$emit('hidden',false)
}
}
}
</script>

<style lang="scss" scoped>
/* components/vas-prompt/vas-prompt.wxss */
.prompt-box {
position: absolute;
left: 0;
top: 0;
width: 750rpx;
height: 100%;
z-index: 1000;
background: rgba(0, 0, 0, 0.5);
color: #000000;
}


.content {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;

canvas {
width: 600rpx;
height: 800rpx;
}
}


.options{
position: absolute;
bottom: 10rpx;
width: 100%;
text-align: center;
}

.prompt-content {
position: absolute;
left: 50%;
top: 50%;
width: 600rpx;
height: 900rpx;
/* max-width: 100rpx; */
border-radius: 8rpx;
transform: translate(-50%, -50%);
overflow: hidden;
background: #fff;
}
</style>