uniapp如何使用canvas绘制海报，自适应屏幕尺寸，并且下载本地？
组件目录 /share-canvas.vue。
·
组件目录 /share-canvas.vue
<template>
<u-popup :show="visiable" closeable @close="hiddenCanvas" zIndex="999999">
<view class="shareModel" @touchstart="" @touchmove="" @touchend="">
<view class="title">分享店铺</view>
<template v-if="visiable">
<canvas canvas-id="posterid" :style="{width:screen_width*375+'px',height:screen_height*0.65+'px'}"
class="myCanvas" disable-scroll="true" @touchstart="" @touchmove="" @touchend=""></canvas>
</template>
<view class="share-bot" @click.stop>
<view class="share-btns">
<!-- <view class="btns-list" @click="handleCopyLink">
<u--image :showLoading="true" :src="copyLink" width="72rpx" height="72rpx" />
<text>复制链接</text>
</view> -->
<view class="btns-list">
<button class="btns-box" open-type="share">
<u--image :showLoading="true" :src="copyLink" width="72rpx" height="72rpx" />
<text>分享链接</text>
</button>
</view>
<view class="btns-list" @click="savePoster(100)">
<u--image :showLoading="true" :src="saveIcon" width="72rpx" height="72rpx" />
<text>保存二维码</text>
</view>
<view class="btns-list" @click="savePoster(200)">
<u--image :showLoading="true" :src="saveIcon" width="72rpx" height="72rpx" />
<text>保存海报</text>
</view>
</view>
</view>
</view>
</u-popup>
</template>
<script>
import {
mapState
} from 'vuex'
import {
createQrCode
} from '@/common/api.js'
export default {
props: {
storeInfo: {
type: Object,
default: () => {}
}
},
data() {
return {
saveIcon: require('../../static/download.png'),
copyLink: require('../../static/copyLink.png'),
goodsIcon: require('../../static/goodsIcon.png'),
qrCode: "",
visiable: false,
screen_height: 0,
screen_width: 0
}
},
computed: {
...mapState(['$userInfo'])
},
created() {
this.screen_height = uni.getSystemInfoSync().windowHeight;
this.screen_width = uni.getSystemInfoSync().windowWidth / 375;
console.log(this.screen_height,'screen_height');
},
methods: {
// 店铺二维码分享
createQrCodeFun() {
uni.showLoading({
title: '二维码加载中...',
mask: true
})
createQrCode({
path: 'pages/home/storePage/index?userGroupAuthId=' + this.storeInfo.userGroupAuthId,
width: 500
}).then(res => {
const {
filePath
} = res.data || {}
// 二维码图片，接口可使用网络地址模拟
this.qrCode = filePath
// 得到二维码绘画
this.setStopter();
}).finally(() => {
uni.hideLoading();
})
},
// 复制链接
handleCopyLink() {
// #ifdef MP-WEIXIN
var shareText = '【' + this.storeInfo.merchantName + '】' + '店铺欢迎您##长按复制此条消息，打开亿联乐购小程序首页即可跳转##' + this
.storeInfo.userGroupAuthId
uni.setClipboardData({
data: shareText,
showToast: false,
success(res) {
console.log("success:" + JSON.stringify(res));
uni.showToast({
title: '复制成功',
icon: 'success'
})
},
fail: () => {
uni.showToast({
title: '复制失败',
icon: 'error'
})
},
complete: () => {}
})
// #endif
},
//显示
showCanvas() {
this.visiable = true
// 得到二维码绘画
this.createQrCodeFun()
},
// 点击关闭
hiddenCanvas() {
this.visiable = false
},
// 绘制海报
async setStopter() {
uni.showLoading({
title: '加载中...',
mask: true
})
var _this = this
var ctx = uni.createCanvasContext('posterid', _this) //创建画笔
// 自适应屏幕关键
let rpx = this.screen_width
ctx.drawImage('/static/share/share.png', 20 * rpx, 0, 330 * rpx, 380 * rpx);
this.canvasFont(ctx, 16 * rpx, '#2D2D2D', this.storeInfo.merchantName, 100 * rpx, 50 * rpx)
this.drawRoundRect(ctx, 90 * rpx, 70 * rpx, 192 * rpx, 192 * rpx, 12 * rpx, '#F5F5F5')
let banerQrCode = await this.downloadImage(this.qrCode)
if (banerQrCode.tempFilePath) {
ctx.save()
ctx.drawImage(banerQrCode.tempFilePath, 100 * rpx, 80 * rpx, 172 * rpx, 172 * rpx);
ctx.restore()
}
this.canvasFont(ctx, 14 * rpx, '#999999', '（微信扫描二维码即可进入）', 100 * rpx, 280 * rpx)
ctx.drawImage('../../static/goodsIcon.png', 265 * rpx, 290 * rpx, 50 * rpx, 50 * rpx);
const {
portraitFile,
userName = "亿联乐购用户"
} = this.$userInfo
if (portraitFile && portraitFile.staticPath) {
let userPortraitFile = await this.downloadImage(portraitFile.staticPath)
ctx.save()
ctx.drawImage(userPortraitFile.tempFilePath, 50 * rpx, 300 * rpx, 32 * rpx, 32 * rpx);
ctx.restore()
} else {
ctx.drawImage('/static/share/user.png', 50 * rpx, 300 * rpx, 32 * rpx, 32 * rpx)
}
this.canvasFont(ctx, 12 * rpx, '#2D2D2D', userName, 90 * rpx, 320 * rpx)
// ctx.draw()
ctx.draw(true, () => {
uni.hideLoading()
})
console.log('绘画完成')
},
canvasFont(ctx, fs, color, txt, x, y) { //绘制文字
ctx.setFontSize(fs)
ctx.setFillStyle(color)
ctx.fillText(txt, x, y)
},
//圆角矩形
drawRoundRect(ctx, x, y, width, height, radius, color) {
ctx.save();
ctx.beginPath();
ctx.setFillStyle(color);
ctx.setStrokeStyle(color)
ctx.setLineJoin('round'); //交点设置成圆角
ctx.setLineWidth(radius);
ctx.strokeRect(x + radius / 2, y + radius / 2, width - radius, height - radius);
ctx.fillRect(x + radius, y + radius, width - radius * 2, height - radius * 2);
ctx.stroke();
ctx.closePath();
},
downloadImage(url) { //绘制网络图片，网络图片需要先缓存到本地再绘制
return new Promise((resolve, reject) => {
uni.downloadFile({ // 还可以使用 uni.getImageInfo 方法
url: url,
success: (res) => {
return resolve(res)
},
fail: (err) => {
return reject(err)
}
})
})
},
// 保存图片手机本地(二维码)
saveImageToPhotosQrCode() {
uni.showLoading({
title: '二维码下载中'
});
const that = this;
uni.downloadFile({
url: that.qrCode, //二维码的地址
success: function(res) {
const tempFilePath = res.tempFilePath //通过res中的tempFilePath 得到需要下载的图片地址
uni.saveImageToPhotosAlbum({
filePath: tempFilePath,
success: () => {
uni.hideLoading();
uni.showToast({
title: '二维码已存入相册'
});
},
fail: () => {
uni.hideLoading();
uni.showToast({
title: '下载失败',
icon: 'error'
});
},
complete: () => {}
});
}
})
},
// 保存海报
saveImageToPhotosPoster() {
uni.showLoading({
title: '海报下载中...'
});
uni.canvasToTempFilePath({
canvasId: 'posterid',
success: function(res) {
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success(result) {
uni.hideLoading()
uni.showToast({
title: '海报已存入相册',
icon: 'success',
duration: 2000
})
},
fail: () => {
uni.hideLoading()
}
})
},
complete(res) { //不管成功或者失败都会执行
console.log('canvas转成图片结果', res)
}
}, this);
},
//保存海报和二维码
saveImageToPhotosAlbumFun(flag) {
if (flag === 100) {
// 保存二维码
this.saveImageToPhotosQrCode()
} else {
// 保存海报
this.saveImageToPhotosPoster()
}
},
//保存图片到相册
savePoster(flag) {
const that = this;
// #ifdef MP-WEIXIN
uni.getSetting({
success: res => {
if (res.authSetting['scope.writePhotosAlbum']) {
that.saveImageToPhotosAlbumFun(flag)
} else {
uni.authorize({
scope: 'scope.writePhotosAlbum',
success: () => {
that.saveImageToPhotosAlbumFun(flag)
},
fail: () => {
uni.showModal({
title: '提示',
content: '请先在设置页面打开“保存相册”使用权限',
confirmText: '去设置',
cancelText: '算了',
success: data => {
if (data.confirm) {
uni.openSetting();
}
}
});
},
complete: res => {}
});
}
}
});
// #endif
}
}
}
</script>
<style lang="scss" scoped>
// 边框样式
button::after {
border: 0;
}
.shareModel {
width: 100%;
background-color: #F5F5F5;
color: #2D2D2D;
.title {
padding: 32rpx;
text-align: center;
font-size: 32rpx;
font-weight: bold;
}
.share-container {
margin: 0 80rpx 24rpx;
padding: 32rpx;
height: 100%;
background: rgba(255, 255, 255, 0.39);
box-shadow: 0 6rpx 20rpx rgba(110, 108, 108, 0.1);
border-radius: 24rpx;
.merchant-info {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.merchantName {
margin-bottom: 48rpx;
font-weight: bold;
font-size: 32rpx;
}
.tip {
padding: 24rpx 0 48rpx;
color: #999999;
font-size: 24rpx;
}
.store-img {
padding: 20rpx;
background-color: #F5F5F5;
.img {
width: 380rpx;
height: 380rpx;
}
}
}
.user-info {
display: flex;
align-items: center;
justify-content: space-between;
.header-name {
display: flex;
align-items: center;
text {
margin-left: 12rpx;
}
}
}
}
.share-bot {
width: 100%;
background: #FFFFFF;
.share-btns {
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
padding: 30rpx 0;
.btns-list,
.btns-share,
.btns-box {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #FFFFFF;
text {
color: #2D2D2D;
font-size: 28rpx;
margin-top: 8rpx;
}
}
}
}
}
</style>
父组件使用
父组件引入
<share-model-canvas ref="poster" :storeInfo="merchantInfo"></share-model-canvas>
<script>
import ShareModelCanvas from './shareModel/share-canvas.vue'
//显示绘制店铺海报
sharePoster() {
// canvas操作
this.$refs.poster.showCanvas()
}
</script>效果图
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献2条内容
所有评论(0)