Jump to content
GameMonetize.com © The leading broker of high quality cross-platform HTML5 games ×

pixi.js exports HD image get error on mobile device

hyzjshwo

By hyzjshwo,
in Pixi.js

 Share

Recommended Posts

hyzjshwo Newbie

hyzjshwo

Posted
Posted

Hello everyone.

I am a newbie using pixijs. I recently worked on a project using pixijs. When I use the export image function by extract, if PIXI.settings.RESOLUTION is not set, the browser on mobile device can export the image, but the image is particularly bad, but when I set PIXI.settings.RESOLUTION, the image export fails. How can I export HD pictures on mobile device?

I intercepted the error report and write a demo.

Can't Upload attaches. So I paste code here. Sorry my bad english. 

<html>
    <head>
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <script src="https://cdn.bootcss.com/pixi.js/5.0.4/pixi.js"></script>
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <style>
            body{
                margin: 0px;
                padding: 0px;
            }
            .renderCanvas{
                width: 100%;
                height: 100%;
            }
        </style>
        </head>
    <body>
        <div id='canvasDiv'>
            
        </div>
        <script>

            $(function(){
                var width = document.body.clientWidth 
                var height = document.body.clientHeight

                var props = {
                    width: width ,
                    height: height, 
                    antialias: true, 
                    preserveDrawingBuffer: true,
                    autoDensity: true,
                    resolution: window.devicePixelRatio,
                    backgroundColor:0xffffff,
                }
                var renderer = null
                if(PIXI.utils.isWebGLSupported()){
                    props.forceFXAA = true
                    renderer = new PIXI.Renderer(props);
                }else{
                    renderer = new PIXI.CanvasRenderer(props)
                }

                //desktop browser can exports retina image ,but mobile browser get error
                PIXI.settings.RESOLUTION = props.resolution

                var stage = new PIXI.Container();

                $('#canvasDiv').append(renderer.view)

                var ticker = new PIXI.Ticker();

                ticker.add(() => {
                    renderer.render(stage);
                }, PIXI.UPDATE_PRIORITY.LOW);
                ticker.start();
                
                var content = new PIXI.Container();

                //large content
                var bg = new PIXI.Graphics()
                bg.beginFill(0x90c282)
                bg.drawRect(0,0,width ,height*4)
                bg.endFill()

                content.addChild(bg)

                //a line testing
                let obj =  new PIXI.Graphics()
                obj.lineStyle(2, 0xff0000);
                obj.moveTo(0,0)
                obj.lineTo(200,200)

                let tempBg =  new PIXI.Graphics()

                //draw two object, one out of viewport and one in viewport
                tempBg.lineStyle(2, 0xff0000)
                tempBg.drawCircle(100,400,50)


                tempBg.lineStyle(2, 0xff0000)
                tempBg.drawCircle(100,height*3+200,50)


                content.addChild(obj)
                content.addChild(tempBg)

                stage.addChild(content)

                //simulate viewport move
                content.y = -height*3

                //simulate save image action
                setTimeout(function(){
                    const imageUrl = renderer.plugins.extract.base64(content,'image/jpeg');
                    //console.log(imageUrl)

                    let link = document.createElement("a");
                    link.href = imageUrl;
                    link.download = "picture.png";
                    link.style.display = "none";
                    document.body.appendChild(link);
                    link.click();
                    link.parentNode.removeChild(link);
                },2000)

            })

        </script>
    </body>
</html>

 

Link to comment
Share on other sites
hyzjshwo Newbie

hyzjshwo

Posted
  • Author
Posted
48 minutes ago, ivan.popelyshev said:

Two more things:

1) preserveDrawingBuffer: true,
In case you specify this, everything will be slow but you can just use canvas.getImageData

2) resolution has to be passed in renderTexture.create too

Welcome to our forum!

 

52 minutes ago, ivan.popelyshev said:

if you pass an element to extract, it takes element bounds, not screen bounds. Here's workaround:
 

https://github.com/pixijs/pixi.js/issues/5903

Thanks for your reply.

I tried using renderTexture, 

let renderTexture = PIXI.RenderTexture.create({width:width, height:height*4,resolution:props.resolution});

....
 renderer.render(content,renderTexture);
 const imageUrl = renderer.plugins.extract.base64(renderTexture,'image/jpeg');

but this has two problems:


1, I want to export all the display objects(draw lines,rects,sprites) on "content" element  into a picture. But I can only get the image datas of the current screen after using renderTexture.
2, the browser on the mobile device is still get errors. 

[Error] WebGL: INVALID_VALUE: texImage2D: width or height out of range
	texImage2D
	updateTexture (pixi.js:20049)
	bind (pixi.js:19926)
	updateFramebuffer (pixi.js:15871)
	bind (pixi.js:15658)
	bind (pixi.js:18855)
	render (pixi.js:20817)
	(anonymous function
Link to comment
Share on other sites
ivan.popelyshev Enthusiast

ivan.popelyshev

Posted
Posted

ok, that extract thing with non-integer reoslution was fixed in https://github.com/pixijs/pixi.js/pull/5842 , but i cant give you build because it wasnt merged and our build-machine doesnt work with external branches. You have to clone that pulll and build it yourself, or wait for tomorrow when i have time to do that.

As for "height*4" , the problem is that max heigh for framebuffer is something like 4096, i believe. It was discussed in pixijs issues github page that some people wanted 10000x1000 images and it is possible, just not with `pixijs extract`, it needs extra code that takes many images and then joins them.

Link to comment
Share on other sites
hyzjshwo Newbie

hyzjshwo

Posted
  • Author
Posted
24 minutes ago, ivan.popelyshev said:

ok, that extract thing with non-integer reoslution was fixed in https://github.com/pixijs/pixi.js/pull/5842 , but i cant give you build because it wasnt merged and our build-machine doesnt work with external branches. You have to clone that pulll and build it yourself, or wait for tomorrow when i have time to do that.

As for "height*4" , the problem is that max heigh for framebuffer is something like 4096, i believe. It was discussed in pixijs issues github page that some people wanted 10000x1000 images and it is possible, just not with `pixijs extract`, it needs extra code that takes many images and then joins them.

Thanks @ivan.popelyshev , you are so so so so nice. I will try https://github.com/pixijs/pixi.js/pull/5842 by myself later. Thank you again for save my time and life.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...