uiapp插件
uiapp插件有轮播图，但是没有保存功能，下面是自己写的
qrcode.vue图片效果
qrcode.vue源码完整版
<template>
<view class="qrcode">
<div class="qrcode_swiper SourceHanSansSC-Normal">
<!-- <cc-scroolCard :dataInfo="datas" :swiperIndex="swiperIndex" @change="swiperChangeClick"></cc-scroolCard> -->
<!-- // 下面全是引入swiper数据 start！！！！！！！ -->
<view class="swiper-wrap" v-if="imgList.length">
<!-- previous-margin="111rpx" next-margin="111rpx" 控制左右间距 -->
<swiper class="image-container" previous-margin="111rpx" next-margin="111rpx" circular
@change="swiperChange">
<!-- currentIndex索引默认0 data -->
<swiper-item :class="currentIndex == index ? 'swiper-item' : 'swiper-item-side'"
v-for="(item, index) in imgList" :key="index">
<view class="item-content" :class="currentIndex == index ? 'item-img' : 'item-img-side'">
<image :src="item.file_path" lazy-load :style="dontFirstAnimation ? 'animation: none;' : ''"
mode="aspectFill"></image>
<!-- 保存图片背景颜色是canvas绘画上去的，而不是css样式，但是css也必须设置颜色，因为要显示 -->
<image :src="bgwhite" class="bgwhiteImg">
<view class="bottom-box flex-center">
<!-- 二维码图片 -->
<image :src="qrcode" class="code"></image>
<view class="right-inner">
<view class="invite-top">我的邀请码</view>
<view class="invite-center">
{{inviteCode}}
</view>
<view class="font-color-46 invite-bottom">长按识别二维码加入中闽天品</view>
</view>
</view>
</image>
</view>
</swiper-item>
</swiper>
</view>
<!-- 画布 -->
<view style="width: 100%;z-index: 500;position: fixed;left: 0;top: -1000vh;">
<view style="width: 100%;height: 1624upx;position: relative;background-color: #FFFFFF;">
<canvas style="width: 400rpx;height: 710rpx;" canvas-id="myCanvas" ref="myBox"></canvas>
</view>
</view>
<!-- // 上面全是引入swiper数据 end！！！！！！！ -->
</div>
<!-- 我的邀请码 -->
<view class="myinvitationcode">
<view class="myinvitationcode_lft">
<view class="myinvitationcode_lft_top">
我的邀请码
</view>
<view class="myinvitationcode_lft_btm">
{{invite_code}}
</view>
</view>
<view class="myinvitationcode_rgt" @tap="copy(invite_code)">
<text class="myinvitationcode_rgt_txt">复制</text>
</view>
<view style="width: 100rpx; height: 100rpx; border: 1rpx solid red;" @tap="getSwiper">
跳转
</view>
</view>
<!-- 邀请步骤 -->
<view class="invitationsteps">
<view class="invitationsteps_lft">
<text class="invitationsteps_lft_one">
邀请步骤
</text>
<text class="invitationsteps_lft_two">
1.分享邀请海报给好友
</text>
<text class="invitationsteps_lft_two">
2.好友通过海报下载APP
</text>
<text class="invitationsteps_lft_two">
3.好友注册APP时填写您的邀请码
</text>
</view>
<view class="invitationsteps_rgt">
<image :src="qrcode_url" mode="aspectFill" class="poster_image"></image>
</view>
</view>
<!-- 保存按钮 -->
<view class="btns-wrap">
<!-- 下面这个要 -->
<!-- <button class="btn-red" type="default" @click="savePosterImg">保存图片</button>-->
<!-- #ifdef MP || APP-PLUS -->
<!-- <button class="btn-red" type="default" @click="downLoad">保存图片</button> -->
<!-- <button type="default" @click="downLoad">
<image src="../../../static/poster/posterDownload.png" mode="aspectFill"></image>
<text>保存图片</text>
</button> -->
<view class="wrapBtn" type="default" @click="downLoad">
<image src="../../../static/poster/posterDownload.png" mode="aspectFill"></image>
<text>保存图片到相册</text>
</view>
<!-- #endif -->
<!-- <button class="btn-red" type="default" @click="savePosterImg">保存图片</button> -->
<!-- H5 不加保存了 下面这个不要 -->
<!-- #ifdef H5 -->
<!-- <view class="f34 tc ww100" type="default">长按保存图片</view> -->
<!-- #endif -->
</view>
</view>
</template>
<script>
// import bwSwiper from '@/wxcomponents/bw-swiper/bw-swiper.vue';
export default {
components: {
// bwSwiper
},
data() {
return {
qrcode_url: '',
// user_id: '',
invite_code: '',
// 下面全是引入swiper数据 start！！！！！！！
// 接口获取swiper图片数组
imgList: [],
// 本地测试假数据
// imgList: [
// {
// currentIndex: 0,
// file_path: 'https://testshop.yunjingwl.com/uploads/20230919/940337925d4f0a897d8447dd9b72d918.jpg',
// },
// {
// currentIndex: 1,
// file_path: 'https://testshop.yunjingwl.com/uploads/20230919/7686286376d8ab9627c892776384cf20.png',
// },
// {
// currentIndex: 2,
// file_path: 'https://testshop.yunjingwl.com/uploads/20230919/940337925d4f0a897d8447dd9b72d918.jpg',
// },
// {
// currentIndex: 3,
// file_path: 'https://testshop.yunjingwl.com/uploads/20230919/7686286376d8ab9627c892776384cf20.png',
// },
// ],
// 轮播图索引index默认选中0，第一个
currentIndex: 0,
dontFirstAnimation: true,
codeTwo: '',
inviteCode: '', //邀请码
// canvas绘制的图片路径
picture: uni.getStorageSync('tempFilePath'),
// 接口获取二维码图片
qrcode: '', // view上面也要绑定image 绑定src路径
bgwhite: '', // swiper底部白色背景图,要绑定image 绑定src路径
// 上面全是引入swiper数据 end ！！！！！！！
}
},
onShow() {
// 下面全是引入swiper数据 start！！！
this.getCavasSwiperImgData();
// 上面全是引入swiper数据 end！！！
},
mounted() {
/*获取数据1*/
this.getData();
// this.user_id = uni.getStorageSync('user_id');
// 获取我的邀请码
this.getMycodeData();
},
methods: {
/*获取数据*/
getData() {
let self = this;
uni.showLoading({
title: '加载中',
});
let source = self.getPlatform();
self._get('plus.agent.qrcode/poster', {
source: source
}, function(data) {
uni.hideLoading();
self.qrcode_url = data.data.qrcode;
});
},
// 复制按钮https://blog.csdn.net/Zhuangvi/article/details/113089000
copy(value) {
uni.setClipboardData({
data: value + '', // 接受字符串类型 value转化为字符串
success: () => {
uni.showToast({
title: '复制成功',
duration: 2000,
icon: 'success'
});
}
});
},
// 获取我的邀请码
getMycodeData() {
let self = this;
uni.showLoading({
title: '加载中'
});
self._post('user.index/detail', {
source: self.getPlatform()
}, function(res) {
//#ifdef MP-WEIXIN
if (res.data.getPhone) {
//#ifdef MP-WEIXIN
self.gotoPage('/pages/login/bindmobile');
//#endif
//#ifndef MP-WEIXIN
self.bindMobile();
//#endif
return;
}
//#endif
// self.detail = res.data.userInfo;
// swiper 数据 end !!!!
// swiper里面的 邀请码
self.inviteCode = res.data.userInfo.invite_code;
// swiper 数据 end !!!!
// 图片下面的 我的邀请码
self.invite_code = res.data.userInfo.invite_code
// console.log(res, 'resssself.invite_code');
uni.hideLoading();
});
},
// 跳转自己封装的海报swiper组件
getSwiper() {
console.log(111);
uni.navigateTo({
url: '/pages/agent/qrcode/qrcodeSwiper/qrcodeSwiper',
})
},
// 下面全是引入swiper数据 start！！！！！
// 获取背景图 二维码后 执行 => cavas画布绘画
// 必须先获取图片后在 执行 => cavas画布绘画 => 否则空白图片
async getCavasSwiperImgData() {
let self = this;
// uni.showLoading({
// title: '加载中',
// });
let source = self.getPlatform();
self._get('plus.agent.qrcode/poster', {
source: source
},
res => {
// 必须是es6语法否则报错，如何这个不行就缓存普通函数funtion，报错显示this.setcanvas();未找到
uni.hideLoading();
if (res.data) {
// console.log(res,'111获取swiper数组路径&&&222二维码路径');
self.imgList = res.data.poster;
self.qrcode = res.data.qrcode;
self.bgwhite = res.data.back;
// let qrcode_Path = uni.setStorageSync('qrcodePath',res.data.qrcode);
// qrcode 二维码路径 放到本地存储防止 data取值为空
uni.setStorageSync('qrcodePath', res.data.qrcode);
// 获取底部白色背景图
uni.setStorageSync('bgwhitePath', res.data.back);
// 必须先获取图片二维码文字完后执行 => 后 canvas绘画 this.setcanvas() 这个方法
this.setcanvas();
}
});
},
// 这里面应该获取数字和二维码 这个是原始案例没用到注释即可 里面有需要兼容编译
// async userFission() {
// let source = ''
// // #ifdef APP-PLUS
// source = 'app'
// // #endif
// // // #ifdef MP-WEIXIN
// // source = 'wx'
// // // #endif
// // #ifdef H5
// source = 'h5'
// // #endif
// this._post('user.user/getMyInvitationInfo', {
// category_id: 5,
// source: source
// }, res => {
// if (res.data) {
// const {
// rtn
// } = res.data;
// this.codeTwo = rtn.invitation_code_img;
// this.inviteCode = rtn.invitation_code;
// this.imgList = rtn.supplier_bg;
// // 必须先获取图片二维码文字完后执行 => 后 canvas绘画 this.setcanvas() 这个方法
// this.setcanvas();
// }
// });
// },
/**该方法用来绘制一个有填充色的圆角矩形
*@param cxt:canvas的上下文环境
*@param x:左上角x轴坐标
*@param y:左上角y轴坐标
*@param width:矩形的宽度
*@param height:矩形的高度
*@param radius:圆的半径
*@param fillColor:填充颜色
**/
fillRoundRect(cxt, x, y, width, height, radius, /*optional*/ fillColor) {
//圆的直径必然要小于矩形的宽高
if (2 * radius > width || 2 * radius > height) {
return false;
}
cxt.save();
cxt.translate(x, y);
//绘制圆角矩形的各个边
this.drawRoundRectPath(cxt, width, height, radius);
cxt.fillStyle = fillColor || "#fff"; //若是给定了值就用给定的值否则给予默认值
cxt.fill();
cxt.restore();
},
drawRoundRectPath(cxt, width, height, radius) {
cxt.beginPath(0);
//从右下角顺时针绘制，弧度从0到1/2PI
cxt.arc(width - radius, height - radius, radius, 0, Math.PI / 2);
//矩形下边线
cxt.lineTo(radius, height);
//左下角圆弧，弧度从1/2PI到PI
cxt.arc(radius, height - radius, radius, Math.PI / 2, Math.PI);
//矩形左边线
cxt.lineTo(0, radius);
//左上角圆弧，弧度从PI到3/2PI
cxt.arc(radius, radius, radius, Math.PI, Math.PI * 3 / 2);
//上边线
cxt.lineTo(width - radius, 0);
//右上角圆弧
cxt.arc(width - radius, radius, radius, Math.PI * 3 / 2, Math.PI * 2);
//右边线
cxt.lineTo(width, height - radius);
cxt.closePath();
},
// 1.获取图片下载下来 通过异步[return new Promise]返回到 绘制返回到下面
// => setcanvas() 里面 =>ctx.drawImage(await this.downloadFiles 的await是等待的意思 return new Promise返回图片绘制
downloadFiles(url, that) {
// console.log(url.file_path, '图片地址未取到llllll');
// console.log(that, '全局Vue this');
return new Promise(function(resolve, reject) {
uni.downloadFile({
url: url.file_path,
success: function(res) {
// console.log(url.file_path,'resIIIIIIIIIIIIIIIIIIIIII');
if (res.statusCode == 200) {
resolve(res.tempFilePath)
} else {
console.log('出错了')
}
},
fail: function() {
console.log('服务未返回')
}
})
})
},
// 获取二维码
downloadQrcode(url, that) {
// console.log(url.file_path, '图片地址未取到llllll');
// console.log(that, '全局Vue this');
// console.log(url, '获取二维码图片路径');
return new Promise(function(resolve, reject) {
uni.downloadFile({
url: url,
success: function(res) {
// console.log(url.file_path,'resIIIIIIIIIIIIIIIIIIIIII');
if (res.statusCode == 200) {
resolve(res.tempFilePath)
} else {
console.log('出错了')
}
},
fail: function() {
console.log('服务未返回')
}
})
})
},
// 这里是绘制
async setcanvas() {
let bg_img = this.imgList[this.currentIndex];
// console.log(bg_img, '滑动的每一个对象');
// 获取整个canvas上面view
let ctx = uni.createCanvasContext('myCanvas');
// var ctx = uni.createCanvasContext('myCanvas', this);// 上面报错就用这个
// 这个是背景图swiper !!! 获取每个swiper下面item滑动选中的哪一个
ctx.drawImage(await this.downloadFiles(bg_img, this), 0, 0, uni.upx2px(400), uni.upx2px(
710)); //绘制图 uni.upx2px(750) *
// ctx.drawImage(this.codeTwo, uni.upx2px(28), uni.upx2px(590), uni.upx2px(82), uni.upx2px(82));
// 注释1
// ctx.drawImage(await this.downloadFiles(this.codeTwo, this), uni.upx2px(28), uni.upx2px(590), uni
// .upx2px(82), uni.upx2px(82));
// ctx.drawImage(await this.downloadFiles(this.qrcode, this), uni.upx2px(28), uni.upx2px(590), uni
// .upx2px(82), uni.upx2px(82));
// ctx.drawImage(this.qrcode, uni.upx2px(28), uni.upx2px(590), uni
// .upx2px(82), uni.upx2px(82));
// ctx.drawImage(await this.downloadFiles(this.qrcode, this), uni.upx2px(28), uni.upx2px(590), uni.upx2px(82), uni.upx2px(82));
// 底部白色背景图1
// ctx.drawImage(await this.downloadQrcode(this.bgwhite, this), uni.upx2px(26), uni.upx2px(590), uni
// .upx2px(350), uni
// .upx2px(100));
ctx.drawImage(await this.downloadQrcode(this.bgwhite, this), uni.upx2px(26), uni.upx2px(590), uni
.upx2px(350), uni
.upx2px(100));
// qrcode 二维码路径 放到本地存储防止 data取值为空
let qrcode_Path = uni.getStorageSync('qrcodePath');
// 可以二维码
// ctx.drawImage(await this.downloadQrcode(qrcode_Path, this), uni.upx2px(28), uni.upx2px(590), uni
// .upx2px(82), uni.upx2px(82));
ctx.drawImage(await this.downloadQrcode(qrcode_Path, this), uni.upx2px(35), uni.upx2px(600), uni
.upx2px(82), uni.upx2px(82));
ctx.font = 'normal 8px sans-serif';
ctx.fillStyle = "#848484";
// ctx.fillText('我的邀请码', uni.upx2px(130), uni.upx2px(606));
ctx.fillText('我的邀请码', uni.upx2px(135), uni.upx2px(620));
ctx.font = 'normal 10px sans-serif';
ctx.fillStyle = "#FF2741";
// ctx.fillText(this.inviteCode, uni.upx2px(130), uni.upx2px(640));
ctx.fillText(this.inviteCode, uni.upx2px(135), uni.upx2px(648));
ctx.font = 'normal 8px sans-serif';
ctx.fillStyle = "#282828";
// ctx.fillText('长按识别二维码加入中闽天品', uni.upx2px(130), uni.upx2px(670));
ctx.fillText('长按识别二维码加入中闽天品', uni.upx2px(135), uni.upx2px(675));
ctx.draw(false, () => {
// console.log('绘制完成')
// 注释2
// console.error(bg_img)
this.getFail();
})
// // 注释2
// console.log(bg_img, 'bg_imgbg_img');
},
//点击画布宽高设置 图片
getFail(type) {
let self = this;
uni.canvasToTempFilePath({ // 把画布转化成临时文件1
x: 0,
y: 0,
width: uni.upx2px(400), // 截取的画布的宽
height: uni.upx2px(710), // 截取的画布的高
destWidth: uni.upx2px(360) * 3, // 保存成的画布宽度
destHeight: uni.upx2px(680) * 3, // 保存成的画布高度
fileType: 'png', // 保存成的文件类型
quality: 1, // 图片质量
canvasId: 'myCanvas', // 画布ID
success(res) {
// 绘画图片路径
self.picture = res.tempFilePath;
// 绘制最后路径
// console.log(res, '绘制完成图片路径');
uni.setStorageSync('tempFilePath', res.tempFilePath);
self.picture = uni.setStorageSync('tempFilePath', res.tempFilePath);
},
fail(fail) {
uni.showToast({
title: '保存失败，稍后再试', //'保存失败，稍后再试'
duration: 2000,
icon: 'none'
})
uni.hideLoading();
}
})
},
// 点击下载保存相册按钮
downLoad() {
// console.log(this.imgList[this.currentIndex],'this.imgList[this.currentIndex]');
console.log(uni.getStorageSync('tempFilePath'), 'getStorageSync下载按钮未取到路径啊啊');
let self = this;
// 2-保存图片至相册
uni.saveImageToPhotosAlbum({ // 存成图片至手机1
// filePath: this.picture,
// filePath: pathw,
// filePath:'data:image/png;base64,base64'+ uni.getStorageSync('tempFilePath'),
filePath: uni.getStorageSync('tempFilePath'), // 未取到路径myPromise
success(res2) {
uni.hideLoading();
uni.showToast({
title: '保存成功', //'保存成功'
duration: 500
})
},
fail(res3) {
console.log(res3, 'res3AAAAAA');
if (res3.errMsg === 'saveImageToPhotosAlbum:fail auth deny') {
uni.showToast({
title: '保存失败，稍后再试1', //'保存失败，稍后再试'
duration: 2000,
icon: 'none'
})
uni.hideLoading();
} else {
uni.showToast({
title: '保存失败，稍后再试2', //'保存失败，稍后再试'
duration: 2000,
icon: 'none'
})
uni.hideLoading();
}
}
})
},
copyCode() {
uni.setClipboardData({
data: this.inviteCode,
success: () => {
uni.showToast({
title: '复制成功'
})
}
});
},
swiperChange(e) {
this.dontFirstAnimation = false
this.currentIndex = e.detail.current
this.setcanvas()
// 切换调用图片二维码数据
this.getCavasSwiperImgData();
},
// 上面全是引入swiper数据 end ！！！！！
}
}
</script>
<style lang="scss" scoped>
page {
background: #F8F8F8;
}
.qrcode {
width: 100%;
// height: 100vh !important;
}
// 下面全是引入swiper数据 start！！！！！!
.qrcode_swiper {
margin-top: 71rpx;
// height: 500rpx;
// border:1rpx solid red;
.swiper-wrap {
padding-top: 20rpx;
}
.image-container {
width: 750rpx;
// height: 939rpx;
height: 756rpx;
}
.item-img {
width: 528rpx;
// height: 939rpx;
height: 756rpx;
border-radius: 14rpx;
animation: to-big .3s;
}
// 中间选中
.swiper-item {
// width: 528rpx;
width: 540rpx;
// height: 939rpx;
height: 756rpx;
display: flex;
justify-content: center;
align-items: center;
}
.item-img-side {
width: 528rpx;
// height: 939rpx;
height: 756rpx;
border-radius: 14rpx;
animation: to-mini .3s;
// transform: scale(0.85);
transform: scale(0.85);
// @keyframes to-mini 也要改 在最下面scale(0.85)
// 两侧底部有白边超出父元素隐藏
overflow: hidden;
}
// 两边
.swiper-item-side {
width: 528rpx;
// height: 939rpx;
height: 756rpx;
display: flex;
justify-content: center;
align-items: center;
// transform: scale(0.85);
transform: scale(0.85);
}
.item-content {
position: relative;
image {
width: 528rpx;
// height: 939rpx;
height: 756rpx;
border-radius: 20rpx;
}
.bgwhiteImg {
margin-left: 20rpx;
// border-radius: 20rpx;
}
.bottom-box {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 31rpx;
padding: 16rpx 19rpx;
background-color: #FFFFFF;
width: 492rpx;
border-radius: 10rpx;
// height: 140rpx;
display: flex;
box-sizing: border-box;
.code {
width: 111rpx;
height: 108rpx;
margin-right: 12rpx;
flex-shrink: 0;
}
.right-inner {
height: 80rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
.invite-top {
font-size: 25rpx;
font-family: Microsoft YaHei;
font-weight: 400;
color: #848484;
// line-height: 22rpx;
}
.invite-center {
font-size: 28rpx;
font-family: Microsoft YaHei;
font-weight: bold;
color: #FF2741;
// line-height: 1.5;
}
.invite-bottom {
font-size: 25rpx;
font-family: Microsoft YaHei;
font-weight: bold;
color: #282828;
// line-height: 1.5;
// 强制不换行
white-space: nowrap;
}
}
}
}
@keyframes to-mini {
from {
transform: scale(1);
}
to {
// transform: scale(0.85);
transform: scale(0.85);
}
}
@keyframes to-big {
from {
// transform: scale(0.85);
transform: scale(0.85);
}
to {
transform: scale(1);
}
}
}
// 上面全是引入swiper数据 end ！！！！！
// 我的邀请码
.myinvitationcode {
// margin-top: 56rpx;
width: 700rpx;
height: 178rpx;
background: #FFFFFF;
border-radius: 10rpx;
margin: 56rpx auto;
display: flex;
align-items: center;
justify-content: space-between;
.myinvitationcode_lft {
margin-left: 49rpx;
display: flex;
flex-direction: column;
.myinvitationcode_lft_top {
font-size: 26rpx;
font-family: Microsoft YaHei;
font-weight: 400;
color: #727272;
line-height: 38rpx;
}
.myinvitationcode_lft_btm {
font-size: 45rpx;
font-family: Microsoft YaHei;
font-weight: bold;
color: #000000;
line-height: 1.2;
}
}
.myinvitationcode_rgt {
margin-right: 49rpx;
width: 168rpx;
height: 70rpx;
// background: #FF2741;
// background: rgb(223, 216, 239);
background: #000;
// opacity: 0.1;
border-radius: 35rpx;
display: flex;
justify-content: center;
align-items: center;
.myinvitationcode_rgt_txt {
font-size: 32rpx;
font-family: Microsoft YaHei;
font-weight: 400;
// color: FF2741;
// color: rgb(223, 51, 93);
color: #fff;
// line-height: 24rpx;
}
}
}
// 邀请步骤
.invitationsteps {
display: flex;
justify-content: space-between;
flex-direction: row;
align-items: center;
.invitationsteps_lft {
margin-left: 31rpx;
display: flex;
flex-direction: column;
.invitationsteps_lft_one {
font-size: 28rpx;
font-family: Microsoft YaHei;
font-weight: bold;
color: #9F9F9F;
line-height: 38rpx;
}
.invitationsteps_lft_two {
font-size: 28rpx;
font-family: Microsoft YaHei;
font-weight: 400;
color: #AFAEAE;
line-height: 38rpx;
}
}
.invitationsteps_rgt {
margin-right: 53rpx;
width: 185rpx;
height: 185rpx;
}
}
// .poster_img {
// width: 100%;
// height: 100vh !important;
// position: absolute;
// }
// .poster_image {
// width: 100%;
// height: 100vh !important;
// }
// uni-image {
// width: 100%;
// height: 100vh !important;
// position: absolute;
// }
// .qrcode_img_box {
// width: 100%;
// display: flex;
// justify-content: center;
// .qrcode_img {
// width: 80%;
// position: relative;
// border-radius: 15rpx;
// position: fixed;
// bottom: 150rpx;
// z-index: 999;
// background-color: #fff;
// // width: 100rpx !important;
// // height: 100rpx !important;
// display: flex;
// padding: 20rpx;
// // margin: 20rpx;
// .qrcode_img_left {
// width: 150rpx;
// height: 150rpx;
// }
// .qrcode_img_right {
// display: flex;
// flex-direction: column;
// justify-content: space-around;
// margin-left: 20rpx;
// .qrcode_img_right_top {
// color: #ccc;
// font-size: 30rpx
// }
// .qrcode_img_right_center {
// color: rgb(223, 70, 109);
// font-size: 30rpx;
// font-weight: 800;
// }
// .qrcode_img_right_tbtm {
// color: #000;
// font-size: 30rpx;
// }
// }
// }
// }
.btns-wrap {
position: fixed;
height: 88rpx;
right: 0;
bottom: 35rpx;
left: 0;
display: flex;
z-index: 10;
}
// button样式
// .btns-wrap button {
// width: 700rpx;
// height: 94rpx;
// background: linear-gradient(90deg, #FF2C43, #FC5B5A);
// border-radius: 10rpx;
// margin: 0 auto;
// display: flex;
// justify-content: center;
// align-items: center;
// }
// .btns-wrap button image{
// width: 33rpx;
// height: 33rpx;
// }
// .btns-wrap button text {
// font-size: 28rpx;
// font-family: Microsoft YaHei;
// font-weight: 400;
// color: #FFFFFF;
// line-height: 88rpx;
// }
.wrapBtn {
width: 700rpx;
height: 94rpx;
background: linear-gradient(90deg, #FF2C43, #FC5B5A);
border-radius: 10rpx;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
.wrapBtn image {
width: 35rpx;
height: 35rpx;
}
.wrapBtn text {
font-size: 35rpx;
font-family: Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
line-height: 27rpx;
// margin-left: 13rpx;
margin-left: 10rpx;
}
.btns-wrap .btn-red {
width: 100%;
height: 88rpx;
line-height: 88rpx;
border-radius: 0;
}
</style>
封装图片效果
封装源码qrcodeSwiper.vue
<template>
<view class="page-view SourceHanSansSC-Normal">
<!-- <base-head title="邀请好友"></base-head>
<bg-img :combg="true"></bg-img> -->
<view class="swiper-wrap" v-if="imgList.length">
<!-- previous-margin="111rpx" next-margin="111rpx" 控制左右间距 -->
<swiper class="image-container" previous-margin="111rpx" next-margin="111rpx" circular
@change="swiperChange">
<!-- currentIndex索引默认0 data -->
<swiper-item :class="currentIndex == index ? 'swiper-item' : 'swiper-item-side'"
v-for="(item, index) in imgList" :key="index">
<view class="item-content" :class="currentIndex == index ? 'item-img' : 'item-img-side'">
<image :src="item.file_path" lazy-load :style="dontFirstAnimation ? 'animation: none;' : ''"
mode="aspectFill"></image>
<!-- 保存图片背景颜色是canvas绘画上去的，而不是css样式，但是css也必须设置颜色，因为要显示 -->
<image :src="bgwhite" class="bgwhiteImg">
<view class="bottom-box flex-center">
<!-- 二维码图片 -->
<image :src="qrcode" class="code"></image>
<view class="right-inner">
<view class="invite-top">我的邀请码</view>
<view class="invite-center">
{{inviteCode}}
</view>
<view class="font-color-46 invite-bottom">长按识别二维码加入中闽天品</view>
</view>
</view>
</image>
</view>
</swiper-item>
</swiper>
</view>
<view class="section-wrap">
<view class="group-three-wrap flex-item-center" v-if="imgList.length">
<view class="flex-item-center btn" @tap="downLoad">
<!-- <image src="https://app.moai.pro/static/moai/xiazai.png"></image> -->
<text class="font-color-fff">保存到手机</text>
</view>
</view>
</view>
<!-- 画布 -->
<view style="width: 100%;z-index: 500;position: fixed;left: 0;top: -1000vh;">
<view style="width: 100%;height: 1624upx;position: relative;background-color: #FFFFFF;">
<canvas style="width: 400rpx;height: 710rpx;" canvas-id="myCanvas" ref="myBox"></canvas>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
// 接口获取swiper图片数组
imgList: [],
// 本地测试假数据
// imgList: [
// {
// currentIndex: 0,
// file_path: 'https://testshop.yunjingwl.com/uploads/20230919/940337925d4f0a897d8447dd9b72d918.jpg',
// },
// {
// currentIndex: 1,
// file_path: 'https://testshop.yunjingwl.com/uploads/20230919/7686286376d8ab9627c892776384cf20.png',
// },
// {
// currentIndex: 2,
// file_path: 'https://testshop.yunjingwl.com/uploads/20230919/940337925d4f0a897d8447dd9b72d918.jpg',
// },
// {
// currentIndex: 3,
// file_path: 'https://testshop.yunjingwl.com/uploads/20230919/7686286376d8ab9627c892776384cf20.png',
// },
// ],
// 轮播图索引index默认选中0，第一个
currentIndex: 0,
dontFirstAnimation: true,
codeTwo: '',
inviteCode: '', //邀请码
// canvas绘制的图片路径
picture: uni.getStorageSync('tempFilePath'),
// 接口获取二维码图片
qrcode: '', // view上面也要绑定image 绑定src路径
bgwhite: '', // swiper底部白色背景图,要绑定image 绑定src路径
}
},
onShow() {
this.getCavasSwiperImgData();
// this.userFission();// 之前是注释状态
},
onLoad() {
// console.log(this.imgList,'swiper路径');
// console.log(this.qrcode,'二维码路径');
this.getMycodeData();
},
methods: {
// 获取背景图 二维码后 执行 => cavas画布绘画
// 必须先获取图片后在 执行 => cavas画布绘画 => 否则空白图片
async getCavasSwiperImgData() {
let self = this;
uni.showLoading({
title: '加载中',
});
let source = self.getPlatform();
self._get('plus.agent.qrcode/poster', {
source: source
},
res => {
// 必须是es6语法否则报错，如何这个不行就缓存普通函数funtion，报错显示this.setcanvas();未找到
uni.hideLoading();
if (res.data) {
// console.log(res,'111获取swiper数组路径&&&222二维码路径');
self.imgList = res.data.poster;
self.qrcode = res.data.qrcode;
self.bgwhite = res.data.back;
// let qrcode_Path = uni.setStorageSync('qrcodePath',res.data.qrcode);
// qrcode 二维码路径 放到本地存储防止 data取值为空
uni.setStorageSync('qrcodePath', res.data.qrcode);
// 获取底部白色背景图
uni.setStorageSync('bgwhitePath', res.data.back);
// 必须先获取图片二维码文字完后执行 => 后 canvas绘画 this.setcanvas() 这个方法
this.setcanvas();
}
});
},
// 这里面应该获取数字和二维码 这个是原始案例没用到注释即可
// async userFission() {
// let source = ''
// // #ifdef APP-PLUS
// source = 'app'
// // #endif
// // // #ifdef MP-WEIXIN
// // source = 'wx'
// // // #endif
// // #ifdef H5
// source = 'h5'
// // #endif
// this._post('user.user/getMyInvitationInfo', {
// category_id: 5,
// source: source
// }, res => {
// if (res.data) {
// const {
// rtn
// } = res.data;
// this.codeTwo = rtn.invitation_code_img;
// this.inviteCode = rtn.invitation_code;
// this.imgList = rtn.supplier_bg;
// // 必须先获取图片二维码文字完后执行 => 后 canvas绘画 this.setcanvas() 这个方法
// this.setcanvas();
// }
// });
// },
/**该方法用来绘制一个有填充色的圆角矩形
*@param cxt:canvas的上下文环境
*@param x:左上角x轴坐标
*@param y:左上角y轴坐标
*@param width:矩形的宽度
*@param height:矩形的高度
*@param radius:圆的半径
*@param fillColor:填充颜色
**/
fillRoundRect(cxt, x, y, width, height, radius, /*optional*/ fillColor) {
//圆的直径必然要小于矩形的宽高
if (2 * radius > width || 2 * radius > height) {
return false;
}
cxt.save();
cxt.translate(x, y);
//绘制圆角矩形的各个边
this.drawRoundRectPath(cxt, width, height, radius);
cxt.fillStyle = fillColor || "#fff"; //若是给定了值就用给定的值否则给予默认值
cxt.fill();
cxt.restore();
},
drawRoundRectPath(cxt, width, height, radius) {
cxt.beginPath(0);
//从右下角顺时针绘制，弧度从0到1/2PI
cxt.arc(width - radius, height - radius, radius, 0, Math.PI / 2);
//矩形下边线
cxt.lineTo(radius, height);
//左下角圆弧，弧度从1/2PI到PI
cxt.arc(radius, height - radius, radius, Math.PI / 2, Math.PI);
//矩形左边线
cxt.lineTo(0, radius);
//左上角圆弧，弧度从PI到3/2PI
cxt.arc(radius, radius, radius, Math.PI, Math.PI * 3 / 2);
//上边线
cxt.lineTo(width - radius, 0);
//右上角圆弧
cxt.arc(width - radius, radius, radius, Math.PI * 3 / 2, Math.PI * 2);
//右边线
cxt.lineTo(width, height - radius);
cxt.closePath();
},
// 1.获取图片下载下来 通过异步[return new Promise]返回到 绘制返回到下面
// => setcanvas() 里面 =>ctx.drawImage(await this.downloadFiles 的await是等待的意思 return new Promise返回图片绘制
downloadFiles(url, that) {
// console.log(url.file_path, '图片地址未取到llllll');
// console.log(that, '全局Vue this');
return new Promise(function(resolve, reject) {
uni.downloadFile({
url: url.file_path,
success: function(res) {
// console.log(url.file_path,'resIIIIIIIIIIIIIIIIIIIIII');
if (res.statusCode == 200) {
resolve(res.tempFilePath)
} else {
console.log('出错了')
}
},
fail: function() {
console.log('服务未返回')
}
})
})
},
// 获取二维码
downloadQrcode(url, that) {
// console.log(url.file_path, '图片地址未取到llllll');
// console.log(that, '全局Vue this');
console.log(url, '获取二维码图片路径');
return new Promise(function(resolve, reject) {
uni.downloadFile({
url: url,
success: function(res) {
// console.log(url.file_path,'resIIIIIIIIIIIIIIIIIIIIII');
if (res.statusCode == 200) {
resolve(res.tempFilePath)
} else {
console.log('出错了')
}
},
fail: function() {
console.log('服务未返回')
}
})
})
},
// 这里是绘制
async setcanvas() {
let bg_img = this.imgList[this.currentIndex];
// console.log(bg_img, '滑动的每一个对象');
// 获取整个canvas上面view
let ctx = uni.createCanvasContext('myCanvas');
// var ctx = uni.createCanvasContext('myCanvas', this);// 上面报错就用这个
// 这个是背景图swiper !!! 获取每个swiper下面item滑动选中的哪一个
ctx.drawImage(await this.downloadFiles(bg_img, this), 0, 0, uni.upx2px(400), uni.upx2px(
710)); //绘制图 uni.upx2px(750) *
// ctx.drawImage(this.codeTwo, uni.upx2px(28), uni.upx2px(590), uni.upx2px(82), uni.upx2px(82));
// 注释1
// ctx.drawImage(await this.downloadFiles(this.codeTwo, this), uni.upx2px(28), uni.upx2px(590), uni
// .upx2px(82), uni.upx2px(82));
// ctx.drawImage(await this.downloadFiles(this.qrcode, this), uni.upx2px(28), uni.upx2px(590), uni
// .upx2px(82), uni.upx2px(82));
// ctx.drawImage(this.qrcode, uni.upx2px(28), uni.upx2px(590), uni
// .upx2px(82), uni.upx2px(82));
// ctx.drawImage(await this.downloadFiles(this.qrcode, this), uni.upx2px(28), uni.upx2px(590), uni.upx2px(82), uni.upx2px(82));
// 底部白色背景图1
// ctx.drawImage(await this.downloadQrcode(this.bgwhite, this), uni.upx2px(26), uni.upx2px(590), uni
// .upx2px(350), uni
// .upx2px(100));
ctx.drawImage(await this.downloadQrcode(this.bgwhite, this), uni.upx2px(26), uni.upx2px(590), uni
.upx2px(350), uni
.upx2px(100));
// qrcode 二维码路径 放到本地存储防止 data取值为空
let qrcode_Path = uni.getStorageSync('qrcodePath');
// 可以二维码
// ctx.drawImage(await this.downloadQrcode(qrcode_Path, this), uni.upx2px(28), uni.upx2px(590), uni
// .upx2px(82), uni.upx2px(82));
ctx.drawImage(await this.downloadQrcode(qrcode_Path, this), uni.upx2px(35), uni.upx2px(600), uni
.upx2px(82), uni.upx2px(82));
ctx.font = 'normal 8px sans-serif';
ctx.fillStyle = "#848484";
// ctx.fillText('我的邀请码', uni.upx2px(130), uni.upx2px(606));
ctx.fillText('我的邀请码', uni.upx2px(135), uni.upx2px(620));
ctx.font = 'normal 10px sans-serif';
ctx.fillStyle = "#FF2741";
// ctx.fillText(this.inviteCode, uni.upx2px(130), uni.upx2px(640));
ctx.fillText(this.inviteCode, uni.upx2px(135), uni.upx2px(648));
ctx.font = 'normal 8px sans-serif';
ctx.fillStyle = "#282828";
// ctx.fillText('长按识别二维码加入中闽天品', uni.upx2px(130), uni.upx2px(670));
ctx.fillText('长按识别二维码加入中闽天品', uni.upx2px(135), uni.upx2px(675));
ctx.draw(false, () => {
console.log('绘制完成')
// 注释2
// console.error(bg_img)
this.getFail();
})
// // 注释2
// console.log(bg_img, 'bg_imgbg_img');
},
//点击画布宽高设置 图片
getFail(type) {
let self = this;
uni.canvasToTempFilePath({ // 把画布转化成临时文件1
x: 0,
y: 0,
width: uni.upx2px(400), // 截取的画布的宽
height: uni.upx2px(710), // 截取的画布的高
destWidth: uni.upx2px(400) * 3, // 保存成的画布宽度
destHeight: uni.upx2px(710) * 3, // 保存成的画布高度
fileType: 'jpg', // 保存成的文件类型
quality: 1, // 图片质量
canvasId: 'myCanvas', // 画布ID
success(res) {
// 绘画图片路径
self.picture = res.tempFilePath;
// 绘制最后路径
console.log(res, '绘制完成图片路径');
uni.setStorageSync('tempFilePath', res.tempFilePath);
self.picture = uni.setStorageSync('tempFilePath', res.tempFilePath);
},
fail(fail) {
uni.showToast({
title: '保存失败，稍后再试', //'保存失败，稍后再试'
duration: 2000,
icon: 'none'
})
uni.hideLoading();
}
})
},
// 点击下载保存相册按钮
downLoad() {
// console.log(this.imgList[this.currentIndex],'this.imgList[this.currentIndex]');
console.log(uni.getStorageSync('tempFilePath'), 'getStorageSync下载按钮未取到路径啊啊');
let self = this;
// 2-保存图片至相册
uni.saveImageToPhotosAlbum({ // 存成图片至手机1
// filePath: this.picture,
// filePath: pathw,
// filePath:'data:image/png;base64,base64'+ uni.getStorageSync('tempFilePath'),
filePath: uni.getStorageSync('tempFilePath'), // 未取到路径myPromise
success(res2) {
uni.hideLoading();
uni.showToast({
title: '保存成功', //'保存成功'
duration: 2000
})
},
fail(res3) {
console.log(res3, 'res3AAAAAA');
if (res3.errMsg === 'saveImageToPhotosAlbum:fail auth deny') {
uni.showToast({
title: '保存失败，稍后再试1', //'保存失败，稍后再试'
duration: 2000,
icon: 'none'
})
uni.hideLoading();
} else {
uni.showToast({
title: '保存失败，稍后再试2', //'保存失败，稍后再试'
duration: 2000,
icon: 'none'
})
uni.hideLoading();
}
}
})
},
copyCode() {
uni.setClipboardData({
data: this.inviteCode,
success: () => {
uni.showToast({
title: '复制成功'
})
}
});
},
swiperChange(e) {
this.dontFirstAnimation = false
this.currentIndex = e.detail.current
this.setcanvas()
// 切换调用图片二维码数据
this.getCavasSwiperImgData();
},
// 获取我的邀请码
getMycodeData() {
let self = this;
uni.showLoading({
title: '加载中'
});
self._post('user.index/detail', {
source: self.getPlatform()
}, function(res) {
//#ifdef MP-WEIXIN
if (res.data.getPhone) {
//#ifdef MP-WEIXIN
self.gotoPage('/pages/login/bindmobile');
//#endif
//#ifndef MP-WEIXIN
self.bindMobile();
//#endif
return;
}
//#endif
// self.detail = res.data.userInfo;
// invite_code
self.inviteCode = res.data.userInfo.invite_code
// console.log(self.detail, 'detail');
console.log(res, 'resss');
uni.hideLoading();
});
},
}
}
</script>
<style lang="scss">
page {
background: #FFFFFF;
}
.page-view {}
.section-wrap {
padding: 111rpx 25rpx 44rpx;
.group-three-wrap {
display: flex;
justify-content: center;
.btn {
width: 600rpx;
height: 88rpx;
background: #FFA615;
border-radius: 44rpx;
display: flex;
align-items: center;
justify-content: center;
color: #FFFFFF;
font-size: 28rpx;
image {
width: 26rpx;
height: 26rpx;
margin-right: 12rpx;
}
}
}
}
.swiper-wrap {
padding-top: 20rpx;
}
.image-container {
width: 750rpx;
// height: 939rpx;
height: 756rpx;
}
.item-img {
width: 528rpx;
// height: 939rpx;
height: 756rpx;
border-radius: 14rpx;
animation: to-big .3s;
}
// 中间选中
.swiper-item {
// width: 528rpx;
width: 540rpx;
// height: 939rpx;
height: 756rpx;
display: flex;
justify-content: center;
align-items: center;
}
.item-img-side {
width: 528rpx;
// height: 939rpx;
height: 756rpx;
border-radius: 14rpx;
animation: to-mini .3s;
// transform: scale(0.85);
transform: scale(0.85);
// @keyframes to-mini 也要改 在最下面scale(0.85)
// swiper图两侧底部有白边超出父元素隐藏
overflow:hidden;
}
// 两边
.swiper-item-side {
width: 528rpx;
// height: 939rpx;
height: 756rpx;
display: flex;
justify-content: center;
align-items: center;
// transform: scale(0.85);
transform: scale(0.85);
}
.item-content {
position: relative;
image {
width: 528rpx;
// height: 939rpx;
height: 756rpx;
border-radius: 20rpx;
}
.bgwhiteImg {
margin-left: 20rpx;
// border-radius: 20rpx;
}
.bottom-box {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 31rpx;
padding: 16rpx 19rpx;
background-color: #FFFFFF;
width: 492rpx;
border-radius: 10rpx;
// height: 140rpx;
display: flex;
box-sizing: border-box;
.code {
width: 111rpx;
height: 108rpx;
margin-right: 12rpx;
flex-shrink: 0;
}
.right-inner {
height: 80rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
.invite-top {
font-size: 15rpx;
font-family: Microsoft YaHei;
font-weight: 400;
color: #848484;
line-height: 22rpx;
}
.invite-center {
font-size: 21rpx;
font-family: Microsoft YaHei;
font-weight: bold;
color: #FF2741;
// line-height: 32rpx;
line-height: 2.5;
}
.invite-bottom {
font-size: 16rpx;
font-family: Microsoft YaHei;
font-weight: bold;
color: #282828;
// line-height: 22rpx;
line-height: 1.5;
// 强制不换行
white-space: nowrap;
}
}
}
}
@keyframes to-mini {
from {
transform: scale(1);
}
to {
// transform: scale(0.85);
transform: scale(0.85);
}
}
@keyframes to-big {
from {
// transform: scale(0.85);
transform: scale(0.85);
}
to {
transform: scale(1);
}
}
</style>
最后
感觉文章好的话记得点个心心和关注和收藏，有错的地方麻烦指正一下，如果需要转载,请标明出处，多谢！！！
8556
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
