PixiJS学习（4）导出 base64

简介：

在生产过程中有时候可能需要获取 pixiJs 生成的 canvas 上下文，或者需要导出当前 canvas 的 base64 ，从而实现保存图片的功能。

Base64是一种用64个字符来表示任意二进制数据的方法。

用记事本打开exe、jpg、pdf这些文件时，我们都会看到一大堆乱码，因为二进制文件包含很多无法显示和打印的字符，所以，如果要让记事本这样的文本处理软件能处理二进制数据，就需要一个二进制到字符串的转换方法。Base64是一种最常见的二进制编码方法。

在原生的 canvas 中使用 canvas.toDataURL("image/jpeg")，在此也采用相同的方式获取 base64 。

获取base64:

// 把canvas对象所渲染的图案转为一个Base64数据格式的对象
this.imageData = this.app.renderer.plugins.extract.base64(this.app.stage);
// 获取使用原生的方法
this.imageData = this.app.view.toDataURL("image/png");
console.log("------this.imageData----", this.imageData);

 

遇到一些问题的记录和总结：

• 导出时出现白屏：需要在创建 canvas 时，添加一个属性：preserveDrawingBuffer: true // 启用图形缓冲区保留，如果需要在WebGL上下文上调用toDataUrl，请启用此选项。
• 在 ios 上导出时会上下颠倒，解决方案：canvas 设为透明，不要添加背景颜色即可。可能是个别平台或者机型。