uniapp 生成商品海报并分享保存

最新推荐文章于 2024-05-09 18:38:56 发布
最新推荐文章于 2024-05-09 18:38:56 发布
阅读量1.4k 收藏 6
点赞数
文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/NI_chunz/article/details/118572675
版权

uniapp 生成商品海报并分享保存

<template>
	<view class="center">
			<view class="icon-item" @click="formposter">
					<view class="haibao-icon icon"></view>
					<text>生成海报</text>
			</view>
		<view class="canvas1"><canvas canvas-id="firstCanvas" id="firstCanvas" :style="{ height: `${HH}px`, width: `${WW * 0.85}px` }"></canvas></view>
		<view class="canvas2"><canvas id="qrcode" canvas-id="qrcode" :style="{ width: `${qrcodeSize}px`, height: `${qrcodeSize}px` }" /></view>
		<uni-popup ref="dialogPopup" type="dialog" :duration="100">
			<uni-popup-dialog :before-close="true" @close="close" @confirm="saveImg" class="dialog">
				<image v-if="isShow" class="posterImg" :src="base64" show-menu-by-longpress="true" :style="{ height: `${HH}px`, width: `${WW * 0.85}px` }"></image>
			</uni-popup-dialog>
		</uni-popup>
	
	</view>
</template>

<script>
import uQRCode from '@/common/uqrcode.js';
export default {
	data() {
		return {
			base64: '', // 海报
			HH: 0, // 弹窗高度
			WW: 0, // 弹窗宽度
			qrcodeSize: 80, // 二维码大小
			qrcodeSrc: '', // 二维码
			isSave: false,
			tempFilePath: '', //生成的海报路径
			isShow: true, //海报显示和隐藏
			bgimg: '***', //海报背景
			bgadorn: '***',//海报背景
			btnImg: '***',//海报背景
			qrcodeText: '***',//二维码路径
			productImg: '***'//产品图片
		};
	},
	mounted() {
	//获取设备的高度 *0.7是弹框高度
		uni.getSystemInfo({
			success: res => {
				console.log(res);
				this.HH = res.windowHeight * 0.7;
			}
		});
	},
	methods: {
		// 生成海报
		formposter() {
			this.isShow = true;
			this.$refs.dialogPopup.open('center');
			this.WW = this.$refs.dialogPopup.popupWidth;
			this.base64 = '';
			this.makeEQ();
		},
		// 绘画 canvas海报
		make_canvas(bgImg, adorn, btnImg, productImg) {
			let that = this;
			let ctx = uni.createCanvasContext('firstCanvas'); //绑定画布
			ctx.fillRect(0, 0, that.WW, that.HH); // 海报背景色参数以此：x轴 y轴 宽 高
			// ctx.drawImage(file,x,y,w,h)
			// file: 图片文件
			// x： x轴位置
			// y:  y轴位置
			// w:  宽
			// h： 高
			// 图片大小不同的话，需要自己去调整位置与宽高，这是个细致活
			console.log(that.WW * 0.85, that.HH);
			ctx.drawImage(bgImg.tempFilePath, 0, 0, that.WW * 0.85, that.HH); //填充进图片 背景
			ctx.setFillStyle('#000'); //设置文字color
			ctx.font = 'normal bold 14px Arial,sans-serif ';
			ctx.setTextAlign('center'); //同上
			that.canvasWraptitleText(ctx, '', that.shareParam.productName, that.WW / 2.35, that.HH / 10, 170, 17, 1);
			ctx.lineWidth = 3;
			ctx.strokeRect(that.WW * 0.06, that.HH * 0.12, that.WW * 0.72, that.HH * 0.73);
			ctx.drawImage(productImg.tempFilePath, that.WW * 0.065, that.HH * 0.12, that.WW * 0.72, that.HH * 0.7);
			ctx.drawImage(adorn.tempFilePath, 0, that.HH * 0.7, that.WW * 0.85, that.HH * 0.35);
			ctx.setFillStyle('#FFFFFF'); // 二维码后面的白色背景
			ctx.lineWidth = 3;
			ctx.strokeRect(that.WW * 0.54, that.HH * 0.75, that.WW * 0.276, that.HH * 0.21); //二维码边框
			ctx.fillRect(that.WW * 0.54, that.HH * 0.75, that.WW * 0.273, that.HH * 0.21); // 二维码后面的白色背景
			ctx.drawImage(that.qrcodeSrc, that.WW * 0.551, that.HH * 0.76, that.WW * 0.25, that.HH * 0.187); //填充进图片 二维码
			ctx.setFillStyle('#fff');
			ctx.font = 'normal bold 15px Arial,sans-serif ';
			that.canvasWraptitleText(ctx, '商品价格: ￥', that.shareParam.productPrice + '', that.WW * 0.2, that.HH * 0.81, 100, 17, 1);
			// ctx.fillText('商品价格: ￥15.8',that.WW*0.22, that.HH*0.81);
			that.canvasWraptitleText(ctx, '名称:  ', that.userParam.name, that.WW * 0.2, that.HH * 0.87, 100, 17, 1);
			// ctx.fillText('姓名: 张兮兮',that.WW*0.22, that.HH*0.87);
			ctx.drawImage(btnImg.tempFilePath, that.WW * 0.022, that.HH * 0.9, that.WW * 0.43, that.HH * 0.065);
			ctx.draw(); //输出到画布中
			setTimeout(() => {
				//不加延迟的话，base64有时候会赋予undefined
				uni.canvasToTempFilePath({
					canvasId: 'firstCanvas',
					success: res => {
						this.base64 = res.tempFilePath;
						that.isSave = true;
					}
				});
				uni.hideLoading();
			}, 300);
		},
		// 下载画布需要的图片
		uploadImg() {
			uni.showLoading({
				//增加loading等待效果
				title: '正在生成海报',
				mask: true
			});
			var that = this;
			// 背景图
			let promise1 = new Promise((resolve, reject) => {
				uni.downloadFile({
					url: that.bgimg,
					success: function(res) {
						resolve(res);
					},
					fail: err => {
						uni.hideLoading();
						console.log(err, that.bgimg, 'err1');
					}
				});
			});
			// 底部装饰图
			let promise2 = new Promise((resolve, reject) => {
				uni.downloadFile({
					url: that.bgadorn,
					success: function(res) {
						resolve(res);
					},
					fail: err => {
						uni.hideLoading();
						console.log(err, that.bgadorn, 'err2');
					}
				});
			});
			// 按钮图片
			let promise3 = new Promise((resolve, reject) => {
				uni.downloadFile({
					url: that.btnImg,
					success: function(res) {
						resolve(res);
					},
					fail: err => {
						uni.hideLoading();
						console.log(err, that.btnImg, 'err3');
					}
				});
			});
			// 商品图片
			let promise4 = new Promise((resolve, reject) => {
				uni.downloadFile({
					url: that.shareParam.productImg,
					success: function(res) {
						resolve(res);
					},
					fail: err => {
						uni.hideLoading();
						console.log(err, that.shareParam.productImg, 'err4');
					}
				});
			});
			
			Promise.all([promise1, promise2, promise3, promise4]).then(values => {
				console.log(values);
				this.make_canvas(values[0], values[1], values[2], values[3]);
			});
		},
		// 生成二维码
		makeEQ() {
			var that = this;
			uQRCode.make({
				canvasId: 'qrcode',
				text: that.qrcodeText,
				size: that.qrcodeSize,
				success: res => {
					console.log(res);
					that.qrcodeSrc = res;
					that.uploadImg(); // 开始 本地下载图片
				}
			});
		},
		showposter() {
			this.isShow = true;
			this.$refs.dialogPopup.open('center');
			this.WW = this.$refs.dialogPopup.popupWidth;
			if (this.base64) {
				setTimeout(() => {
					this.createposter();
				}, 2000);

				console.log(this.base64, 'this.base64');
			} else {
				this.makeEQ();
			}
		},
		createposter() {
			let ctx = uni.createCanvasContext('firstCanvas'); //绑定画布
			ctx.fillRect(0, 0, this.WW * 0.85, this.HH); // 海报背景色参数以此：x轴 y轴 宽 高
			ctx.drawImage(this.base64, 0, 0, this.WW * 0.85, this.HH); //填充进图片 背景
			ctx.draw();
		},
		// 处理商品文字信息
		canvasWraptitleText(canvas, title, text, x, y, maxWidth, lineHeight, maxRowNum) {
			if (typeof text != 'string' || typeof x != 'number' || typeof y != 'number') {
				return;
			}
			// canvas.font = '20px Bold PingFang SC'; //绘制文字的字号和大小
			// 字符分隔为数组
			var arrText = text.split('');
			var line = '';
			var rowNum = 1;
			for (var n = 0; n < arrText.length; n++) {
				var testLine = line + arrText[n];
				var metrics = canvas.measureText(testLine);
				var testWidth = metrics.width;
				if (testWidth > maxWidth && n > 0) {
					if (rowNum >= maxRowNum) {
						var arrLine = testLine.split('');
						arrLine.splice(-5);
						var newTestLine = arrLine.join('');
						newTestLine += '...';
						canvas.fillText(title + newTestLine, x, y);
						//如果需要在省略号后面添加其他的东西，就在这个位置写（列如添加扫码查看详情字样）
						//canvas.fillStyle = '#2259CA';
						//canvas.fillText('扫码查看详情',x + maxWidth-90, y);
						return;
					}
					canvas.fillText(title + line, x, y);
					line = arrText[n];
					y += lineHeight;
					rowNum += 1;
				} else {
					line = testLine;
				}
			}
			canvas.fillText(title + line, x, y);
		},
		close() {
			this.isShow = false;
			this.$refs.dialogPopup.close();
		},
		saveImg() {
			if (!this.isSave) {
				uni.showToast({
					title: '请等待海报生成',
					icon: 'none'
				});
			}
			uni.showLoading({
				title: '正在存储图片',
				mask: true
			});
			uni.saveImageToPhotosAlbum({
				filePath: this.base64,
				success: () => {
					uni.showToast({
						title: '已存至系统相册',
						duration: 500,
						success: () => {
							uni.hideLoading();
							this.isShow = false;
							this.$refs.dialogPopup.close();
					
						}
					});
				},
				fail: () => {
					uni.hideLoading();
				}
			});
		},
	}
};
</script>

<style lang="less">
.canvas1 {
	height: 100%;
	width: 100%;
	position: fixed;
	left: 100%;
	margin: 0;
}
.canvas2 {
	position: absolute;
	position: fixed;
	left: 100%;
}
.dialog {
	.posterImg {
		width: 100%;
		height: 100%;
	}
}
.product-intro {
	padding: 40rpx 30rpx;
}
</style>

效果图（想达到以下效果背景图需自行添加）
在这里插入图片描述

注意：
1、数据中使用到的地址均为网络图片，须通过downloadFile来将网络图片下载只本地
（在这时候遇到过真机调试无法下载要到微信公众平台配置downloadFile合法域名如下图）
在这里插入图片描述
2、如果需要让用户可以下载或分享图片 需要将海报转成图片 其中用到的canvas就需要通过css将其移出屏幕以外（使用隐藏会使整个canvas不生效）
3、项目中使用到了uni-popup和uni-popup-dialog插件 不需要自行省略

NI_chunz
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
uniapp微信小程序生成分享海报(模板自取)
qq_47195437的博客
06-20 5482
uniapp微信小程序生成分享海报
u-draw-poster:绘制多端海报工具，支持uni多端与微信环境执行
05-01
绘制海报工具简述 创建绘制海报canvas矩形方法，内置了图片绘制，圆角矩形绘制，换行字体绘制等方法。 接近原生开发体验，上手快，只需考虑业务逻辑，而不用考虑其他问题。 拥有良好的语法架构，不会在绘制uni/wx矩形时陷入回调地狱。 支持原生小程序，与uniapp多端应用。当是环境为原生小程序时，自动切换为性能更好的type2d绘制方式。 将复杂的逻辑组合为简单的方法，扩展性强，可使用 use|useCtx 引入扩展。 支持typescript，支持vue3模板，具体使用参考 。 更加强大的图片绘制与裁剪方法（object-fit） 支持声明式绘制扩展，自定义海报必备 具体使用参考 api文档： 插件市场： npm 安装插件 npm i --save-dev u-draw-poster 1. 创建海报绘制工具 <!-- #ifdef MP-WEIXIN --> <canvas id="ca
uniapp_canvas生成海报_微信小程序海报
最新发布
分享程序相关知识
05-09 734
uniapp_vue3版本做微信小程序项目，生成海报功能，使用canvas进行实现，适配各种型号手机。
uniapp生成商品分享海报
qq_38541936的博客
07-19 5230
uniapp用canvas生成一个分享商品的海报 文章目录前言一、展示效果二、使用步骤1.HTML部分2.CSS部分3.JS部分总结 前言 uniapp用canvas生成一个分享商品的海报，因为用到了uni.downloadFile这个API，所以要注意图片在H5端跨域的问题。 以下是本篇文章正文内容 一、展示效果 大致效果就是这样，点击生成海报的按钮，会用canvas生成一张海报，长按可以保存到手机上。 二、使用步骤 1.HTML部分 代码如下： <!-- 生成海报的点击事件 -->.
uniapp 生成分享图片(图片+二维码)，并保存到本地相册 功能实现
热门推荐
yehaocheng520的博客
08-30 2万+
生成分享图片 使用场景 在使用电商app时，通常有个分享给好友的功能，如果想要做分销类型，发展下线，也就是你邀请的好友是你的下级的话，就需要分享时将个人信息附带进去，因此会涉及到生成分享图片。 界面 点击上图中的“生成并保存图片”按钮，就会将图片及二维码合并成一张图片然后保存到手机本地相册。 此处的二维码是含有本人邀请码的下载app二维码。 生成分享图片功能 DCLOUD插件市场中，搜索“分享图”,可以看到第一个插件“canvas绘图，海报图，分享图，二维码生成”。 插件功能 支持多图片绘制，多文本绘制
uniapp点击生成商品海报、下载海报、分享海报
SunFlower914的博客
02-17 988
开发过程中遇到的根据商品信息生成海报，供用户下载海报 、分享海报等需求，页面结构及js完整代码如下：
uniapp 生成海报图片base64转换
04-16
uniapp 生成海报图片base64转换 （微信头像贴在海报上需要base64转换）import { pathToBase64, base64ToPath } from "路径" base64ToPath(res.data.data.poster) .then(path => {}） .catch(error => { ...
uniapp小程序绘制二维码生成图片保存到本地
06-24
今天用uniapp写小程序二维码并保存到本地，网上的完全没有用，最后自己写了一个， 1.使用weapp.qrcode生成二维码，并使用uni.canvasToTempFilePath生成临时图片文件， 2.使用canvas绘制二维码， 3.使用uni....
微信小程序生成分享海报方法（附带二维码生成）
10-17
主要介绍了微信小程序生成分享海报方法（附带二维码生成），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
uniapp海报内容并生成海报二维码图片（可拖拽，可调节大小）
10-19
6. **保存海报**：当用户满意海报内容后，调用canvas的toDataURL方法将canvas内容转换为Base64编码的图像URL，然后可以分享或保存到本地。 在压缩包中的"demo"文件可能是包含实现这一功能的示例代码。通过查看和...
uniapp之小程序端生成分享海报（带自定义参数的二维码）
Jocelyn_书
08-24 7525
getToken() { uni.showLoading({ title: '加载中', mask: true }) let APPID = 'wxbb79e27e89dd25ce' let APPSECRET = '9e891651373f472e7e73948f6ba06a11' uni.request({ url: `https://api.weixin.qq.co.
uni-app如何生成海报图片
月落星河
07-04 4671
通过uni-app生成分享图海报，进行活动分享和转发
uniapp生成海报
weixin_47284756的博客
08-26 2659
uniapp海报
uniapp 实现生成海报并分享给微信好友和保存到本地相册
weixin_43929450的博客
02-08 6500
uniapp 生成海报并分享给好友或者下载到本地
uniapp 微信小程序分享海报
weixin_44375151的博客
03-02 1233
/ 保存canvas图片，并获取链接。// 获取canvas上下文。// 要分享的图片链接。// 要分享的文本内容。// canvas宽度。// canvas高度。'这是要分享的标题'// 生成的海报链接。
uniapp完成分享海报功能（保存本地和分享微信好友）
weixin_65121344的博客
11-11 724
方法限制 filepath不能接受base64 需使用临时路径或者本地路径 （踩坑）success回调中返回生成后的base64路径 再赋值给image的url。2、页面直接使用即可（有‘xml’和‘json’两种使用方式，）个人觉得json使用方式 代码较整洁。同上先获取临时路径 再调取api。注：本次使用仅是微信小程序实现。1、uniapp插件市场导入。
Uniapp 截图或者生成海报的方法
shsbsnnnn的博客
06-19 1733
（不过此方案生成的海报内容有需要显示图片的情况下，需要把图片转成base64给image标签，详情请查看下面的代码。console.log('保存图片失败：' + JSON.stringify(e));//这里我将文件名用四位随机数拼接了，不然会出现当前图片替换上一张图片只能保存一张图片的问题。//销毁Bitmap图片。console.log('保存图片失败：' + JSON.stringify(e));// console.log('截屏绘制图片成功');
uni-app生成海报并分享
培根芝士的专栏
04-17 2036
lime-painter是一款canvas海报组件，可以更轻松的生成海报海报画板 - DCloud 插件市场一款canvas海报组件，更优雅的海报生成方案id=2389插件提供 JSON 及 Template 的方式绘制海报。
uniapp h5生成海报并在浏览器保存
04-27
你可以使用html2canvas和canvas2image两个库来实现uniapp H5生成海报并在浏览器保存的功能。 首先，你需要在uniapp项目中安装这两个库： ``` npm install html2canvas canvas2image --save ``` 然后，你可以在...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值