【小程序】Canvas 画布分享海报

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

成品效果图

  • 可以通过切换下面图片形成不同的海报背景分享图
    【小程序】Canvas 画布分享海报,小程序,小程序
<template>
	<view>
	 	// type="2d"必须加
		<canvas type="2d" :style="{width:Artwidth+ 'px',height:Artheight + 'px', margin:'0 auto'}" canvas-id="firstCanvas"
			id="firstCanvas"> </canvas>
		<view class="bootmbtn">
			<view class="save" @click="save">
				保存海报
			</view>
			<scroll-view scroll-x="true" style="white-space: nowrap;width:100vw">
				<view class="botmbar" :class="current==1?'new':''" @click="getimg('/static/canvas/1.jpg',1)">
					<image src="/static/canvas/1.jpg" mode=""></image>
				</view>
				<view class="botmbar" :class="current==2?'new':''" @click="getimg('/static/canvas/2.jpg',2)">
					<image src="/static/canvas/2.jpg" mode=""></image>
				</view>
				<view class="botmbar" :class="current==3?'new':''" @click="getimg('/static/canvas/3.jpg',3)">
					<image src="/static/canvas/3.jpg" mode=""></image>
				</view>
				<view class="botmbar" :class="current==4?'new':''" @click="getimg('/static/canvas/4.jpg',4)">
					<image src="/static/canvas/4.jpg" mode=""></image>
				</view>
			</scroll-view>
		</view>

	</view>
</template>

<script>
	//接口获取二维码
	import {
		getCode,
	} from "@/common/api.js"
	export default {
		data() {
			return {
				dpr: 1,
				Artwidth: 0,
				Artheight: 0,
				w: 375,
				h: 500,
				shareimg: "",
				current: 1,
				ctx: "",
			};
		},
		onLoad() {
			this.openapply()
		},
		methods: {
			//立即推广
			openapply() {
				getCode().then(res => {
					if (res.code == 1) {
						this.shareimg = res.data
						this.getimg("/static/canvas/1.jpg", 1)
					}
				})
			},
			getimg(IMG, index) {
				let that = this
				that.current = index
				const query = uni.createSelectorQuery().in(this)
				query.select("#firstCanvas").fields({
					node: true,
					size: true
				}).exec(res => {
					const {
						node: canvas
					} = res[0];
					console.log(canvas, 888)
					//绘制
					const ctx = canvas.getContext('2d');
					that.ctx = canvas//这一步为了画布转图片
					that.dpr = uni.getWindowInfo().pixelRatio || 1;
					canvas.width = that.w * that.dpr
					canvas.height = that.h * that.dpr
					ctx.clearRect(0, 0, canvas.width, canvas.height)
					that.Artwidth = that.w
					that.Artheight = that.h
					ctx.fillStyle= "#ffffff"
					ctx.fillRect(0, 0,canvas.width, canvas.height);
					console.log(canvas.width, canvas.height, 400 * that.dpr)
					//获取图片实例,去绘制
					const bgimage = canvas.createImage()
					bgimage.onload = () => {
						ctx.drawImage(bgimage, 0, 0, canvas.width, 400 * that.dpr)
						that.getcode(canvas, ctx)
					}
					bgimage.src = IMG
				})
			},
			// 绘制二维码
			getcode(canvas, ctx) {
				let that = this
				const bgimage = canvas.createImage()
				bgimage.onload = () => {
					ctx.drawImage(bgimage, (that.w - 105) * that.dpr, (that.h - 90) * that.dpr, 88 * that.dpr, 88 *
						that.dpr)
					that.getlogo(canvas, ctx)
				}
				bgimage.src = that.shareimg
			},
			//绘制 logo
			getlogo(canvas, ctx) {
				let that = this
				const bgimage = canvas.createImage()
				bgimage.onload = () => {
					ctx.drawImage(bgimage, 24 * that.dpr, (that.h - 90) * that.dpr, 88 * that.dpr, 88 * that.dpr)
					that.getfont(canvas, ctx)
				}
				bgimage.src = '/static/2.png'
			},
			// 绘制文字
			getfont(canvas, ctx) {
				let that = this
				ctx.fillStyle= "#000000"
				ctx.font = '42px "微软雅黑"';
				ctx.fillText('小程序', 130 * that.dpr, (that.h - 45) * that.dpr)
				ctx.fillStyle = "red";
				ctx.scale(that.dpr, that.dpr);
			},
			//保存
			save() {
				let that = this
				setTimeout(() => {
					uni.canvasToTempFilePath({
						canvas: that.ctx, // 使用2D 需要传递的参数
						success: function(res) {
							// 在H5平台下,tempFilePath 为 base64
							console.log(res.tempFilePath)
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: function(res2) {
									uni.showToast({
										title: "保存成功,请从相册选择再分享",
										icon: "none",
										duration: 5000,
									});
								},
								fail: function(err) {
									uni.hideLoading();
									// console.log(err.errMsg);
								},
							});
						},
						fail(err) {
							console.log(err)
						}
					})
				}, 1000)
			}
		}
	}
</script>

<style lang="scss">
	.bootmbtn {
		position: fixed;
		bottom: 0;
		left: 0;
		height: 380rpx;
		padding: 24rpx 0 32rpx 32rpx;
		border-top: 4rpx #d8d3cf solid;
	}

	.botmbar {
		margin-top: 12rpx;
		display: inline-block;
		width: 310rpx;
		height: 310rpx;
		margin-right: 24rpx;
		text-align: center;
		line-height: 320rpx;

		image {
			width: 300rpx;
			height: 300rpx;
		}
	}

	.new {
		border: 3px solid #000000;
		box-sizing: border-box;
	}

	.save {
		// position: fixed;
		// bottom: 240rpx;
		// right: 24rpx;
		margin: 0 auto;
		width: 248rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 80rpx;
		opacity: 1;
		background: #a91e25;
		opacity: 1;
		color: #ffffff;
		font-size: 30rpx;
		font-weight: 600;
		font-family: "PingFang SC";
		text-align: center;
	}
</style>

文章来源地址https://www.toymoban.com/news/detail-634795.html

到了这里,关于【小程序】Canvas 画布分享海报的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • Canvas绘制毛玻璃背景分享海报

    最近重新设计了分享海报,用毛玻璃作为背景,使整体更有质感,如果没有用到canvas,毛玻璃效果其实很好实现,给元素添加一个滤镜即可(比如:filter: blur(32px)),但是实践的过程中发现,canvas在IOS端一直没有效果,查了一个文档发现IOS端不支持filter。。。有点想骂人。。

    2024年02月12日
    浏览(37)
  • uniapp+vue3+vant-weapp运行到微信小程序中绘制海报,将画布中绘制base64格式的图片以及长按进行图片的分享和下载

    对于uniapp绘制海报,遇到的难点就是将bas64格式的图片绘制上去,试了很多方式,终于找到了不错的方法, 先将其下载到本地,再进行绘制,以下就是 完整的代码 海报的内容可以根据自己的需求自行更改 ## 下面有一个测试base64格式的图片,可用替换成自己的实际路径 ## 长按

    2024年02月21日
    浏览(142)
  • 微信小程序实现画布生成海报功能

    微信小程序可以通过使用 标签来实现生成海报的功能。以下是基本实现步骤: 1.在 WXML 文件中创建一个 标签,并设置其宽度和高度属性。 ’ 2.在 JS 文件中,获取到 标签的上下文对象。 3.在 ctx 上下文对象中,使用各种绘图 API 绘制出海报的内容 4.最后调用 ctx.draw() 方法将海

    2024年02月16日
    浏览(53)
  • 微信小程序canvas画布不清晰解决方法

    绘制的图片,文字等十分模糊 添加以下代码,通过设置分辨率来解决 完整代码: 模糊不清的时候 多多进行调试一下就可以了 多尝试新方案 

    2024年02月10日
    浏览(60)
  • 微信小程序--canvas画布实现图片的编辑

    上传图片,编辑图片大小,添加文字,改变文字颜色等 微信小程序--canvas画布实现图片的编辑 软件环境:微信开发者工具 官方下载地址:微信开发者工具下载地址与更新日志 | 微信开放文档 1、基本需求。 实现上传图片 实现图片编辑 实现添加文字 实现导出图片 2、案例目录

    2024年02月05日
    浏览(53)
  • 小程序离屏canvas(createOffscreenCanvas)生成推广海报

    离屏canvas调用wx.canvasToTempFilePath报错 Failed to execute ‘drawImage’ on ‘CanvasRenderingContext2D’: The provided value is not of type \\\'(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas) 开发者工具版本:稳定版1.05.2204180(windows) 调试基础库版本

    2024年02月10日
    浏览(40)
  • uniapp 使用canvas画海报(微信小程序)

    效果展示:  项目要求:点击分享绘制海报,并实现分享到好友,朋友圈,并保存 先实现绘制海报   下面是海报下面的分享弹窗 因为分享到朋友圈实在没找到有使用自定义按钮的可能,所以还是需要点击右上角胶囊    以上就是画海报以及分享的全部过程了,另有一个点:

    2024年02月13日
    浏览(66)
  • 小程序使用canvas标签生成海报并保存图片

    先说一下做功能前的感受,简直一脸懵逼,第一次用canvas,只知道是个画布,其余什么都不知道…琢磨了一天才画出来… 开始之前百度了很久,想看看别人怎么写的,但是目前网上基本上用的都是wx.createCanvasContext这个api,但是这个api已经停止维护了,要求使用canvas代替,  

    2024年02月11日
    浏览(80)
  • 微信小程序canvas画布绘制文字自动换行

    关键步骤介绍: text为需要绘制的文本,通过换行符将text分割为words数组。 basic_height为第一行文本的高度。 get_canvas_row函数根据行宽限制将输入文本转化为不同的行,实现见下文。 text_size为设置的文本高度,h+text_size*j为每行待绘制文本的高度,绘制完成后更新h。 get_canvas_

    2024年01月17日
    浏览(53)
  • 微信小程序canvas画布转图片转pdf文件

    目录 关键步骤介绍 步骤一:将canvas页面保存为图片 步骤二:上传图片,获取唯一的fileID

    2024年01月16日
    浏览(47)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包