sunniejs / vue-canvas-poster

vue生成海报图,一个通过 css 属性画 canvas 图片的轻量级的 vue 组件 (Vue poster,a lightweight vue component that draws canvas images via css properties.)
https://sunniejs.github.io/vue-canvas-poster/
533 stars 91 forks source link

同页面多张海报时,widthPixels重新计算宽高bug #57

Open walkerliu01 opened 3 years ago

walkerliu01 commented 3 years ago

你好,请使用下面的模板创建 issue 以帮助我们更快的排查问题,不规范的 issue 会被关闭,感谢配合。

Browser version [浏览器类型和版本] chrome 最新版

vue-canvas-poster version [vue_canvas_poster 版本] 1.2.1

Vue version [Vue 版本] 2.6.1

reappear link [重现链接] 无

One-line summary [描述问题] 场景: 页面上同时需要生成三张海报, 海报背景宽高微 1080px 1920px , 但是由于某些场景问题 需要根据 组件的widthPixels属性去动态的调整海报生成的宽高,我看源码会在字符串原型链上的.toPx()方法 去计算缩放比例, 重设宽高 只有一张海报的时候后没问题, 但是三张海报的时候,由于 重置setStringPrototype(1) 是最开始的时候执行, 但是在异步任务里执行的, 会导致在promise.then中, 没有重置scale缩放比例, 这时候使用.toPx()方法会沿用上一次的缩放 导致 比如三张海报都需要计算scale, 实际结果是 第一张没问题, 第二张延用了上一个的宽度缩放,但是高度没缩放,同时重置了 setStringPrototype(1) 缩放比, 第三张又没问题, 依次类推 第偶数张的海报 宽度缩了, 但高度没缩

Other comments [其他信息] 无

walkerliu01 commented 3 years ago

解决方式: 在源码this.canvasWidthInPx = width.toPx() 之前加上 setStringPrototype(1);

zzq0826 commented 2 years ago

Browser version [浏览器类型和版本] chrome 最新版

vue-canvas-poster version [vue_canvas_poster 版本] 1.2.1

Vue version [Vue 版本] 2.6.1

reappear link [重现链接] 无

One-line summary [描述问题] 只有一张图片的时候,频繁生成图片的话,会有几率出现异常。 宽度是[widthPixels]的值,高度反而是[painting]的height