uni-app 利用canvas画简单海报并保存图片
<template><view class="canvas-box">
<canvasclass="canvas" :style="{width:`${canvasData.image_Width}px;`,height:`${canvasData.image_Height}px;`}" canvas-id="canvasID"></canvas>
<view class="footer">
<view class="preservationBtn" @click="saveImage">保存到相册</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
imgUrl: '',
statusBarHeight: 0,
avatar :'../../static/blue.webp', //头像地址
erweima:'../../static/erweima.webp',//二维码
canvasData:{
image_Width:0,
image_Height:0
}
}
},
onLoad() {
let ctx = uni.createCanvasContext('canvasID', this);
uni.getImageInfo({
src: 'https://img0.baidu.com/it/u=3269595841,4171123021&fm=253&fmt=auto&app=138&f=JPEG?w=281&h=500', //网络图片用来做背景
success: (res) => {
// console.log(res);
this.canvasData.image_Width = res.width
this.canvasData.image_Height = res.height
ctx.save()
ctx.drawImage(res.path, 0, 0, this.canvasData.image_Width, this.canvasData.image_Height)
ctx.draw(true)
ctx.save()
this.drawCircular(ctx, this.avatar, 36, 32, 50, 50) //绘制圆形头像
ctx.setFontSize(18)
ctx.setFillStyle("#ffffff")
ctx.fillText('哆啦A梦没口袋', 98, 65)
ctx.font = '20px normal'
ctx.setFillStyle("#09CFB1")
ctx.fillText('伴我同行', 30, 122)
ctx.setFillStyle("#09CFB1")
ctx.fillText('一路前行', 60, 150)
ctx.fillStyle = "#2C405A";
ctx.fillRect(154,358,96,96);
ctx.drawImage(this.erweima, 154,356,96,96) //二维码
ctx.draw(true, setTimeout(() => {
uni.canvasToTempFilePath({ //将canvas生成图片
x: 0,
y: 0,
width: 281,
height: 500,
destWidth: 281, //截取canvas的宽度
destHeight: 500, //截取canvas的高度
canvasId: 'canvasID',
success:(res)=> {
console.log('res.tempFilePath==========', res.tempFilePath)
this.imgUrl = res.tempFilePath
},
fail:(err)=> {
console.log(err)
}
})
}, 500))
},
})
},
methods: {
//点击保存到相册
saveImage() {
var _this = this;
uni.saveImageToPhotosAlbum({
filePath: _this.imgUrl,
success() {
uni.showToast({
title: "图片已保存图片到相册",
icon: 'none',
duration: 2000
})
},
fail() {
uni.hideLoading()
uni.showModal({
content: '检测到您没打开获取信息功能权限，是否去设置打开？',
confirmText: "确认",
cancelText: '取消',
success: (res) => {
if (res.confirm) {
uni.openSetting({
success: (res) => {
console.log(res);
uni.showToast({
title: "请重新点击分享保存图片～",
icon: "none"
});
}
})
} else {
uni.showToast({
title: "保存失败，请打开权限功能重试",
icon: "none"
});
}
}
})
}
})
},
// 绘制圆形头像
drawCircular(ctx, url, x, y, width, height) {
//画圆形头像
let avatarurl_width = width;
let avatarurl_heigth = height;
let avatarurl_x = x;
let avatarurl_y = y;
ctx.save(); //先保存状态，已便于画完园再用
ctx.beginPath(); //开始绘制
ctx.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math
.PI * 2, false);
ctx.setFillStyle("#FFFFFF")
ctx.fill() //保证图片无bug填充
ctx.clip(); //剪切
ctx.drawImage(url, avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth); //推进去图片
ctx.restore();
},
}
}
</script>
<style lang="scss">
.canvas-box {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
background-color: #2C405A;
image{
margin-top: 40rpx;
}
.canvas{
margin-top: 40rpx;
}
.footer {
margin-top: 40rpx;
display: flex;
align-items: center;
justify-content: space-between;
justify-content: center;
.preservationBtn {
margin-bottom: 40rpx;
border: 1rpx solid #ffffff;
color: #ffffff;
display: flex;
align-items: center;
padding: 20rpx 40rpx;
text-align: center;
font-size: 30rpx;
border-radius: 40rpx;
}
}
}
</style>
页:
[1]