<template>
<view class="pages">
<view v-if="show"></view>
<canvas @longpress="saveposter" :style="'width: '+ w +'px; height:' + h +'px;background-color: #fff;'" canvas-id="firstCanvas" id="firstCanvas"></canvas>
</view>
</template>
<script>
import { h } from "vue";
export default {
data(){
return{
firstCanvasImg:'',
show:true,
// w:375,
// h:665
h:0,
w:0
}
},
onLoad() {
uni.showLoading({
title: '海报生成中...'
});
this.getSystemInfo();
},
onReady: function(e) {
},
methods:{
// 获取系统适配
getSystemInfo() {
let _this = this;
uni.getSystemInfo({
success(res) {
_this.h = res.windowHeight*0.9; //改变0.9用于改变海报占用屏幕的比例
_this.w = res.windowWidth*0.9;
console.log(_this.w,_this.h,'W')
setTimeout(() => {
_this.getCanvas();
},2000)
}
});
},
//保存图片
saveposter() {
const that = this;
uni.showModal({
title: '',
content: '是否下载海报?',
success: function (res) {
if (res.confirm) {
console.log('用户点击确定');
uni.getImageInfo({
src: that.firstCanvasImg,
success: res => {
console.log('res', res.path);
uni.saveImageToPhotosAlbum({
filePath: res.path,
success: function() {
uni.showToast({
title: '保存成功'
});
},
fail: function(err) {
console.log('err1', err);
}
});
},
fail: err => {
console.log('errr', err);
}
});
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
},
getCanvas(){
var _this = this;
setTimeout(() => {
var context = uni.createCanvasContext('firstCanvas')
context.rect(0,0,_this.w,_this.h);
context.setFillStyle('#ffffff');
context.fill();
context.drawImage('/static/img.png', 0, 0, _this.w, _this.h*0.79) // drawImage(图片路径,x,y,绘制图像的宽度,绘制图像的高度)
context.drawImage('/static/img.png', _this.w*0.7, _this.h*0.82, _this.w*0.22, _this.h*0.13) // drawImage(图片路径,x,y,绘制图像的宽度,绘制图像的高度)
context.font = "14px Arial";
context.setFillStyle('#333333');
context.fillText("设科教育 SHEKEJIAOYU", _this.w*0.05, _this.h*0.83);
context.font = "12px Arial";
context.setFillStyle('#999999');
context.fillText("来自于", _this.w*0.05, _this.h*0.88);
context.font = "17px Arial";
context.setFillStyle('#333333');
context.fillText("望无", _this.w*0.05, _this.h*0.91);
context.font = "12px Arial";
context.setFillStyle('#999999');
context.fillText("长按二维码下单,收藏商城不迷路", _this.w*0.05, _this.h*0.96);
// context.setStrokeStyle("#FFFFFF")
// context.setLineWidth(5)
// context.rect(0, 0, 375, 667)
// context.stroke()
context.draw()
setTimeout(() => {
uni.canvasToTempFilePath({
canvasId: 'firstCanvas',
success: res => {
console.log(res.tempFilePath, '生成图片');
this.firstCanvasImg = res.tempFilePath;
uni.hideLoading();
this.show = false;
uni.showToast({
title: '长按保存',
icon: 'none'
});
},
fail: err => {
console.log('err', err);
uni.showToast({
title: '生成失败',
icon: 'none'
});
uni.hideLoading();
}
});
},1000)
}, 1000);
}
}
}
</script>
<style lang="scss" scoped>
.pages{
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
position: relative;
background-color: #000;
view{
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 1);
position: absolute;
top: 0;
left: 0;
z-index: 99;
}
}
</style>
uniapp-canvas海报模版
最新推荐文章于 2024-09-14 18:27:44 发布