保存二维码至手机(海报)

// html
	<view @click="downloadPic">保存二维码</view>
	<view style="position: absolute; top: 0; left: 0; z-index: -1;">
		// 设置canvasid
		<canvas style="width: 670rpx; height: 1070rpx;" canvas-id="firstCanvas" id="firstCanvas"></canvas>
	</view>
// 接口获取的的邀请码图片 ewmCode
// 保存图片1
downloadPic() {
	let that = this![在这里插入图片描述](https://img-blog.csdnimg.cn/a0b9205798bf439f90db2112cc12fa77.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6YW355uW5py66L2m55S3,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)

	// 底图背景
	let bigImg = '/static/index/downPic.png'
	// 定义一下
	var ctx = uni.createCanvasContext("firstCanvas");
	// 控制背景图位置(左,上,右,下)
	ctx.drawImage(bigImg, 0, 0, uni.upx2px(670), uni.upx2px(1070));
	// 控制二维码图位置(左,上,右,下)
	ctx.drawImage(that.ewmCode, uni.upx2px(106), uni.upx2px(358), uni.upx2px(460), uni.upx2px(460));

	if (this.num) {
		ctx.setFontSize(30) // 字号
		ctx.setFillStyle('#fff') // 颜色
		ctx.fillText('积分' + " " + " " + " " + this.num, uni.upx2px(200), uni.upx2px(990)); // (文字,x,y)
	}
	// 开始画图
	ctx.draw();
	// 提示
	uni.showToast({
		icon: 'none',
		position: 'bottom',
		title: "海报生成中~", // res.tempFilePath
	})
	setTimeout(function() {
	// 把当前画布指定区域的内容导出生成指定大小的图片,并返回文件路径
		uni.canvasToTempFilePath({
			fileType: "jpg",
			canvasId: 'firstCanvas', //html 中定义的id
			X: 0,
			y: 0,
			width: uni.upx2px(670), 
			height: uni.upx2px(1070),
			// destWidth: 670,
			// destHeight: 1070,
			success: function(res) {
				// 在H5平台下,tempFilePath 为 base64
				console.log(res.tempFilePath)
				// 将图片保存到手机
				uni.saveImageToPhotosAlbum({
					filePath: res.tempFilePath,  //文件路径
					success: function() {
						uni.showToast({
							icon: 'none',
							position: 'bottom',
							title: "图片已下载至【图库】,请打开【图库】查看", // res.tempFilePath
						});
					}
				});
			}
		})
	}, 1000)
},

保存至手机效果图

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值