buuing / lucky-canvas

🎖🎖🎖 基于 TS + Canvas 开发的【大转盘 / 九宫格 / 老虎机】抽奖插件,🌈 一套源码适配多端框架 JS / Vue / React / Taro / UniApp / 微信小程序等,🎨 奖品 / 文字 / 图片 / 颜色 / 按钮均可配置,支持同步 / 异步抽奖,🎯 概率前 / 后端可控,🚀 自动根据 dpr 调整清晰度适配移动端

Home Page:https://100px.net

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

通过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
}