uniapp生成高清海报图canvas
本期先讲uniapp生成，下期讲本插件怼到原生小程序中，编辑不易，给个赞吧！！！！！
首先将三个外部文件放到你的公共文件夹下
然后在海报生成的页面内引入这个两个文件
data上设置变量
html代码块
canvas-id设置与data的canvasId一致
代码块
废话不多说直接贴代码
html
<!-- 海报生成 -->
<view>
<!-- 图片展示由自己实现 -->
<view class="flex_row_c_c modalView" :class="qrShow?'show':''" @tap="hideQr()">
<view class="flex_column">
<view class="backgroundColor-white border_radius_10px">
<image :src="poster.finalPath || ''" mode="widthFix" class="posterImage"></image>
</view>
<view class="marginTop2vh">
<button class="savaImg" type="primary" @tap.prevent.stop="saveImage()"> 保存图片</button>
<button class="closeImg" @tap.prevent.stop="hideQr()">关闭</button>
</view>
</view>
</view>
<!-- 画布 -->
<view class="hideCanvasView">
<canvas class="hideCanvas" canvas-id="default_PosterCanvasId" :style="{width: (poster.width||10) + 'px',
height: (poster.height||10) + 'px'}"></canvas>
</view>
</view>
css代码
// 海报生成样式
.creatPosterBtn {
position: absolute;
top: 30rpx;
right: 40rpx;
background: rgba(0, 0, 0, 0.5) !important;
color: #FFFFFF;
border-radius: 2px;
z-index: 10;
font-size: 15px;
padding: 5px 10px;
line-height: 40rpx;
}
.hideCanvasView {
position: relative;
}
.hideCanvas {
position: fixed;
top: -99999upx;
left: -99999upx;
z-index: -99999;
}
.flex_row_c_c {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.modalView {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
outline: 0;
transform: scale(1.2);
perspective: 2500upx;
background: rgba(0, 0, 0, 0.6);
transition: all .3s ease-in-out;
pointer-events: none;
backface-visibility: hidden;
z-index: 999;
}
.modalView.show {
opacity: 1;
transform: scale(1);
pointer-events: auto;
}
.flex_column {
display: flex;
flex-direction: column;
}
.backgroundColor-white {
background-color: white;
}
.backgroundColor-white image {
border-radius: 0px;
}
.border_radius_10px {
border-radius: 0px;
}
.padding1vh {
padding: 1vh;
}
.posterImage {
width: 80vw;
}
.flex_row {
display: flex;
flex-direction: row;
}
.marginTop2vh {
margin-top: 2vh;
}
.savaImg {
width: 100%;
padding: 16rpx 0;
margin-top: 20rpx;
font-size: 28rpx;
line-height: 50rpx;
display: block;
}
.closeImg {
width: 100%;
padding: 16rpx 0;
margin-top: 20rpx;
font-size: 28rpx;
line-height: 50rpx;
background: #FFFFFF;
color: #333333;
display: block;
}
最重要的js模块
import _app from '@/utils/QS-SharePoster/app.js';
import {getSharePoster} from '@/utils/QS-SharePoster/QS-SharePoster.js';
export default {
data() {
return {
QrSrc: '',
wmVisible: false,
poster: {},
qrShow: false,
canvasId: 'default_PosterCanvasId',
count: 0,
}
},
onLoad(options) {
// 海报二维码进入场景
if (options.scene) {
// 此方法为获取你的商品详情方法，此处省略，主要是扫码进来会拿scene，例如你的商品id
this.getdetail(options.scene);
}
},
methods: {
// 生成海报
creatPoster: function() {
this.wmVisible = true
},
// 关闭海报
closePoster: function() {
this.wmVisible = false
},
// 海报生成相关js开始
async shareFc() {
let _this = this;
try {
this.count++;
_app.log('准备生成:' + new Date())
const d = await getSharePoster({
_this: _this, //若在组件中使用 必传
type: 'testShareType',
formData: {
//访问接口获取背景图携带自定义数据
},
posterCanvasId: _this.canvasId, //canvasId
delayTimeScale: 20, //延时系数
background: {
width: 1080,
height: 1920,
},
setCanvasWH({
bgObj
}) {
_this.poster = bgObj
},
drawArray({
bgObj,
type,
bgScale,
setBgObj,
getBgObj
}) {
return [{
type: 'image',
id: 'productImage',
// url: _this.count % 2 === 0 ? '/static/1.png' : '/static/2.jpg',
url: _this.swiperList[0],
dx: getBgObj().width * .05 - 20,
dy: getBgObj().width * .05 - 20,
serialNum: 0,
infoCallBack(imageInfo) {
let width;
let height;
if (imageInfo.width > imageInfo.height) {
width = imageInfo.width > 700 ? 700 : imageInfo.width;
height = width / imageInfo.width * imageInfo.height;
} else {
height = imageInfo.height > 700 ? 700 : imageInfo.height;
width = height / imageInfo.height * imageInfo.width;
}
if (width < 500) {
width = 500;
height = width / imageInfo.width * imageInfo.height;
}
let addHeight = height * .3;
if (addHeight < 150) addHeight = 150;
if (addHeight > 250) addHeight = 250;
setBgObj({
width,
height: height + addHeight + 280,
backgroundColor: '#ffffff'
});
return {
dWidth: width - 70,
dHeight: height
}
}
},
{
type: 'text',
id: 'productName',
text: _this.vehicleInfo.name,
color: '#000',
serialNum: 1,
allInfoCallback({
drawArray
}) {
const productImage = drawArray.find(item => item.id === 'productImage')
const addHeight = getBgObj().height - productImage.dHeight;
return {
size: getBgObj().width * 0.04,
lineFeed: {
maxWidth: getBgObj().width * 0.9,
lineNum: 2
},
dx: getBgObj().width * .05,
dy: productImage.dHeight + addHeight * .2,
}
}
}, {
type: 'text',
text: '车辆售价：10万',
color: '#ff5500',
serialNum: 1,
allInfoCallback({
drawArray
}) {
const productImage = drawArray.find(item => item.id === 'productImage')
const addHeight = getBgObj().height - productImage.dHeight;
return {
size: getBgObj().width * 0.04,
lineFeed: {
maxWidth: getBgObj().width,
lineNum: 1
},
dx: getBgObj().width * .05,
dy: productImage.dHeight + addHeight * .38,
}
}
}, {
type: 'text',
text: '新车售价：20万',
color: '#000',
serialNum: 1,
allInfoCallback({
drawArray
}) {
const productImage = drawArray.find(item => item.id === 'productImage')
const addHeight = getBgObj().height - productImage.dHeight;
return {
size: getBgObj().width * 0.04,
lineFeed: {
maxWidth: getBgObj().width,
lineNum: 1
},
dx: getBgObj().width * .05,
dy: productImage.dHeight + addHeight * .48,
}
}
},
{
type: 'text',
text: '车辆里程：5万公里',
color: '#000',
serialNum: 3,
allInfoCallback({
drawArray
}) {
const productImage = drawArray.find(item => item.id === 'productImage')
const addHeight = getBgObj().height - productImage.dHeight;
return {
size: getBgObj().width * 0.04,
lineFeed: {
maxWidth: getBgObj().width * 0.5,
lineNum: 1
},
dx: getBgObj().width * .05,
dy: productImage.dHeight + addHeight * .58,
}
}
},
{
type: 'text',
text: '排放标准：国五' ,
color: '#000',
serialNum: 4,
allInfoCallback({
drawArray
}) {
const productImage = drawArray.find(item => item.id === 'productImage')
const addHeight = getBgObj().height - productImage.dHeight;
return {
size: getBgObj().width * 0.04,
lineFeed: {
maxWidth: getBgObj().width * 0.5,
lineNum: 1
},
dx: getBgObj().width * .05,
dy: productImage.dHeight + addHeight * .68,
}
}
},
{
type: 'text',
text: '牌照地点：北京',
color: '#000',
serialNum: 5,
allInfoCallback({
drawArray
}) {
const productImage = drawArray.find(item => item.id === 'productImage')
const addHeight = getBgObj().height - productImage.dHeight;
return {
size: getBgObj().width * 0.04,
lineFeed: {
maxWidth: getBgObj().width * 0.5,
lineNum: 1
},
dx: getBgObj().width * .05,
dy: productImage.dHeight + addHeight * .78,
}
}
},
{
type: 'text',
text: '上牌时间：2019年1月1日' ,
serialNum: 6,
allInfoCallback({
drawArray
}) {
const productImage = drawArray.find(item => item.id === 'productImage')
const addHeight = getBgObj().height - productImage.dHeight;
return {
size: getBgObj().width * 0.04,
lineFeed: {
maxWidth: getBgObj().width * 0.5,
lineNum: 1
},
dx: getBgObj().width * .05,
dy: productImage.dHeight + addHeight * .88,
}
}
},
// 此处放的为商品的太阳码，QrSrc为太阳码地址或者远程图片地址
{
type: 'image',
id: 'smallImage',
url: _this.QrSrc,
dx: getBgObj().width * .05,
dy: 600,
serialNum: 7,
serialNum: 6,
allInfoCallback({
drawArray
}) {
const productImage = drawArray.find(item => item.id === 'productImage')
const addHeight = getBgObj().height - productImage.dHeight;
return {
dWidth: 150,
dHeight: 150,
dx: getBgObj().width * .65,
dy: productImage.dHeight + addHeight * .32,
}
}
},
{
type: 'text',
text: '识别小程序',
serialNum: 8,
color: '#000',
allInfoCallback({
drawArray
}) {
const productImage = drawArray.find(item => item.id === 'productImage')
const addHeight = getBgObj().height - productImage.dHeight;
return {
size: getBgObj().width * 0.04,
lineFeed: {
maxWidth: getBgObj().width * 0.5,
lineNum: 1
},
dx: getBgObj().width * .65,
dy: productImage.dHeight + addHeight * .78,
}
}
},
{
type: 'text',
text: '进入二手车商城',
serialNum: 9,
color: '#000',
allInfoCallback({
drawArray
}) {
const productImage = drawArray.find(item => item.id === 'productImage')
const addHeight = getBgObj().height - productImage.dHeight;
return {
size: getBgObj().width * 0.04,
lineFeed: {
maxWidth: getBgObj().width * 0.5,
lineNum: 1
},
dx: getBgObj().width * .62,
dy: productImage.dHeight + addHeight * .88,
}
}
},
]
}
})
_app.log('海报生成成功, 时间:' + new Date() + '， 临时路径: ' + d.poster.tempFilePath)
_this.poster.finalPath = d.poster.tempFilePath;
_this.qrShow = true;
} catch (e) {
_app.hideLoading();
_app.showToast(JSON.stringify(e));
}
},
saveImage() {
let that = this;
wx.getSetting({
success(res) {
console.log(res)
console.log(that.poster.finalPath)
// 如果没有则获取授权
if (!res.authSetting['scope.writePhotosAlbum']) {
wx.authorize({
scope: 'scope.writePhotosAlbum',
success() {
wx.saveImageToPhotosAlbum({
filePath: that.poster.finalPath,
success() {
wx.showToast({
title: '保存成功'
})
},
fail() {
wx.showToast({
title: '保存失败',
icon: 'none'
})
}
})
},
fail() {
wx.showModal({
title: '提示：',
content: "授权失败，请前往设置中心设置权限",
confirmText: '前往授权',
success: function() {
wx.openSetting({
success(res) {
// res.authSetting = {
// "scope.userInfo": true,
// "scope.userLocation": true
// }
}
})
}
})
}
})
} else {
// 有则直接保存
wx.saveImageToPhotosAlbum({
filePath: that.poster.finalPath,
success() {
wx.showToast({
title: '保存成功'
})
},
fail() {
wx.showToast({
title: '保存失败',
icon: 'none'
})
}
})
}
}
})
// // #ifndef H5
// uni.saveImageToPhotosAlbum({
// filePath: that.poster.finalPath,
// success(res) {
// _app.showToast('保存成功');
// }
// })
// // #endif
// // #ifdef H5
// _app.showToast('保存了');
// // #endif
},
share() {
// #ifdef APP-PLUS
_app.getShare(false, false, 2, '', '', '', this.poster.finalPath, false, false);
// #endif
// #ifndef APP-PLUS
_app.showToast('分享了');
// #endif
},
hideQr() {
this.qrShow = false;
},
// 海报生成相关js结束
}
}
生成结果
原插件地址：https://ext.dcloud.net.cn/plugin?id=471
编辑不易，给个赞吧！！！！
5367
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
