直接拷贝代码,不使用插件，自己纯代码实现。
从相册 或拍照 选择一个图片做海报背景。
大吉大利 今晚吃鸡。文章来源：https://www.toymoban.com/news/detail-511743.html
<template>
<view>
<view style="margin-left: 20rpx;">
<canvas canvas-id="posterCanvas" class="myCanvas"
style="background-color: #FFFFFF;width:710rpx;height:100vh;"></canvas>
</view>
<view style="position: fixed;bottom: 90rpx;margin-left: 30rpx;">
<button type="primary" @click="goto()">拍照</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
src: ",
erQured:"../../static/img/erweima.png",
mzl:10,
jqs:1,
tqs:101,
}
},
onLoad() {
},
methods: {
goto() {
uni.chooseImage({
count: 1, //默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
sourceType: ['camera'], //从相册选择
success: (res) => {
console.log(JSON.stringify(res.tempFilePaths));
console.log(res.tempFilePaths[0]);
console.log(this);
this.src = res.tempFilePaths[0];
console.log(this.src);
this.drawImage();
this.getAlbum();
}
});
},
drawImage() {
//微信小程序 画布宽带375
var _that = this
const ctx = uni.createCanvasContext("posterCanvas", this);
//背景色
ctx.fillStyle = '#FFFFFF';
ctx.fillRect(0, 0, 375 , 800 );
// image
ctx.drawImage(_that.src, 0 , 0 , 375 , 800 );
ctx.save();
ctx.globalAlpha = 0.5;
ctx.fillStyle = '#000000';
ctx.fillRect(10, 380, 90, 25);
//商品名称
ctx.setFillStyle("#fff");
ctx.setFontSize(20);
ctx.fillText("进球数:"+_that.jqs, 10 , 400 );
ctx.globalAlpha = 0.5;
ctx.fillStyle = '#000000';
ctx.fillRect(137, 380, 100, 25);
//商品名称
ctx.setFillStyle("#fff");
ctx.setFontSize(20);
ctx.fillText("投球数:"+_that.tqs, 137 , 400 );
ctx.globalAlpha = 0.5;
ctx.fillStyle = '#000000';
ctx.fillRect(260, 380, 110, 25);
//商品价格
ctx.setFillStyle("#fff");
ctx.setFontSize(20 );
// ctx.setTextAlign("bottom");
ctx.fillText("命中率:"+_that.mzl+"%", 260 , 400);
ctx.globalAlpha = 1;
//识别二维码访问
ctx.fillText('长按识别二维码', 37 , 450 );
ctx.drawImage(_that.erQured, 220 , 370 , 100 , 100 );
ctx.save();
ctx.draw()
wx.hideLoading();
},
//获取画布，需要延时进行，否则获取到的画布为空
getCanves() {
var _that = this
setTimeout(() => {
wx.canvasToTempFilePath({
canvasId: 'posterCanvas',
success: function(res) {
_that.savePoster(res.tempFilePath)
},
fail: function(res) {
console.log(res.errMsg)
}
}, this)
}, 1000)
},
//将获取到的画布传值进行保存
savePoster(shareImagePath) {
var that = this
setTimeout(() => {
wx.saveImageToPhotosAlbum({
filePath: shareImagePath,
success(res) {
wx.showToast({
title: '保存成功',
icon: 'none'
})
setTimeout(() => {
wx.hideLoading()
that.$emit('fatherMethod', false)
}, 300)
},
fail() {
wx.showToast({
title: '保存失败，请刷新页面重试',
icon: 'none'
})
setTimeout(() => {
wx.hideLoading()
}, 300)
}
})
}, 500)
},
//在保存之前先判断用户是否授权
getAlbum() {
var that = this;
wx.showLoading({
title: '正在保存...',
mask: true
})
wx.getSetting({
success(res) {
if (res.authSetting["scope.writePhotosAlbum"]) {
that.getCanves();
} else if (res.authSetting["scope.writePhotosAlbum"] === undefined) {
wx.authorize({
scope: "scope.writePhotosAlbum",
success() {
that.getCanves();
},
fail() {
wx.hideLoading();
wx.showToast({
title: "您没有授权，无法保存到相册",
icon: "none"
});
}
});
} else {
wx.openSetting({
success(res) {
if (res.authSetting["scope.writePhotosAlbum"]) {
that.getCanves();
} else {
wx.showToast({
title: "您没有授权，无法保存到相册",
icon: "none"
});
}
}
});
}
},
fail: err => {
wx.hideLoading();
wx.showToast({
title: "出现了错误，请稍后再试",
icon: "none"
});
}
});
},
}
}
</script>
<style lang="less" scoped>
page {
background-color: white;
}
</style>
文章来源地址https://www.toymoban.com/news/detail-511743.html
到了这里，关于uniapp 微信小程序 动态生成海报分享朋友圈，需先保存图片的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
