uniapp生成海报 自定义添加图片文字组合
发布时间： 2021-08-26 13:18:36
作者： 王乐园 浏览次数：
790
uniapp生成海报 自定义添加图片文字组合,h5、微信小程序、app-vue 亲测有效，详情见效果图，一共两套样式
uniapp生成海报 自定义添加图片文字组合,h5、微信小程序、app-vue 亲测有效 ，直接上代码
最下方见效果图 一共两套样式
效果图
类型一 类型二
view
<template>
<!-- 店铺/商品 分享 -->
<view class="wly-canvas-share-download">
<view class='page' style="display: inline-block;" v-if="shareShow">
<image :src="base64" v-if="base64 && shareShow" class='immm'
:style="'width:'+CanvasW+'px;height:'+CanvasH+'px;padding-top:'+(type == 2 ? '150rpx;':'0px;')"
mode='aspectFill'></image>
<canvas canvas-id="myCanvas" id='sss' :style="'width:'+CanvasW+'px;height:'+CanvasH+'px;'" v-else></canvas>
</view>
<!-- 选择商品详情分享方式弹出框 -->
<u-popup v-model="shareShow" mode="bottom" border-radius="16rpx" z-index='3'>
<view class="share_area">
<view class="share_area_t">分享到</view>
<view class="share_area_c f-c-c">
<view class="left" @click="shareWx">
<view class="share_area_c_icon">
<u-image :src="`${imgurl}/static/app-plus/share_wx.png`" width="104rpx" height="104rpx" />
</view>
<view class="share_area_c_text">
微信好友
</view>
<!-- #ifdef MP-WEIXIN -->
<!-- 小程序分享小程序 -->
<button type="default" class="share-btn" open-type='share'></button>
<!-- #endif -->
</view>
<view class="right" @click="posterimg">
<view class="share_area_c_icon">
<u-image :src="`${imgurl}/static/app-plus/share_img.png`" width="104rpx" height="104rpx" />
<u-image class="sub_icon" :src="`${imgurl}/static/app-plus/is_pyq.png`" width="130rpx"
height="40rpx" />
</view>
<view class="share_area_c_text">
分享海报
</view>
</view>
</view>
<view class="share_area_b" @click="cancel">
取消
</view>
</view>
</u-popup>
</view>
</template>JS
import {
getGeneratePosterCode //获取小程序码
} from 'pages_payment/api.js'
export default {
components: {
},
props: {
type: { //使用组件类型
type: [String, Number],
default: '', //1 商品分享 2商家分享
},
logoimg: { //店铺logo/商品图
type: String,
default: '/static/ic_logo.png'
},
id: { //店铺id,商品id
type: [Number, String],
default: '',
},
text: { //店铺名/商品名
type: String,
default: '',
},
nikename: { //单价
type: [String, Number],
default: '',
},
},
name: "wly-canvas-share-download",
data() {
return {
// #ifdef MP-WEIXIN
imgurl: this.imgurl,
imgurlbac: this.imgurlbac,
// #endif
base64: null,
CanvasW: null,
CanvasH: null,
mincode: '', //小程序码
shareShow: false,
}
},
created() {
if (this.type == 1) { //商品
this.CanvasW = 293;
this.CanvasH = 505;
} else { //店铺
this.CanvasW = 293;
this.CanvasH = 370;
}
},
methods: {
// 显示
cancelShow() {
let that = this;
console.log('this.mincode’', this.mincode)
console.log('this.base64’', this.base64)
let typeData = {};
console.log('that.type 商家 商品',that.type)
if (that.type == 1) { //商品分享
typeData = {
page: 'pages_goods/detail',
width: '160',
scene: 'type=1&goods_id=' + that.id
}
} else { //商家
typeData = {
page: 'pages_other/shop',
width: '160',
scene: 'type=1&shopId=' + that.id
}
}
if (this.base64) {
} else {
if (this.mincode) {
this.copyFn()
} else {
uni.showLoading({
title: '生成中'
});
this.$http2(getGeneratePosterCode, 'POST', {
...typeData
}).then(res => {
if (res.data.data) {
that.mincode = res.data.data;
setTimeout(function() {
uni.hideLoading();
}, 500);
this.copyFn()
} else {
uni.showToast({
title: res.data.message,
duration: 2000
});
}
console.log('获取小程序码成功', res)
})
}
}
this.shareShow = true;
},
// 取消
cancel() {
this.shareShow = false;
},
//点击好友分享到微信
shareWx() {
let that = this;
//分享
// 分享为小程序 app支持
let imgurl = that.logoimg || 'https://image.soole.com.cn/20190827151424.png';
let title = '';
let path = '';
if (that.type == 1) { //商品
title = '好友给你分享：' + that.text + '，推荐给你！'
path = 'pages_goods/detail?goods_id=' + that.id;
} else { //店铺
title = '我发现了一家好店@' + that.text + '，推荐给你！'
path = 'pages_other/shop?shopId=' + that.id;
}
uni.share({
provider: 'weixin', // 分享服务提供商（即weixin|qq|sinaweibo）
scene: "WXSceneSession", //分享到聊天界面
type: 5, //分享形式 5:小程序
imageUrl: imgurl, //官方规定分享图比例是5：4,其它尺寸可能显示不全。
title: title,
miniProgram: {
id: 'gh_c7fd2b8f3983', //微信小程序原始id
path: path, //点击链接进入的页面
type:0, //微信小程序版本类型，可取值： 0-正式版； 1-开发； 2-体验版。 默认值为0。
webUrl: 'https://wxh5.soole.com.cn/#/' //兼容低版本的网页链接
},
success: ret => {
console.log(JSON.stringify(ret));
}
});
},
// 点击分享海报
posterimg() {
let that = this;
uni.saveImageToPhotosAlbum({
filePath: that.base64,
success: function(res) {
uni.showToast({
title: '已保存到相册',
duration: 2000
});
console.log('保存图片成功', res)
},
fail(err) {
console.log('保存图片失败', err)
}
});
},
// 生成海报
copyFn() {
let that = this;
let ww = that.CanvasW;
let hh = that.CanvasH;
const query = uni.createSelectorQuery().in(this);
query.select('#sss').boundingClientRect(async data => { //获取canvas-dom
console.log('data', data)
var ctx = uni.createCanvasContext('myCanvas',that) //绑定画布
// =============== //商品分享 =========================
if (that.type == 1) { //商品分享
let imgurl = 'https://image.soole.com.cn/7ca56704-ed14-4090-9d21-cc828ab6e204.png'
console.log('imgurl',imgurl)
// #ifdef MP-WEIXIN
that.downLoadImg(imgurl,'imgurlCopy')
imgurl=uni.getStorageSync('imgurlCopy')
// #endif
console.log('ww,hh', that.CanvasW, that.CanvasH)
ctx.beginPath()
ctx.rect(0, 0, ww, hh)
ctx.setFillStyle('#fff'); // transparent
ctx.fill();
ctx.beginPath()
ctx.rect(0, 0, ww, 60)
ctx.setFillStyle('#FE1C1D'); // transparent
ctx.fill();
ctx.drawImage(imgurl, 98, 14, 97, 31); //位置+大小填充进图片 头部图
if (that.logoimg){
console.log(that.logoimg,'that.logoimg')
let logoImg = that.logoimg
// 小程序需要做同步处理
// #ifdef MP-WEIXIN
await that.downLoadImg(logoImg,'logoImg')
logoImg=uni.getStorageSync('logoImg')
// #endif
ctx.drawImage(logoImg, 0, 60, 293, 273);
//位置+大小填充进图片 商品图
}
// 商品名字
let text_ = '';
if (that.text.length > 17) {
text_ = that.text.slice(0, 17) + '...'
} else {
text_ = that.text;
}
ctx.setFillStyle('#333'); //sales
ctx.setFontSize(14);
// ctx.setTextAlign('center')
ctx.fillText(text_, 15, 353);
// 金额类型
ctx.setFillStyle('#FE1C1D'); //sales
ctx.setFontSize(20);
// ctx.setTextAlign('center')
ctx.fillText('￥', 15, 390);
// 商品价格
ctx.setFillStyle('#FE1C1D'); //sales
ctx.setFontSize(28);
// ctx.setTextAlign('center')
ctx.fillText(that.nikename, 32, 390);
let canvshop = '';
if (that.type == 1) { //框架 商品
canvshop = 'https://image.soole.com.cn/04ceffa1-acdb-498c-8506-7aca48cb05f4.png';
} else {
canvshop = 'https://image.soole.com.cn/f4984bd5-86a6-4b96-a8d2-095e6a969f85.png';
}
// #ifdef MP-WEIXIN
that.downLoadImg(canvshop,'canvshopCopy')
canvshop = uni.getStorageSync('canvshopCopy')
// #endif
ctx.drawImage(canvshop, 15, 410, 262, 74); //位置+大小填充进图片 店铺logo
console.log('我就是熊程序吗',that.mincode)
if (that.mincode) {
let mincode_ = that.mincode
// #ifdef MP-WEIXIN
await that.downLoadImg(mincode_,'mincode_')
mincode_=uni.getStorageSync('mincode_')
// #endif
ctx.drawImage(mincode_, 203, 413, 68, 68); //位置+大小填充进图片 店铺logo
}
} else { //商家
// ====================== //商家 ==============================
console.log('ww,hh', that.CanvasW, that.CanvasH)
ctx.beginPath()
ctx.rect(0, 0, ww, hh)
ctx.setFillStyle('#fff'); // transparent
ctx.fill();
let shopfx = 'https://image.soole.com.cn/6c88f1f7-1f72-45d0-a816-864d3372653b.png';
console.log('下载地址shopfx', shopfx)
// #ifdef MP-WEIXIN
await that.downLoadImg(shopfx,'shopfx')
shopfx=uni.getStorageSync('shopfx')
// #endif
ctx.drawImage(shopfx, 0, 0, ww, 206); //位置+大小填充进图片 头部图
if (that.logoimg) {
ctx.drawImage(that.logoimg, 116, 175, 62, 62); //位置+大小填充进图片 店铺logo
}
// 店铺名
ctx.setFillStyle('#333'); //sales
// ctx.font = '18rpx normal';
ctx.setFontSize(13);
ctx.setTextAlign('center')
ctx.fillText(that.text, ww / 2, 260);
// 框架
let frame = 'https://image.soole.com.cn/f4984bd5-86a6-4b96-a8d2-095e6a969f85.png';
// #ifdef MP-WEIXIN
await that.downLoadImg(frame,'frame')
frame=uni.getStorageSync('frame')
// #endif
ctx.drawImage(frame, 15, 280, 262,
74); //位置+大小填充进图片 店铺logo
console.log('我就是熊程序吗----',that.mincode)
if (that.mincode) {
let shopmincode = that.mincode;
// #ifdef MP-WEIXIN
await that.downLoadImg(shopmincode,'shopmincode')
shopmincode=uni.getStorageSync('shopmincode')
// #endif
ctx.drawImage(shopmincode, 203, 283, 68, 68); //位置+大小填充进图片 店铺logo
}
}
ctx.draw(false,()=>{
setTimeout(() => { //不加延迟的话，base64有时候会赋予undefined
uni.showLoading({ //增加loading等待效果
mask: true
})
console.log('ww * 2', ww * 2)
console.log(' that.CanvasH * 2', that.CanvasH * 2)
uni.canvasToTempFilePath({
x: 0,
y: 0,
width: ww,
height: hh,
destWidth: ww * 2,
destHeight: hh * 2,
canvasId: 'myCanvas',
success: (res) => {
console.log('生成图片=======,', res.tempFilePath)
this.base64 = res.tempFilePath;
}
},that)
uni.hideLoading();
}, 800)
}); //输出到画布中
}).exec();
},
downLoadImg: function(netUrl, storageKeyUrl){
return new Promise((resolve,reject)=>{
uni.getImageInfo({
src: netUrl, //请求的网络图片路径
success:(res)=>{
console.log(res,'设置成功')
//请求成功后将会生成一个本地路径即res.path,然后将该路径缓存到storageKeyUrl关键字中
uni.setStorageSync(storageKeyUrl,res.path);
resolve(res)
},
fail: (err) => {
console.log(err)
reject(err)
}
})
})
},
}
}css
.wly-canvas-share-download {
position: relative;
}
.page {
top: calc(var(--window-top) + var(--status-bar-height) + 100rpx);
z-index: 4;
height: 50vh;
position: fixed;
width: 100%;
text-align: center;
}
.input {
width: 100%;
height: 80rpx;
background: #ccc;
}
#sss {
z-index: 9999;
opacity: 0;
/* background-color: #007AFF; */
}
.immm {
width: 100%;
}
// 商品详情分享方式选择框部分
.share_area {
background-color: #F2F2F2;
.share_area_t {
padding: 26rpx 0 0;
font-size: 28rpx;
color: #333;
text-align: center;
}
.share_area_c {
.left {
position: relative;
.share-btn {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
// background-color:pink;
opacity: 0;
z-index: 1;
}
}
.right {
margin-left: 112rpx;
}
.share_area_c_icon {
position: relative;
.u-image {
width: 104rpx;
height: 104rpx;
}
.sub_icon {
position: absolute;
top:40rpx;
right: -92rpx;
width: 130rpx;
height: 40rpx;
}
}
}
.share_area_b {
margin-top: 10rpx;
height: 98rpx;
text-align: center;
line-height: 96rpx;
background-color: #fff;
}
}上一篇：(转载)追忆过往青春
下一篇：(转载)时光悠悠 岁月无言