前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >PIXI输出base64图像

PIXI输出base64图像

作者头像
黒之染
发布2018-10-19 14:28:19
1.5K0
发布2018-10-19 14:28:19
举报

方法1

如果想使用 canvas 原生的 toDataURL ,参考这篇问答,以下代码是具体方法。但这个方法如果在iOS设备上使用,获取到的图像会上下翻转(效果相当于css3transform: scaleY(-1);)。原因不明,可能也是webGL搞鬼吧。

代码语言:javascript
复制
//用WebGL时,要渲染后同步获取base64才有效,异步再来就只能拿到一张黑图
app.render();
$previewPic.src = app.view.toDataURL();

方法2

代码语言:javascript
复制
let app = new PIXI.Application();
app.renderer.plugins.extract.base64(app.stage);

这种方法其实就是把canvas中的app.stage转为base64,这有个问题是,如果你放进app.stage的内容没有撑满canvas,输出的base64图像则会比canvas要小,如果app.stage的内容溢出了canvas,溢出部分依然会输出在base64图像中,所以需要给stage加一个mask,以及一个透明的刚好充满canvasPIXI.Graphics

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 方法1
  • 方法2
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档