Question

由于使用了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);
    } )
} )

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

Answer 1

我只用$('canvas')[0].toDataURL作为结尾，Pixi将所有内容都放在画布上。

这是一个例子

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

1 个答案: