uniapp 小程序 多张图片生成海报以及下载海报

uniapp 小程序 多张图片生成海报以及下载海报

  1. 上代码
javascript 复制代码
export default {
	data() {
		return {
			unit: 0,
			imgurl:"", // 海报图片
			shareimg:"https://eshopfile.zhiyousx.com/2022051811164947691.jpg", //背景图
			qrcode :"", // 二维码
			saveTop:80,
		}
	},
	onLoad(option) {
	    let that = this
		uni.getSystemInfo({
		  success: (res) => {
			that.unit = res.screenWidth/750
		  }
		});
	},
	methods:{
       // 获取二维码
		getqrcodeImg(){
			this.$https('GET','xxxx/xxxx/xxxx',).then(res => {
				if(res.code === 1){
				// 有现成的可以不用掉接口
					this.qrcode = res.data
					this.genQrFile()
				}
			})
		},
		genQrFile() {
			let unit = this.unit
			uni.showLoading()
			this.saveTop = parseInt(80*unit)
			var urlQR = this.getNetworkImage(this.qrcode);//二维码。
			var bg=this.getNetworkImage(this.shareimg);//背景图片转为本地图片
			let that = this;
			Promise.all([
				bg,urlQR
			]).then(res => {
			// 创建 canvas 绘图上下文(指定 canvasId)
			let ctx = uni.createCanvasContext('firstCanvas', this);
			// 绘制图像到画布  
			/** 
			 * 参数1  所要绘制的图片资源 
			 * 参数2  图像的左上角在目标canvas上 X 轴的位置
			 * 参数3  图像的左上角在目标canvas上 Y 轴的位置
			 * 参数4  在目标画布上绘制图像的宽度,允许对绘制的图像进行缩放
			 * 参数5  在目标画布上绘制图像的高度,允许对绘制的图像进行缩放
			 */
			ctx.drawImage(res[0], 0, 0, parseInt(640*unit), parseInt(1140*unit));
			ctx.beginPath()
			// 你也可以插入文字
			// ctx.fillText('textAlign=right', 150, 100)
			let x = parseInt(117*unit),y= parseInt(483*unit),w=parseInt(220*unit),h=parseInt(225*unit)
			ctx.arc(w / 2 + x, w / 2 + y, h / 2, 0, Math.PI * 2, false)
			ctx.clip()
			// 绘制第二张图片图像到画布
			ctx.drawImage(res[1], x,y,w, h);
			ctx.restore()
				ctx.draw(false, () => {
					// 把当前画布指定区域的内容导出生成指定大小的图片,并返回文件路径
					uni.canvasToTempFilePath({
						x: 0,
						y: 0,
						width: 375,
						height: 840,
						destWidth: 640,
						destHeight: 1140,
						canvasId: 'firstCanvas',
						success: function(res) {
							// 保存文件路径
							that.imgurl = res.tempFilePath
							uni.hideLoading()
						},
						fail(e) {
							uni.hideLoading()
						}
					});
				});
			})
		},
		// 图片转为本地图片
		getNetworkImage(url) {
			return new Promise((resolve, reject) => {
				uni.downloadFile({
				url,
				success: (e) => {
					const p = e.tempFilePath
					if (p.indexOf('json') > -1) {
						reject(p)
						return false
					}
					resolve(p)
				},
				fail: (r) => {
					reject(r)
				}
			})
			})
		},
    }
}			     
			
  1. 下载海报
    我的上一篇博客有后半部分图片保存代码!

  2. 搞定! 日常开发代码记录。

相关推荐
一匹电信狗8 分钟前
【C++】手搓AVL树
服务器·c++·算法·leetcode·小程序·stl·visual studio
2501_9160088913 分钟前
手机 iOS 系统全解析,生态优势、开发机制与跨平台应用上架实践指南
android·ios·智能手机·小程序·uni-app·iphone·webview
00后程序员张2 小时前
Fiddler使用教程,全面掌握Fiddler抓包工具的配置方法、代理设置与调试技巧(HTTPHTTPS全解析)
前端·测试工具·ios·小程序·fiddler·uni-app·webview
2501_916008893 小时前
HTTPS 下的 DDoS 防护与抓包分析实战,从检测到快速缓解的工程化打法
网络协议·ios·小程序·https·uni-app·iphone·ddos
2501_915918413 小时前
App 使用 HTTPS 的工程化实战,从接入到真机排查的一线指南
android·ios·小程序·https·uni-app·iphone·webview
Rysxt_3 小时前
Electron 与 uni-app 区别教程:如何选择适合你的跨平台开发框架?
javascript·electron·uni-app·跨平台
说私域6 小时前
开源AI大模型AI智能名片S2B2C商城小程序在护肤品文案痛点表达中的应用与效果研究
人工智能·小程序
weixin_177297220696 小时前
盲盒一番赏小程序系统开发:重构潮玩消费的沉浸式革命
小程序·重构·盲盒
weixin_177297220696 小时前
短剧小程序系统开发:开启影视娱乐新纪元
小程序·短剧
小小王app小程序开发7 小时前
线下剧本杀预约小程序核心功能玩法解析:轻量化载体重构娱乐消费生态
小程序·重构·娱乐