<template>
<view>
<button @click="open"></button>
<view class="canvasPop" v-if="canvasPopBool" style="z-index: 9999999;">
//关闭按钮
<uni-icons class="close" type="close" size="30" @click="canvasPopBool=false"></uni-icons>
//uniapp自带的组件 canvas-id是组件的标识符 画布组件
<canvas canvas-id="firstCanvas" id="firstCanvas"></canvas>
<view class="btn" @click="saveCanvasFn">保存图片</view>
</view>
</view>
</template>
<script>
export default {
data():{
return{
canvasPopBool:false
}
},
methods:{
open:{
this.canvasPopBool=true
const obj={
imgUrl: this.baseUrl + this.bannerList[0].fileUrl, //内容图片地址
title: this.routeItem.name,//内容 标题
str: 'money',
price:this.routeItem.consumeAmount, //金额
}
this.poster(obj)
},
//生成海报方法
poster(obj){
let context = uni.createCanvasContext('firstCanvas'); //获取到画布组件的唯一标识符ID
//下面两行代码获取到背景图片地址(后端返给存在了本地存储)
let allImg = uni.getStorageSync('allImg');
let newUrl = allImg.pic41;
//获取到到内容图片地址
let newUrlTwo = obj.imgUrl;
uni.showLoading({
title: '努力加载中...',
mask: true
});
uni.downloadFile({ //下载上传方法
url: newUrl, //背景图片地址
success(res) {
uni.hideLoading(); //关闭uni.showLoading
//drawImage绘制图像到画布 第一个参数图片地址 0第一个是距离X轴的距离 0第二个是距离Y轴距离 275是在目标画布上绘制图像的宽度 482是在目标画布上绘制图像的高度
context.drawImage(res.tempFilePath, 0, 0, 275, 482);
context.font = "18px Arial";
//文字颜色
context.fillStyle = '#333';
//测量文本尺寸信息,目前仅返回文本宽度
const textWidth = context.measureText(obj.title).width;
if (textWidth >= 160) {
for (let i = 0; i < 4; i++) {
const dataOne = obj.title.substr(i * 8, 8);
const dataThree = 360 + (i * 20);
//在画布上绘制被填充的文本 dataOne是填充的内容 21是距离X轴的位置 dataThree距离Y轴的位置
context.fillText(dataOne, 21, dataThree);
}
} else {
context.fillText(obj.title, 21, 360);
}
context.font = "18px Arial";
context.fillStyle = '#ff3400';
if (obj.str == 'money') {
context.fillText('¥' + obj.price, 21, 450);
} else if (obj.str == 'jifen') {
context.fillText(obj.price + '积分', 21, 450);
}
uni.downloadFile({
url: newUrlTwo, //内容图片
success(res2) {
context.drawImage(res2.tempFilePath, 21, 100, 233, 233);
context.draw(); //开始绘制
}
});
}
});
}
//保存图片
saveCanvasFn(){
//把当前画布指定区域的内容导出生成指定大小的图片,并返回文件路径。在自定义组件下,第二个参数传入自定义组件实例,以操作组件内 <canvas> 组件。
uni.canvasToTempFilePath({
canvasId:'firstCanvas',
success(res){
//保存图片到相处
uni.saveImageToPhotosAlbum({
filePath:res.tempFilePath,
success(){
this.canvasPopBool = false;
uni.showToast({
title: '图片保存成功',
icon: 'none'
});
}
});
}
})}
}
}
</script>
<style>
// 生成海报盒子样式
.canvasPop {
width: 100%;
height: 100%;
background-color: rgba($color: #000, $alpha: 0.3);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: absolute;
left: 0;
top: 0;
.close {
position: absolute;
right: 30rpx;
top: 30rpx;
}
#firstCanvas {
width: 275px;
height: 482px;
}
.btn {
height: 60rpx;
background-color: blue;
border-radius: 30rpx;
margin-top: 30rpx;
padding: 0 30rpx;
color: white;
line-height: 60rpx;
}
}
</style>
模板: