Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

通过html2Canvas将包含大转盘的页面元素生成图片,由于大转盘内图片跨域,给图片使用formatter设置crossOrigin,在奖项不固定的情况下,新增或减少大转盘的奖项、设置新的大转盘相关的背景图、奖项图、按钮图,页面上的大转盘组件内容会消失 #525

Open
LinYue998 opened this issue Dec 9, 2024 · 0 comments

Comments

@LinYue998
Copy link

  • 你当前是什么框架(必填):vue3
  • 你使用的是哪个包(必填):"@lucky-canvas/vue": "^0.1.11",
  • 你当前插件的版本(必填):"@lucky-canvas/vue": "^0.1.11",
  • 当前环境是小程序还是浏览器(选填):浏览器
  • 详细描述你的bug:通过html2Canvas将包含大转盘的页面元素生成图片,由于大转盘内图片跨域,给图片使用formatter设置crossOrigin,在奖项不固定的情况下,新增或减少大转盘的奖项、设置新的大转盘相关的背景图、奖项图、按钮图,页面上的大转盘组件内容会消失
  • 问题代码(重要):
    image
    image
    image
// 代码开始, 别再放歪了行吗
blocks: [
					{
						imgs: [
							{
								src: `${getFileName(setFileUrl('rotate-pan.png'))}`,
								top: 0,
								width: '100%',
								height: '100%',
								rotate: false,
								isDefault: true,
								formatter: (img: HTMLImageElement) => {
									img.crossOrigin = 'anonymous'
									return img
								}
							}
						]
					}
				], //转盘背景相关
				prizes: [
					{
						imgs: [
							{
								id: 1,
								src: `${getFileName(setFileUrl('ac-zp1.png'))}`,
								width: '30%',
								top: '40%',
								isDefault: true,
								name: t('awardGrade.first'),
								formatter: (img: HTMLImageElement) => {
									img.crossOrigin = 'anonymous'
									return img
								}
							}
						]
					}, //一等奖
					{
						imgs: [
							{
								id: 2,
								src: `${getFileName(setFileUrl('ac-zp2.png'))}`,
								width: '30%',
								top: '40%',
								isDefault: true,
								name: t('awardGrade.second'),
								formatter: (img: HTMLImageElement) => {
									img.crossOrigin = 'anonymous'
									return img
								}
							}
						]
					}, //二等奖
					{
						imgs: [
							{
								id: 3,
								src: `${getFileName(setFileUrl('ac-zp3.png'))}`,
								width: '30%',
								top: '40%',
								isDefault: true,
								name: t('awardGrade.third'),
								formatter: (img: HTMLImageElement) => {
									img.crossOrigin = 'anonymous'
									return img
								}
							}
						]
					}, //三等奖
					{
						imgs: [
							{
								id: 0,
								src: `${getFileName(setFileUrl('ac-zp0.png'))}`,
								width: '30%',
								top: '40%',
								isDefault: true,
								name: t('awardGrade.thanks'),
								formatter: (img: HTMLImageElement) => {
									img.crossOrigin = 'anonymous'
									return img
								}
							}
						]
					} //谢谢参与
				], //转盘奖品相关
				buttons: [
					{
						radius: '50%',
						imgs: [
							{
								src: `${getFileName(setFileUrl('ac-pointer.png'))}`,
								width: '50%',
								top: '-90%',
								isDefault: true,
								formatter: (img: HTMLImageElement) => {
									img.crossOrigin = 'anonymous'
									return img
								}
							}
						]
					}
				], //转盘按钮相关
// 代码结束
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant