CAN.jpg
uniapp-canvas示例
代码语言：javascript复制<template>
<view style="width: 80vw; height: 80vh">
<image v-if="showposter" show-menu-by-longpress="true" class="poster" mode="aspectFill" style="width: 100%; height: 100%" :src="canvasimg"></image>
<canvas v-else canvas-id="myCanvas" id="myCanvas" style="width: 100%; height: 100%"></canvas>
<view class="shareTip">长按保存或分享</view>
</view>
</template>
<script>
const app = getApp();
export default {
props: {
begindraw: {
type: Boolean,
default: false
}
},
watch: {
begindraw: function (o, n) {
console.log('nnnnnn', n);
this.dotest();
// this.doposter()
}
},
data() {
return {
showposter: false,
canvasimg: '',
canvaImgW: '',
canvaImgH: '',
qrcode: '',
imagePath: '',
canvaImgUrl: ''
};
},
onLoad() {
// this.getShareQr()
},
beforeMount() {},
created() {
// this.doposter()
},
onShow() {},
onReady() {},
methods: {
drawBackground() {
const canvasId = 'myCanvas';
const ctx = uni.createCanvasContext(canvasId, this);
let that = this;
let schoolInfo = uni.getStorageSync('schoolInfo');
let sc = schoolInfo.customInfo.customName || '';
let schphone = schoolInfo.customInfo.phone || '';
let address = schoolInfo.customInfo.address || '';
uni.getSystemInfo({
success: function (res) {
if (res) {
that.cwidth = res.windowWidth;
that.cheight = res.windowHeight;
}
}
});
this.qrcode = app.globalData.baseResUrl;//二维码地址
if (schoolInfo && schoolInfo.customInfo && schoolInfo.customInfo.imgs) {
this.canvaImgUrl = app.globalData.baseResUrl ;//机构背景图地址
}
uni.downloadFile({
url: this.canvaImgUrl,
success(res) {
uni.getImageInfo({
src: that.canvaImgUrl,
success: function (image) {
that.canvaImgW = image.width;
that.canvaImgH = image.height;
}
});
ctx.drawImage(res.tempFilePath, 0, 0, that.canvaImgW, that.canvaImgH, 0, 0, that.cwidth * 0.81, that.cheight * 0.8);
ctx.rect(0, that.cheight * 0.65, that.cwidth * 0.81, 400);
ctx.setFillStyle('white');
ctx.fill();
ctx.setFillStyle('black');
ctx.font = 'normal bold 12px Arial,sans-serif ';
ctx.fillText(sc, 16, that.cheight * 0.65 30);
ctx.fillText('报名找我:' schphone, 16, that.cheight * 0.65 50);
ctx.fillText('地址:' address, 16, that.cheight * 0.65 70);
uni.getImageInfo({
src: that.qrcode,
success: (res) => {
// console.log('imagePath', res);
ctx.drawImage(res.path, that.cwidth * 0.8 - 100, that.cheight * 0.65 10, 80, 80);
console.log('ctx',ctx)
ctx.draw(false, () => {
console.log('ctx2',ctx)
uni.canvasToTempFilePath({
canvasId: canvasId,
success: (res) => {
console.log('临时图片路径：', res.tempFilePath);
that.canvasimg = res.tempFilePath;
that.showposter=true;
uni.hideLoading()
},
fail: (error) => {
console.error('转化图片失败：', error);
}
},that);
});
},
fail: (err) => {
console.error(err);
}
});
}
});
},
async doposter() {
uni.showLoading({
title: '正在生成海报'
});
await this.drawBackground();
}
}
};
</script>
<style lang="scss" scoped>
.shareTip {
background: #fff;
text-align: center;
padding: 5px;
margin-top:-5px;
}
</style>需要注意的是this关键字
uni.canvasToTempFilePath(object, component)
组件形式需要加指向component也就是this
uni.createCanvasContext(canvasId, this)
