通过html2canvas将大转盘生成图片,内容不显示
Xxcool opened this issue · comments
- 你当前是什么框架(必填):vue
- 你使用的是哪个包(必填):@lucky-canvas/vue
- 你当前插件的版本(必填):1.7.27
- 当前环境是小程序还是浏览器(选填):浏览器
- 详细描述你的bug:在使用 html2canvas 将包裹着大转盘组件 LuckyWheel 的内容生成图片时,图片可以正常生成,但是只有大转盘部分是空的,排查了是因为canvas绘制的时候,大转盘内图片跨域了,需要设置crossOrigin属性
- 问题代码(重要):
<div ref="content">
<LuckyWhee1
ref="myLucky"
width="300px"
height="300px"
:prizes="prizes"
:blocks="blocks"
:buttons="buttons"
:defaultConfig="defaultConfig
@start="startCallback"
@end="endCallback"
/>
<div class="tips”v-if="count">今日剩余{[ count }}抽奖机会</div>
<div class="btn”@click="startCallback”>开始抽奖</div>
</div>
generateImage() {
const element = this.$refs.content
htm12canvas(element).then((canvas) => {
const image= canvas .toDataURL( 'image/png')
console. log(image)
return image
}