Canvas 使用小精灵获得base64

由于pixi，我添加了一些效果，如对比度或亮度，但我想返回。所以，我想使用base64在画布上生成新的精灵

console.log（）向我返回一个与画布不对应的字符串

以下是代码：

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);
    } )
} )

我认为不可能一开始就获得数据，但我不明白为什么。有人有回应吗？

我只想使用

$（'canvas'）[0]。最后是toDataURL

，Pixi将所有这些都放在画布中

这里有一个例子

函数toDataURL（）{ $（'#base'）.val（$（'canvas'）[0].toDataURL（'image/jpeg'，1.0））； } var app=new PIXI.Application（{宽度：500，高度：140}）； document.body.appendChild（app.view）； var url='1〕http://cdn.shopify.com/s/files/1/0496/1029/files/Freesample.svg?5153' var-loader=PIXI.loader； add（url）； loader.load（函数（）{ var sprite=new PIXI.sprite（new PIXI.Texture.fromImage（url）） app.stage.addChild（精灵） sprite.rotation=-0.5； toDataURL（） }); $（“#导出按钮”）。在（“单击”，到数据URL）

PIXI.utils.skipHello（）；
出口

感谢您的回复，但阅读文档后，我不明白何时应该使用PIXI.loader。PIXI.loader用于等待加载结束？我使用PIXI.loader只是为了创建一个示例画布，您不必做您应该关注的部分是使用

toDataURL

首先，我尝试在一个新文件中执行您的代码，但它不起作用。我在Mozzila Firefox上。如果我没有放入$（document）.ready（）函数，则使用click事件时，它不起作用。在做了一些研究之后，我找到了另一种方法。为什么它不能与.toDataURL（）@wyllisMonteiro一起工作请看这里：这是一个“新文件”，它工作正常，您的文件可能没有正确的order@wyllisMonteiro你知道你的档案有什么问题吗？