UNI-APP 小程序生成海报

用法

首先引入这个组件，根据自己实际放置的具体路径引入，实例

import poster from '@/components/poster.vue'

html

<poster :visible.sync="posterShow" width="750" height="1170" :posterData="posterData" @makePoster="makePoster"></poster>

声明的数据参数

data() {return {posterShow:true,posterData = {bg:{type:1,//1是背景图，2是颜色背景imgUrl:'../static/img/bgs.png'//图片地址},imgList:[{url:this.info.other.logo,position:[30,30],//位置size:[690,690]//大小},{url:'https://dolphin.oss-cn-hangzhou.aliyuncs.com/h5-video/qingbo/yanghe/images/yzl_qrcode.png',position:[501,984],//位置size:[180,180]//大小},{url:'../static/img/line.png',position:[0,936],//位置size:[750,1]//大小}],textList:[{text:'洋河蓝色“元之蓝 ”计划 | 白酒',//首发数字藏品，期待不设限position:[30,806],//位置fontSize:48,//大小color:"#fff"},{text:'首发'+this.config.name+'，期待不设限',//首position:[30,874],//位置fontSize:48,//大小color:"#fff"},{text:this.userInfo ? this.userInfo.nickName : '',textWidth:200,position:[23,1061],//位置fontSize:36,//大小color:"#fff"},{text:'诚邀您参与',position:[239,1061],//位置fontSize:36,//大小color:"rgba(255,255,255,.8)"},{text:'扫描元之蓝小程序二维码',position:[23,1126],//位置fontSize:36,//大小color:"rgba(255,255,255,.8)"}]  }}
},

进入页面可以调用下面方法生成

makePoster (e){console.log(e)//e是返回的海报路径
}

参数介绍

canvasId	海报生成的canvas id
width	canvas 的宽度
height	canvas 的高度
visible	生成海报时需要设为true
posterData	生成海报的json数据

posterData数据主要分为：
1、海报背景图

bg:{type:1,//1是背景图，2是颜色背景imgUrl:'../static/img/bgs.png'//图片地址
},

2、海报上显示的图片，比如头像二维码之类的

imgList:[{url:“”,//比如主视图路径position:[30,30],//位置size:[690,690]//大小},{url:'https://dolphin.oss-cn-hangzhou.aliyuncs.com/h5-video/qingbo/yanghe/images/yzl_qrcode.png',//二维码路径position:[501,984],//位置size:[180,180]//大小}
]

3、文字

textList:[{text:'洋河蓝色“元之蓝 ”计划 | 白酒',position:[30,806],//位置fontSize:48,//大小color:"#fff"},{text:'首发'+this.config.name+'，期待不设限',//首position:[30,874],//位置fontSize:48,//大小color:"#fff"},{text:this.userInfo ? this.userInfo.nickName : '',textWidth:200,//textWidth存在时可以限制文字长度，超出可以隐藏...textAlign:"right",//设置right时文字可以更具本身长度自动右对齐position:[23,1061],//位置fontSize:36,//大小color:"#fff"},{text:'诚邀您参与',position:[239,1061],//位置fontSize:36,//大小color:"rgba(255,255,255,.8)"},{text:'扫描元之蓝小程序二维码',position:[23,1126],//位置fontSize:36,//大小color:"rgba(255,255,255,.8)"}
]

上图

poster.vue源码

<template><view class="canvas-poster"><canvas id="firstCanvas" canvas-id="firstCanvas" :style="{width:width+'px',height:height+'px'}"></canvas></view>
</template>
<script>
export default {name: 'bottle',props: {canvasId:{default:'webgl',type: String},width:{type: String},height:{type: String},visible:{type:Boolean,default:false},posterData:{type: [Object,Array]}},data() {return {};},mounted() {},watch:{visible(value){if(value){this.drawCanvas();}}},methods: {// 网络图片转换getNetworkImage (url){return new Promise((resolve, reject) => {uni.downloadFile({url,success: (e) => {const p = e.tempFilePathif (p.indexOf('json') > -1) {reject(p)return false}resolve(p)},fail: (r) => {reject(r)}})})},async drawCanvas (){uni.showLoading({title:'海报生成中...',mask:true});let context = uni.createCanvasContext('firstCanvas',this)// 绘制背景let bg = this.posterData.bg;context.drawImage(bg.imgUrl, 0, 0, 750, parseInt(this.height))// 绘制图片let imgList = this.posterData.imgList;if(imgList){for(let i of imgList){let url = i.url;if(url.indexOf("http") > -1){await this.getNetworkImage(i.url).then(r =>{url = r;})}context.drawImage(url, i.position[0], i.position[1], i.size[0], i.size[1])}}// 绘制文字let textList = this.posterData.textList;if(textList){for(let i of textList){let text = i.text;if(i.textWidth){text = this.fittingString(context,text,i.textWidth);}context.setFontSize(i.fontSize)context.setFillStyle(i.color)let x = i.position[0];if(i.textAlign === "right"){x = parseInt(this.width) - context.measureText(text).width - i.position[0]}context.fillText(text, x, i.position[1])}}context.draw(true);setTimeout(()=>{this.saveCanvas();},1000)},saveCanvas (){uni.canvasToTempFilePath({ // 保存canvas为图片canvasId: 'firstCanvas',fileType:"png",success: (res) =>{console.log(res.tempFilePath)this.$emit("makePoster",res.tempFilePath)},fail:(res) =>{console.log(res)},complete:(res) =>{uni.hideLoading()this.$emit('update:visible', false);}},this)},//用于计算文字超出隐藏...fittingString(ctx, str, maxWidth) {if(!this.$utils.checkEmpty(str)){str = "";}let strWidth = ctx.measureText(str).width;const ellipsis = '…';const ellipsisWidth = ctx.measureText(ellipsis).width;if (strWidth <= maxWidth || maxWidth <= ellipsisWidth) {return str;} else {var len = str.length;while (strWidth >= maxWidth - ellipsisWidth && len-- > 0) {str = str.slice(0, len);strWidth = ctx.measureText(str).width;}return str + ellipsis;}}}
};
</script>

说明：希望有好的想法的同学可以多多指教，此文章可以方便小程序生成海报

UNI-APP 小程序生成海报相关推荐

微信小程序生成海报 poster
原生小程序 canvas 小程序-canvas绘图并保存到系统相册小程序导出朋友圈海报详细记录逻辑清晰的说明了,原生小程序 canvas 绘制的步骤: 获取 Canvas.context 绘制背景 ...
微信小程序生成海报可保存海报和分享海报
最近因为小程序生成海报分享的问题头疼了很久,所以自己总结了一下供大家参考,可以放置用户头像姓名以及商品名称价格和二维码太阳码等,实测可用! 下载链接https://download.csdn.net/ ...
微信小程序生成海报并保存在本地（组件开发）
1.将商品图片和二维码生成海报在屏幕中间子组件代码 <template><view><div class="poster"><div c ...
小程序生成海报，easy-canvas, painting参数使用demo
微信小程序不支持直接分享到朋友圈简直是一个大坑,最开始自己写了一个原始版本的canvas海报生成方式,结果发现生成的海报不是变形就是不适配所有屏幕,着实头疼了不少时间,前端实在太菜,偶然下载了一个电商 ...
小程序生成分享海报php配置,小程序生成海报保存分享图片完全指南（包括：头像，文字）...
业务在小程序中生成海报(包括用户头像和自定义文字)并且保存到本地实现思路利用canvas画布,把用户头像和自定义文字定位好,用户点击按钮保存到本地注意事项难点小程序canvas不支持自定义宽 ...
小程序生成海报携带参数-云函数生成二维码
1. 逻辑代码 async qcFn() {console.log('生成海报');let that = thisconst houseId = this.data.houseDetail._idco ...
微信小程序生成海报带二维码功能
wxml文件 <view><text class='shareText'>生成海报分享至</text><view class='imgBox'>< ...
微信小程序生成海报中二维码-----长按识别不了问题及处理方案
> 问题描述: 小程序某个页面中点击按钮,想要生成带有二维码的图片,后续保存本地.生成图片后转发微信中,后长按图片不会出现识别图中二维码的选项问题. 一年前写过一个分享页,当时大部分可以识别,只 ...
微信小程序生成海报失败问题解决方法
很多业务需求需要获取到微信头像,然后用头像和二维码及其他背景图一起生成海报,进行分享.在部分机型会出现生成失败问题.以下是本人排除后发现产生问题的原因和解决方法. 1.安卓机提示downloadFil ...
微信小程序生成海报无法保存到相册
公司小程序是用uniapp开发的,使用saveImageToPhotosAlbum()保存,在微信开发者工具中和真机调试都能正常运行,代码如下,在安卓真机上可以生成海报但是无法保存,苹果手机上直接无法 ...

UNI-APP 小程序生成海报

用法

UNI-APP 小程序生成海报相关推荐

最新文章

热门文章