使用 PixiJS 获取 base64

Question

感谢 pixi，我添加了一些效果，例如对比度或亮度，但我想 return 返回。所以，我想使用 base64 在 canvas.

上生成新的精灵

console.log() return 对我来说是一个与我的 canvas

不对应的字符串

这是代码：

let app             = new PIXI.Application({width: 5376, height: 2688, backgroundColor: 0x000000});
document.body.appendChild(app.view);
let renderer        = app.renderer;

var container       = new PIXI.Container();
container.x = app.screen.width / 2;
container.y = app.screen.height / 2;
app.stage.addChild(container);

let sprite          = new PIXI.Sprite.fromImage('./o8rvhb.jpg');
sprite.width        = 5376;
sprite.height       = 2688;
sprite.anchor.set(0.5);
container.addChild(sprite);

let data =  renderer.plugins.extract.image(container);
console.log( data.src );

更新

经过多次测试，我给你看结果

$( document ).ready( function() {
    let app             = new PIXI.Application({width: 5376, height: 2688, backgroundColor: 0x000000});
    document.body.appendChild(app.view);
    let renderer        = app.renderer;

    var container       = new PIXI.Container();
    container.x = app.screen.width / 2;
    container.y = app.screen.height / 2;
    app.stage.addChild(container);

    let sprite          = new PIXI.Sprite.fromImage('./o8rvhb.jpg');
    sprite.width        = 5376;
    sprite.height       = 2688;
    sprite.anchor.set(0.5);
    container.addChild(sprite);

    $( "#exportButton" ).on( "click", function() {
        let data =  renderer.plugins.extract.image(container);
    } )
} )

我认为开始时无法获取数据，但我不明白为什么。有人有回应吗？

Answer 1

我会在最后使用 $('canvas')[0].toDataURL Pixi 将所有内容放入 canvas。

这是一个例子

function toDataURL() {
    $('#base').val($('canvas')[0].toDataURL('image/jpeg', 1.0));
}


var app = new PIXI.Application({width: 500, height: 140});
document.body.appendChild(app.view);

var url = 'http://cdn.shopify.com/s/files/1/0496/1029/files/Freesample.svg?5153'
var loader = PIXI.loader;
loader.add(url);
loader.load(function () {
    var sprite = new PIXI.Sprite(new PIXI.Texture.fromImage(url))
    app.stage.addChild(sprite)
    sprite.rotation = -0.5;
    toDataURL()
});

$("#exportButton").on("click", toDataURL);

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.8.1/pixi.min.js"></script>
<script> PIXI.utils.skipHello(); </script>

<input id="base" size="60">
<button id="exportButton">Export</button>
<br><br>

这是 html 页面中的相同代码：
http://heldersepu.github.io/hs-scripts/HTML/PixiJS.html

使用 PixiJS 获取 base64

get base64 with PixiJS

canvas

base64

pixi.js