uniapp小程序canvas生成图片

这篇具有很好参考价值的文章主要介绍了uniapp小程序canvas生成图片。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

需求分析

点击页面分享按钮时候,跳出弹出层 ,css完成页面 ,点击弹出层的保存到相册,能生成canvas画布,然后变为图片。

效果展示

小程序uni-app将html+css生成图片,uni-app,小程序

控制台打印生成图片链接。
小程序uni-app将html+css生成图片,uni-app,小程序

小程序uni-app将html+css生成图片,uni-app,小程序

代码实现

<view class="card">
	。。。省略
	<view class="close" @click="save">保存到相册</view>
</view>
<view style="width: 0px; height: 0px; overflow: hidden">
	//让父标签 0宽 0高 隐藏溢出
	<canvas canvas-id="myCanvas" :style="{ width: '375px', height: '560px' }"></canvas>
</view>

在canvas画布外 添加父元素,让画布不可见文章来源地址https://www.toymoban.com/news/detail-843669.html

methods: {
		open() {
			// 获取 Canvas 组件的上下文对象
			const ctx = uni.createCanvasContext('myCanvas', this)
			//蓝色底色
			ctx.beginPath()
			ctx.rect(0, 0, 375, 560)
			ctx.setFillStyle('#4678ff')
			ctx.fill()
			
			// 二维码部分白底
			ctx.beginPath()
			ctx.rect(10, 340, 355, 210)
			ctx.setFillStyle('#ffffff')
			ctx.fill()

			//文字
			ctx.setFontSize(20)
			ctx.setFillStyle('#ffffff')

			ctx.setTextAlign('center')// 文字在设定的x位置居中
			ctx.setTextBaseline('bottom') //文字在设定的y轴线 靠下
			
			ctx.fillText(`${this.time[0]}-${this.time[1]}`, 187, 110)
			ctx.fillText(`${this.area}积分榜 荣获`, 187, 140)

			ctx.fillText('第', 160, 300)
			ctx.setFontSize(40)
			ctx.fillText('0', 185, 310)
			ctx.setFontSize(20)
			ctx.fillText('名', 210, 300)

			
			ctx.setFillStyle('black')
			// 获取文字长度
			const fontWidth = ctx.measureText(this.userInfo.name)
			ctx.setTextBaseline('middle')
			ctx.drawImage(this.userInfo.pic,157 - fontWidth.width / 2, 350, 60, 60)
			ctx.setTextAlign('left')
			ctx.fillText(this.userInfo.name, 187 + fontWidth.width / 2, 380)

			ctx.setFillStyle('#707070')
			ctx.setTextAlign('center')
			ctx.setFontSize(15)
			ctx.setTextBaseline('bottom')
			ctx.fillText('骑行里程0.00千米', 187, 440)
			ctx.drawImage('/static/images/othericons/客服二维码.png', 265, 460, 80, 80)
			ctx.draw()
		},
		save() {
			this.open()
			uni.canvasToTempFilePath(
				{
					x: 0,
					y: 0,
					width: 375,
					height: 560,
					canvasId: 'myCanvas',
					success: function (res) {
						// 在H5平台下,tempFilePath 为 base64
						console.log(res.tempFilePath)
						uni.showToast({
							icon: 'success',
							title: '保存成功!'
						})
					},
					fail(res) {
						console.log(res)
						uni.showToast({
							icon: 'error',
							title: '保存失败!'
						})
					}
				},
				this
			)
		}
	}

到了这里,关于uniapp小程序canvas生成图片的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

原文地址:https://blog.csdn.net/qq_44184452/article/details/133302052

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

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

相关文章

  • 解决uni-app开发小程序时,CSS调用本地图片当背景时不能使用的问题

    uniapp官方给出的解释就是小程序不支持本地图片,只支持网络访问或者base64。 当背景图片小于40kb的时候还好,uniapp会自动转为base64格式;但是大于40kb时候就不行了,目前我了解的有三种方式解决: 1.可以通过动态样式“:style”来解决,在标签上如下编写: 接着在data里声明

    2024年02月12日
    浏览(12)
  • uniapp APP端使用html2canvas截图分享小程序卡片图片模糊、跨域等问题解决

    项目场景:uniapp  APP端,分享小程序到微信好友,使用html2canvas截取当前页面做卡片封面图。仅是需要展示部分内容用作卡片封面就可以,不强制需要全屏截图。 问题1、部分页面截取到的图片分享到微信后卡片图片模糊。 问题2、截图时报错:Failed to execute \\\'toDataURL\\\' on \\\'HTMLC

    2024年02月05日
    浏览(15)
  • 【uni-app】后端返回base64转二维码并显示在canvas生成海报

    使用官方的 uni.getFileSystemManager().writeFile() 方法可将base64码转成的二维码显示在画布上,代码如下: const obj = {                     page: \\\'pages/sort/goodsDetail\\\',                     co_Nu: this.goodInfo.co_Nu                 }                 const _this = this       

    2024年02月11日
    浏览(12)
  • 微信小程序canvas实现简易手写签名版(uni-app)

    微信小程序可以通过canvas实现手写签名的效果,本文中使用的是微信小程序Canvas 2D接口 本示例中绘制的是横屏签名的效果,效果图如下: 这里我们需要调整canvas的物理宽高,默认物理宽高为300*150px,物理宽高调整通过css样式即可,本文中需要根据屏幕高度进行动态调整,使

    2024年02月12日
    浏览(17)
  • uni-app 微信小程序中如何通过 canvas 画布实现电子签名?

    一、实际应用场景 电子签名软件应用场景:电子签名在金融、银行、贷款行业中可以用于对内日常办公流转的文档的盖章签字,对外涉及业务合作协议,采购合同,贷款申请、信用评估、贷款合同、贷款文件表、说明函等等。 可以说,只要是涉及纸质文档签字盖章的场景,

    2024年02月10日
    浏览(12)
  • uni-app App和H5平台上传视频截取视频第一帧生成图片

    提示:因为uni-app中renderjs仅支持App和H5平台,所以该方案仅支持当前这两个平台。 this.request为本人封装的接口请求方法,可以替换成个人的接口请求方法,如有需要可在下方留言 因为uni-app App端没有dom概念,不支持dom操作,并且uni-app的canvas不支持绘制video。renderjs完美解决了

    2023年04月09日
    浏览(13)
  • uniapp小程序canvas生成图片

    点击页面分享按钮时候,跳出弹出层 ,css完成页面 ,点击弹出层的保存到相册,能生成canvas画布,然后变为图片。 控制台打印生成图片链接。 在canvas画布外 添加父元素,让画布不可见

    2024年03月27日
    浏览(10)
  • uni-app小程序加载图片优化

    场景: 较大的图片加载很慢,会出现较长时间的白屏,体验感差。   解决方案 :一进入页面,图片未加载成功前,进行loading…;图片加载完成后会触发@load事件;

    2024年02月11日
    浏览(14)
  • uni-app开发小程序使用uni.chooseMedia选择图片,安卓手机无法选择图片

    一、在小程序中,选择图片并上传,是一个很常见的功能; 二、最近在开发中,使用 uni.chooseMedia 来做选择图片功能时,苹果手机是正常的,安卓手机打不开!!!代码如下: 就这点屁代码,苹果手机可以正常打开选择图片的功能,安卓手机没法打开!!! !!!! 我百思

    2024年02月16日
    浏览(10)
  • 微信小程序给图片加水印【使用uni-app】

    选择图片后使用canvas绘制图片,再绘制需要的水印文字,将绘制好的画布转化为图片即可 最终效果

    2024年02月10日
    浏览(7)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包