<template>
<view class="home">
<button @click="setImg()">生成海报</button>
<canvas :style="{ height: lineBgHeight + 'px;' }" class="gc-canvas"
canvas-id="firstCanvas"></canvas>
<input class="ipt" type="text" v-model="txts" placeholder="修改公众号名称">
<button @click="changeTxt">重新生成</button>
<button @click="saveImage(myImgs)">保存海报</button>
</view>
</template>
<script>
export default {
data() {
return {
txts:'扫码关注-开心就好1314',
lineBgHeight: "",
erweimaPath: "",
erweimaOnePath: "",
myImgs:'', // 最终生成的图片地址
}
},
onShow() {
this.init()
},
methods: {
//1. 拿到二维码图片地址 用uni.getImageInfo格式化 存于data
// 在这里可以换图片二维码 一般来自于接口返回或者本地上传
init(){
var erweima = '../../static/qrcode.jpg';
uni.getImageInfo({
src: erweima,
success: (res)=> {
console.log(JSON.stringify(res))
this.erweimaPath = res.path
},
})
},
// 2. 生成图片
setImg() {
// 背景图片
var bgc = 'https://img0.baidu.com/it/u=126160900,2934834914&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500';
uni.getImageInfo({
src: bgc,
success: (res)=> {
//创建canvas
let getWindowInfo = uni.getWindowInfo()
let winWidth = getWindowInfo.windowWidth //屏幕宽度
let bWidth = winWidth / 375
this.lineBgHeight = parseInt(130 * bWidth);
const ctx = uni.createCanvasContext('firstCanvas', this);
//背景 画出图片
ctx.drawImage(res.path, 0, 0, winWidth, 130 * bWidth);
//二维码1 画出图片
ctx.drawImage(this.erweimaPath, 180 * bWidth, 26 * bWidth, 80 * bWidth, 80 *
bWidth);
setTimeout(() => {
var code = "微信公众号";
ctx.setFontSize(16) //设置字体大小,默认10
ctx.fillStyle = "#ffffff";
ctx.fillText(code, 20 * bWidth, 45 * bWidth); //文字内容、x坐标,y坐标
var sizeName = this.txts;//可修改文字
ctx.setFontSize(parseInt(14 * bWidth)) //设置字体大小,默认10
ctx.fillStyle = "#ffffff";
ctx.fillText(sizeName, 20 * bWidth, 85 * bWidth); //文字内容、x坐标,y坐标
//开始制作
ctx.draw(false, () => {
//使用定时是因为制作水印需要时间,设置定时才不会出bug
setTimeout(() => {
//将画布中内容转成图片,即水印与图片合成
uni.canvasToTempFilePath({
x: 0,
y: 0,
width: winWidth, // 截取的画布的宽
height: 130 * bWidth,
destWidth: winWidth * 10,
destHeight: parseInt(130 * bWidth) *
10,
canvasId: 'firstCanvas',
success: (v) => {
console.log("图片临时地址" +
v.tempFilePath)
// 把绘制的地址存于data中 以供下载时传给下载函数
this.myImgs = v.tempFilePath
},
fail: (e) => {}
}, this)
}, 200)
})
}, 500);
},
})
},
// 修改文字
changeTxt(){
this.setImg()
},
// 保存图片
saveImage(url) {
uni.showLoading({
title: '下载中...'
})
uni.downloadFile({
url: url,
success(res) {
if (res) {
console.log('下载成功', res)
uni.hideLoading();
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success(res) {
console.log(res);
uni.showToast({
title:"保存成功"
})
},
fail(res) {
console.log(res);
uni.showToast({
title:"保存失败"
})
},
});
}
},
fail: (err) => {
if (err) {
console.log('下载失败', err)
uni.hideLoading();
}
}
});
},
},
}
</script>
<style lang="scss" scoped>
.ipt{
display: block;
width: 78%;
margin: 30rpx auto;
height: 60rpx;
padding-left: 20rpx;
color: #333;
border: 2rpx solid #333;
}
.home{
width:100%;
.gc-canvas{
width: 750rpx;
}
}
</style>