uniapp前端绘制海报，H5,微信小程序

最新推荐文章于 2024-05-09 18:38:56 发布
最新推荐文章于 2024-05-09 18:38:56 发布
阅读量301 收藏 1
点赞数 1
文章标签： uni-app 前端 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LY1879276369/article/details/132620935
版权

一，H5绘制

downloadImageA() {
				let that = this
				const imageUrl = '图片地址https形式';

				uni.showLoading({
					title: '正在下载',
					mask: true
				})

				const link = document.createElement('a');
				link.href = imageUrl;
				link.download = 'image.jpg';
				link.target = '_blank';
				link.style.display = 'none';
				document.body.appendChild(link);
				link.click();
				document.body.removeChild(link);

				uni.hideLoading()
				uni.showToast({
					title: '图片下载成功',
					icon: 'success',
					duration: 2000
				})
			},
savePhoto: function(index) {
				let that = this
				// 提示用户正在合成，否则用户可能有不当操作或者以为手机卡死
				uni.showLoading({
					title: '合成中......',
					mask: true
				})
				// 创建画布对象
				const ctx = uni.createCanvasContext("myCanvas", that)
				// 获取图片信息，要按照原图来绘制，否则图片会变形 
				uni.getImageInfo({
					src: 'https://xindong.hnjjwl.cn/uploads/common/haibao.png',
					success: function(res) {
						uni.createSelectorQuery().select('#canvas-container').boundingClientRect(function(
							rect) {
							var height = rect.height;
							var right = rect.right;
							let width = rect.width * 0.8;
							var left = rect.left + 5;
							let imgPath = res.path
							ctx.setFillStyle('#fff');
							ctx.fillRect(0, 0, rect.width, height);
							// 这里处理自适应
							let rpx = 1;
							let px = 1
							uni.getSystemInfo({
								success(res) {
									rpx = res.screenWidth / 350;
								},
							})
							//背景图
							ctx.drawImage(imgPath, 0, 0, rect.width, rect.height);
							//  绘制二维码
							uni.getImageInfo({
								src: that.code, // 二维码图片的路径
								success: function(res) {
									console.log(" 绘制二维码》》》", res)
									// 绘制二维码
									ctx.drawImage(res.path, (rect.width - 110) / 2 *
										px, 240 * rpx, 111 * rpx, 111 * rpx)
									ctx.draw()
									uni.showLoading({
										title: '正在保存',
										mask: true
									})
									setTimeout(() => {
										uni.canvasToTempFilePath({
											canvasId: 'myCanvas',
											success: function(res) {
												console.log(
													"合成的带有小程序码的图片success》》》",
													res)
												let tempFilePath =
													res
													.tempFilePath

												const link =
													document
													.createElement(
														'a');
												link.href =
													tempFilePath;
												link.download =
													'image.jpg';
												link.target =
													'_blank';
												link.style
													.display =
													'none';
												document.body
													.appendChild(
														link);
												link.click();
												document.body
													.removeChild(
														link);
												uni.hideLoading()
												const isSafari =
													/^((?!chrome|android).)*safari/i
													.test(navigator
														.userAgent
														);
												if (isSafari) {
													uni.showModal({
														title: '温馨提示',
														content: '图片保存成功，可在浏览器下载目录中查看',
														showCancel: false
													})
												} else {
													uni.showModal({
														title: '温馨提示',
														content: '图片保存成功,稍等相册查看..',
														showCancel: false
													})
												}

												console.log(
													"合成的带有小程序码的图片的信息》》》",
													res)
											},
											fail: function(res) {
												console.log(
													"生成的图拍呢 失败 fail fail fail ",
													res)
												uni.hideLoading()
												uni.showModal({
													title: '温馨提示',
													content: '小程序码图片合成失败，请重试',
													showCancel: false
												})
											}
										}, that)
									}, 1500)
								},
								fail(res) {
									console.log(res, '二维码获取失败，请重试');
									uni.hideLoading()
									uni.showModal({
										title: '温馨提示',
										content: '二维码获取失败，请重试',
										showCancel: false
									})
								}
							})
						}).exec()
					},
					fail(res) {
						console.log(res, '图片信息获取失败，请重试');
						uni.hideLoading()
						uni.showModal({
							title: '温馨提示',
							content: '图片信息获取失败，请重试',
							showCancel: false
						})
					}
				})
				// }
			},

二，小程序绘制

<template>
	<view class="">
		<view class="haibao po_re dis_c _c">
			<image class="back_img" src="/static/haibao.jpg" mode=""></image>
			<image :src="code" class="ewm_img" mode=""></image>
		</view>
		<view class="cont" id='canvas-container' style="width: 100%;height: 794rpx;">
			<canvas canvas-id="myCanvas" style="width:100%;height:100%;" catchlongtap='saveShareImg'></canvas>
		</view>
		<!-- <view class="save_btn" @click="save"> -->
		<view class="save_btn" @click="savePhoto">
			保存海报到相册
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				code: '',
				bg: 'https://happlove.xilian.love/uploads/common/haibao.jpg',
			}
		},
		onShow() {
			let that = this
			let data={
				user_id:uni.getStorageSync('user_id'),
				user_token:uni.getStorageSync('user_token')
			}
			this.$http.post("user/info",this.$Base64.encode(JSON.stringify(data))).then(res=>{
				console.log(res)
				if(res.status==1){
					that.code = res.result.promo_code
					// that.getImg(that.code,"http://happylove.zzqtrj.net/uploads/common/haibao.jpg")
				}
			})
		},
		methods: {
			savePhoto: function(index) {
			    let that = this
			    // let imgs = that.data.imgs
			
			    // if (imgs[index].isDownLoad) {
			    //   // 如果已经下载过 提示用户
			    //   wx.showToast({
			    //     title: '你已经下载过该图片',
			    //     icon: 'none'
			    //   })
			    //   return
			    // } else {
			      // 提示用户正在合成，否则用户可能有不当操作或者以为手机卡死
			      uni.showLoading({
			        title: '合成中......',
			        mask: true
			      })
			
			      // 创建画布对象
			      const ctx = uni.createCanvasContext("myCanvas", that)
			      // 获取图片信息，要按照原图来绘制，否则图片会变形 
			      uni.getImageInfo({
			        src: that.bg,
			        success: function(res) {
						uni.createSelectorQuery().select('#canvas-container').boundingClientRect(function(rect) {
							var height = rect.height;
							var right = rect.right;
							let width = rect.width * 0.8;
							var left = rect.left + 5;
							let imgPath = res.path
							ctx.setFillStyle('#fff');
							ctx.fillRect(0, 0, rect.width, height);
							// 这里处理自适应
							let rpx = 1;
							let px = 1
							uni.getSystemInfo({
								success(res) {
									rpx = res.screenWidth / 350;
								},
							})
							//背景图
							// if (cardbg) {
								ctx.drawImage(imgPath, 0, 0, rect.width, rect.height);
							// }
							//  绘制二维码
							uni.getImageInfo({
							  src: that.code, // 二维码图片的路径
							  success: function(res) {
							    console.log(" 绘制二维码》》》", res)
							    // 绘制二维码
							    // ctx.drawImage(res.path, 50, imgH - 380, 300, 300)
								ctx.drawImage(res.path, (rect.width-110)/2 * px, 240 * rpx, 111 * rpx, 111 * rpx)
							    ctx.draw()
										
							    uni.showLoading({
							      title: '正在保存',
							      mask: true
										
							    })
										
							    setTimeout(() => {
							      uni.canvasToTempFilePath({
							        canvasId: 'myCanvas',
							        success: function(res) {
							          console.log("合成的带有小程序码的图片success》》》", res)
							          let tempFilePath = res.tempFilePath
							          // 保存到相册
							          uni.saveImageToPhotosAlbum({
							            filePath: tempFilePath,
							            success(res) {
										
							              // 修改下载状态
							              // imgs[index].isDownLoad = true
										
							              uni.hideLoading()
							              uni.showModal({
							                title: '温馨提示',
							                content: '图片保存成功，可在相册中查看',
							                showCancel: false,
							                success(res) {
							                  uni.clear
							                  if (res.confirm) {
							                    // that.setData({
							                    //   isShow: true
							                    // })
							                  }
							                }
							              })
										
							              // that.setData({
							              //   imgs: imgs,
							              // })
							            },
										
							            fail(res) {
							              uni.hideLoading()
							              uni.showModal({
							                title: '温馨提示',
							                content: '图片保存失败，请重试',
							                showCancel: false
							              })
							            }
							          })
										
							          console.log("合成的带有小程序码的图片的信息》》》", res)
							        },
							        fail: function(res) {
							          console.log("生成的图拍呢 失败 fail fail fail ", res)
							          uni.hideLoading()
							          uni.showModal({
							            title: '温馨提示',
							            content: '小程序码图片合成失败，请重试',
							            showCancel: false
							          })
							        }
							      }, that)
							    },1500)
							  },
							  fail(res) {
							    uni.hideLoading()
							    uni.showModal({
							      title: '温馨提示',
							      content: '二维码获取失败，请重试',
							      showCancel: false
							    })
							  }
							})
						}).exec()
			          // 根据 图片的大小 绘制底图 的大小
			          // console.log(" 绘制底图 的图片信息》》》", res)
			          // let imgW = res.width
			          // let imgH = res.height
			          // let imgPath = res.path
			
			          // that.setData({
			          //   canvasHeight: imgH,
			          //   canvasWidth: imgW
			          // })
			          // 绘制底图 用原图的宽高比绘制
			          // ctx.drawImage(imgPath, 0, 0, imgW, imgH)
			
			          
			
			        },
			        fail(res) {
			          uni.hideLoading()
			          uni.showModal({
			            title: '温馨提示',
			            content: '图片信息获取失败，请重试',
			            showCancel: false
			          })
			        }
			      })
			    // }
			
			  },
			save: function() {
				const that = this
				uni.showLoading({
					title: '正在保存',
					mask: true,
				})
				setTimeout(function() {
					uni.canvasToTempFilePath({
						canvasId: 'myCanvas',
						success: function(res) {
							uni.hideLoading();
							var tempFilePath = res.tempFilePath;
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success(res) {
									uni.showModal({
										content: '图片已保存到相册，赶紧晒一下吧~',
										showCancel: false,
										confirmText: '好的',
										confirmColor: '#333',
										success: function(res) {
											if (res.confirm) {}
										},
										fail: function(res) {}
									})
								},
								fail: function(res) {
									if (res.errMsg ===
										"saveImageToPhotosAlbum:fail:auth denied" ||
										res.errMsg ===
										"saveImageToPhotosAlbum:fail auth deny" || res
										.errMsg ===
										"saveImageToPhotosAlbum:fail authorize no response"
									) {
										uni.openSetting({
											success(settingdata) {
												if (settingdata.authSetting[
														"scope.writePhotosAlbum"
													]) {} else {}
											}
										})
									}
								}
							})
						}
					});
				}, 1000);
			},
			getImg: function(codeImg, cardbg) {
				const that = this
				console.log(codeImg)
				uni.downloadFile({
					url: codeImg,
					success: function(res) {
						that.getuser(res.tempFilePath, cardbg)
					},
					fail: function(err) {
						console.log(err)
					}
				})
			},
			getuser: function(codeImg, cardbg) {
				const that = this
				console.log(cardbg)
				uni.downloadFile({
					url: cardbg,
					success: function(res) {
						var cardbg = res.tempFilePath;
						that.getCanvas(codeImg, cardbg);
					},
					fail: function(err) {
						console.log(err)
					}
				})
			},
			createRpx2px(rpx) {
				return uni.getSystemInfoSync().windowWidth / 750 * rpx
			},
			getCanvas: function(codeImg, cardbg) {
				var that = this;
				console.log(codeImg,cardbg)
				// var cardBase = that.data.cardBase; //需要绘制的数据集合
				const ctx = uni.createCanvasContext('myCanvas'); //创建画布
				var width = "";
				uni.createSelectorQuery().select('#canvas-container').boundingClientRect(function(rect) {
					var height = rect.height;
					var right = rect.right;
					width = rect.width * 0.8;
					var left = rect.left + 5;
					ctx.setFillStyle('#fff');
					ctx.fillRect(0, 0, rect.width, height);
					// 这里处理自适应
					let rpx = 1;
					let px = 1
					uni.getSystemInfo({
						success(res) {
							rpx = res.screenWidth / 350;
						},
					})
					//背景图
					if (cardbg) {
						ctx.drawImage(cardbg, 0, 0, rect.width, rect.height);
					}
					//  绘制二维码
					if (codeImg) {
						ctx.drawImage(codeImg, (rect.width-110)/2 * px, 240 * rpx, 111 * rpx, 111 * rpx)
					}
				}).exec()

				setTimeout(function() {
					ctx.draw();
				}, 1000)
			},
		}
	}
</script>

<style>
	page {
		padding: 43rpx 32rpx 0rpx;
		background-color: #F5F5F5;
		box-sizing: border-box;
	}
	.cont{
		position: fixed;
		left: 300%;
	}
	.ewm_img {
		width: 220rpx;
		height: 220rpx;
		position: absolute;
		bottom: 53rpx;
	}

	.back_img {
		width: 100%;
		height: 100%;
	}

	.haibao {
		width: 100%;
		height: 794rpx;
	}

	.save_btn {
		width: 90%;
		margin: 70rpx auto 0rpx;
		height: 90rpx;
		background-color: #826AF8;
		border-radius: 20rpx;
		line-height: 90rpx;
		text-align: center;
		font-size: 30rpx;
		color: #FFFFFF;
	}
</style>

黑云压城After
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
小程序海报和H5海报生成
xueyawuhai的博客
06-29 1331
微信canvas2D或者html2Canvas生成海报 海报生成其实就是利用canvas,拿到canvas生成的Data URLs保存为图片或分享给好友
微信小程序使用canvas绘制实现时钟
11-01
此外，微信小程序中canvas的性能和浏览器中的canvas略有不同，需要注意优化绘制过程，避免过于频繁的重绘。 在这个clockDemo中，我们可以看到如何将微信小程序的canvas组件与JavaScript结合，实现动态的时钟功能。...
使用html2canvas 生成h5项目中需要的海报效果，uniapp 生成h5海报
业余前端的职业经历
12-03 1084
分享中有一个业务功能就是海报分享，把当前页面的数据整理下 然后生成一个图片让用户进行保存 然后发给其他的用户 扫码进入活动中，这个也是推广的一种形式吧 对当前页面进行截图保存转换图片。那么就需要我们今天的主人公。html2canvas。首先进行说明，这个html2canvas也说了 毕竟只是对页面的进行截图 并不是达到原来的看到的效果那样，会有点模糊 The script allows you to take “screenshots” of webpages or parts of it, directl
uniapp_canvas生成海报_微信小程序海报
最新发布
分享程序相关知识
05-09 820
uniapp_vue3版本做微信小程序项目，生成海报功能，使用canvas进行实现，适配各种型号手机。
uniapp项目使用html2canvas在h5端生成海报并下载
RUI_JS的博客
02-27 892
uniapp保存商品海报功能下载后商品主图不展示。
uniapp h5 海报
m0_46978096的博客
07-04 566
uniapp h5 海报
h5 uniapp html2canvas生成海报,保存到本地功能实现；
qq_44333822的博客
12-21 855
html2canvas生成海报 h5 uniapp
yolov5/v6.0微信小程序前端代码
05-23
《基于yolov5/v6.0的微信小程序前端代码详解》 在当前的智能时代，计算机视觉技术正逐渐融入我们的日常生活，而YOLO（You Only Look Once）作为其中的杰出代表，以其高效和精准的实时目标检测能力受到广泛关注。...
微信小程序实现分享商品海报功能
12-13
以上就是微信小程序实现分享商品海报功能的主要步骤，包括图片的本地缓存、海报的绘制、分享配置以及保存图片到相册。在实际开发中，可能还需要根据业务需求进行细节调整，如动态加载数据、优化性能等。对于使用其他...
分享功能，canvas绘制微信小程序分享海报
09-28
总的来说，结合微信小程序的分享功能和canvas绘制，我们可以创造出具有吸引力的个性化分享海报，提高用户的参与度和分享率。在实践中，还可以根据业务需求添加更多复杂的元素，如动态效果、二维码等，进一步提升用户...
微信小程序canvas实现椭圆（圆形）缩放
01-09
在微信小程序中，Canvas是用于绘制图形的重要组件，它可以让我们实现丰富的动态视觉效果。本示例专注于使用Canvas绘制椭圆（圆形）并实现其缩放功能。以下将详细讲解实现这个功能所需的知识点： 1. **Canvas API**...
uniapp 生成海报图片base64转换
04-16
uniapp 生成海报图片base64转换 （微信头像贴在海报上需要base64转换）import { pathToBase64, base64ToPath } from "路径" base64ToPath(res.data.data.poster) .then(path => {}） .catch(error => { console.error(error) })
uniapp 小程序，用uqrcode 生成海报
u013683248的博客
03-29 375
uniapp 生成海报
uniapp 手写canvas海报（兼容android/ios/h5/微信小程序）
m0_61454727的博客
12-13 3618
uniapp 手写canvas海报（兼容android/ios/h5/微信小程序），轻松加愉快
uniapp微信小程序开发，生成海报插件painter的使用
yang5687810的博客
02-15 2486
uniapp微信小程序开发，生成海报插件painter的使用
前端uniapp生成海报绘制canvas画布并且保存到相册【实战/带源码/最新】
m0_49714202的博客
11-20 2092
前端uniapp生成海报绘制canvas画布并且保存到相册【实战/带源码/最新】
uni-app，关于 canvas 在 app，小程序， h5中，实现绘制，保存本地图片
前端
11-28 2306
uni-app中，关于 app， 小程序，h5中，实现绘制，保存本地图片，网上找一圈，全是微信小程序的还问题不断，自己进行编译修改，供自己使用的文档记录
小程序-uni-app：将页面（html+css）生成图片/海报/名片，进行下载 保存到手机
snowball的博客
10-17 8730
本文实现，uniapp微信小程序，把页面内容保存为图片，并且下载到手机上，说实话网上找了很多资料，但是效果不理想，直到看了一个开源项目，我知道可以实现了，本文以开源项目uniapp-wxml-to-canvas 为蓝本 记录集成的步骤，以供参考。这些组件可以通过 require 方法引入并使用，也可以在页面的 json 配置文件中进行全局注册，被所有页面调用。通过创建自定义组件，可以让开发者更加方便地完成复杂的交互效果和组件封装，从而提高小程序的可维护性和开发效率。到此功能实现，集成步骤也比较简单，
uniapp h5微信小程序 人机五子棋 源码
05-16
uniapp是一款优秀的跨平台开发框架，支持同时开发H5、微信小程序、Android和iOS等多种平台应用。人机五子棋是一种流行的棋类游戏，玩家可以与计算机进行对弈。由于H5和微信小程序已经成为了现代化网络应用的主流方式...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

黑云压城After

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值