hyzjshwo

Members
  • Content Count

    3
  • Joined

  • Last visited

  • Days Won

    1

hyzjshwo last won the day on July 11

hyzjshwo had the most liked content!

About hyzjshwo

  • Rank
    Newbie
  1. 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.
  2. 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
  3. 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>