小程序canvas生成图片、html转图片,保存相册、分享朋友圈。

本文介绍如何在小程序中利用canvas结合背景图、文字、icon和二维码生成图片,进行保存到相册和分享到朋友圈的操作。实现思路是定义隐藏canvas,绘制图形,然后导出图片并保存。
摘要由CSDN通过智能技术生成

业务场景

生成一个由背景图片、文字、icon、二维码组合的图片,保存至本地相册。由于生成的二维码为支付二维码切真实存在,这里做了马赛克处理。不是我canvas生成上去的吼。

实现思路:定义一个canvas,然后将他隐藏。生成了二维码后点击保存二维码时在canvas中绘制图形,然后调用canvasToTempFilePath方法把当前画布内容导出成指定大小的图片,返回图片路径,然后调用saveImageToPhotosAlbum将图片保存到本地。完成操作。

前端代码: (只展示了canvas和保存二维码的前端代码,其中页面显示的图像是html语言,并不是canvas)

js代码: canvasHidden:true控制canvas隐藏。

  data: {
	canvasHidden:true
  },

保存二维码按钮的函数:

	hidePayLayer(e){
		var codeimgs = this.data.codeimgs  //生成的二维码图像
		const ctx = wx.createCanvasContext('share'); //获取到canvas实
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值