uniapp 实现生成海报并分享给微信好友和保存到本地相册

这篇具有很好参考价值的文章主要介绍了uniapp 实现生成海报并分享给微信好友和保存到本地相册。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

记录uniapp 生成二维码海报并保存到本地或者分享给微信好友


前言

最近又遇到一个需求:用户需要将小程序生成的二维码海报分享给微信好友或者保存到本地,最后实现的效果如下:
uniapp 实现生成海报并分享给微信好友和保存到本地相册uniapp 实现生成海报并分享给微信好友和保存到本地相册uniapp 实现生成海报并分享给微信好友和保存到本地相册


一、引入生成二维码的组件

这种网上随便找一下就有了,楼主采用的是tki-qrcode 生成二维码组件,具体的链接如下:
链接: https://blog.csdn.net/qq_45829293/article/details/123169952

二、点击右侧的分享图标生成海报

因为考虑到到时候生成的海报要分享,所以考虑用canvas的方式去绘制海报,当然你也可以试着用传统的 写法去生成,这边楼主没有去尝试过,所以这个方法也就不说了,只说canvas 的方式

核心生成代码如下(示例):

	//初始化画布
			async __init() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				this.ctx = uni.createCanvasContext('my-canvas', this)
				this.canvasW = uni.upx2px(500);
				this.canvasH = uni.upx2px(750);
				//设置画布背景透明
				this.ctx.setFillStyle('rgba(255, 255, 255, 0)')
				//设置画布大小
				this.ctx.fillRect(0, 0, this.canvasW, this.canvasH)
				//绘制圆角背景
				this.drawRoundRect(this.ctx, 0, 0, this.canvasW, this.canvasH, uni.upx2px(18), '#FFFFFF')
				//小程序码
				// let qrcodeImg = await this.getImageInfo(this.qrcode)
				// this.ctx.drawImage(qrcodeImg.path,198,(((this.canvasW-hW) / 2) + hH + 135), 92, 92)
				//获取二维码的图片
				let headerImg = await this.getImageInfo(this.src)
				let hW = uni.upx2px(500);
				let hW1 = uni.upx2px(300);
				let hH = uni.upx2px(300);
				//绘制标题图
				 this.drawRoundImg(this.ctx, headerImg.path, uni.upx2px(100), hH / 4, hW1, hH, 8)
				//绘制提示
				this.ctx.setFontSize(14);
				this.ctx.textAlign = 'center' //文字居中 设置文字居中但是fillText的第二个参数必须为画布宽度一半
				this.ctx.setFillStyle('#A4A4A4');
				let sWidth = this.ctx.measureText(this.subTitle).width
				this.ctx.fillText(this.subTitle, this.canvasW / 2, (
					((this.canvasW - hW) / 2) + hH + 70))
				this.ctx.setFontSize(12);
				this.ctx.fillText(this.subTitle1, this.canvasW / 2, (
					((this.canvasW - hW) / 2) + hH + 90))
				//绘制虚线
				this.drawDashLine(this.ctx, 10, (((this.canvasW - hW) / 2) + hH + 120), (this.canvasW - 10), (((this
					.canvasW - hW) / 2) + hH + 120), 5)
				//左边实心圆
				this.drawEmptyRound(this.ctx, 0, (((this.canvasW - hW) / 2) + hH + 120), 10)
				//右边实心圆
				this.drawEmptyRound(this.ctx, this.canvasW, (((this.canvasW - hW) / 2) + hH + 120), 10)
				//提示文案
				this.ctx.setFontSize(12);
				this.ctx.setFillStyle('#858585');
				//底部广告
				let BottomAdImg = await this.getImageInfo(this.abImg)
				// 判断一下手机系统的宽高
				uni.getSystemInfo({
					success: (res) => {
						if (res.windowHeight <= 568) {
							this.ctx.drawImage(BottomAdImg.path, uni.upx2px(20), (((this.canvasW - hW) /
								2) + hH + 140), uni.upx2px(460), (this.canvasH - hH) / 4)
						} else {
							this.ctx.drawImage(BottomAdImg.path, uni.upx2px(20), (((this.canvasW - hW) /
								2) + hH + 140), uni.upx2px(460), (this.canvasH - hH) / 3)
						}
					}
				});

三:将canvas 图片转化成图片(最关键)

这一步是最关键的,只有这一步完成了,才能够实现分享给用户或者保存下来

代码如下:

this.ctx.draw(true, () => {
						// 将canvas 变成图片方便发送给好友或者保存
						var that = this
						uni.canvasToTempFilePath({
							canvasId: 'my-canvas',
							fileType: 'jpg',
							x: 0,
							y: 0,
							complete: (res) => {
								this.canvasImg = res.tempFilePath
							}
						}, this);
					})

四:保存图片或者发送好友

这里采用了微信原生的方式,在img 标签上加上 show-menu-by-longpress=true 就可以了。文章来源地址https://www.toymoban.com/news/detail-407543.html

最后

如需项目demo,请联系我:1015095073@qq.com

到了这里,关于uniapp 实现生成海报并分享给微信好友和保存到本地相册的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp 微信小程序 绘制海报,长按图片分享,保存海报

    uView UI 2.0 dcloud 插件市场地址

    2024年02月12日
    浏览(67)
  • 微信小程序分享图片给微信好友(如二维码)

    目录 前言 一、使用哪种api? 二、对图片的处理需要转化为临时路径 三、Windows端兼容性问题 最近在公司开发一个微信小程序项目,用到的uniapp技术,在分享图片时,查看了uniapp的技术文档,写的还是很粗糙的,说得不太清楚,在我看了一个下午得出了一个结论,uniapp并没有

    2024年02月11日
    浏览(59)
  • uni-app分享小程序卡片给微信好友

    最近有这样一个需求,使用APP将一个小程序的页面分享给微信好友,起初一脸问号,APP分享小程序的页面,两个不相干的东西怎么关联分享?于是乎抱着实现不了的心态在网上看帖子,最后终于在uni-app文档和微信官方文档找到了答案。 这里需要注意的是, 这里的appid并不是

    2024年02月11日
    浏览(70)
  • uniapp微信小程序生成分享海报(模板自取)

    uniapp微信小程序生成分享海报模板 1、模板自取 2、可自行按需求更改调整 3、效果图如下: 生成前  ----- 生成后的图 需知: 博主的实现效果是先把需要生成的图片排版成静态页面,再点击生成海报-----通过canvas生成海报!!!            不需要这样效果话可以省略第一步

    2024年02月14日
    浏览(54)
  • 微信小程序canvas type=2d生成海报保存到相册、文字换行溢出显示...、文字删除线、分享面板

    做个简单的生成二维码海报分享, 我做的时候也找简单的方法看能不能实现页面直接截图那种生成图片,原生小程序不支持, 不多介绍下面有全部代码有注释、参数自行替换运行看看,还有需要优化的地方,有问题可以咨询我,我写的已经上线 如图:

    2024年02月11日
    浏览(58)
  • uniapp 微信小程序实现小程序分享好友

    我们可以使用 onShareAppMessage 的方法对 button 按钮进行触发 HTML代码

    2024年02月02日
    浏览(78)
  • 微信小程序实现生成分享海报案例

    一、引入插件painter (1)克隆地址:https://gitcode.net/mirrors/Kujiale-Mobile/Painter (2)下载的 painter 放到小程序的 components 目录下 二、页面中引入插件 (1)页面的 json 文件 (2)页面的 wxml 文件 其中 painter 插件可以获取绘制出来的图片路径, image 标签展示出来 三、绘制海报 1、

    2024年02月08日
    浏览(96)
  • 微信小程序 api+前端实现生成分享海报

    1.先看效果图,点击分享海报按钮,然后弹出分享海报  2.前端代码 这里用的组件有vant组件库还有canvas_drawer(一个画布组件) canvas_drawer下载地址 https://github.com/kuckboy1994/mp_canvas_drawer 把 components 中的 canvasdrawer 拷贝到自己项目下,然后再app.json中引用就行了,如下 \\\"usingCompon

    2024年02月09日
    浏览(51)
  • uniapp实现微信小程序端动态生成海报

    背景: 基于uniapp实现微信小程序中商品详情的海报生成与保存 效果图: 思路: 首先把海报上需要的内容准备好,比如用户头像,商品信息,二维码等。需要注意的是,因为二维码是动态生成的,所以需要后端传给我们,前端需要把路径和参数传给后端,后端请求微信服务接

    2024年02月12日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包