Search the Community
Showing results for tags 'extract'.
Found 6 results
-
API: https://pixijs.download/dev/docs/PIXI.CanvasExtract.html However, as per the docs: * app.renderer is undefined so cannot find the plugins * PIXI.CanvasExtract is also undefined Environment Pixi.js: 6.2.2 Use case: trying to take a screenshot of the app. It uses an opengl shader and dumping the canvas with `toBlob` yields no image.
-
Hi All, I'm developing simple image editor which is need to load a image and add texts and drawings and save the edited image. But I'm getting this exception when try to use plugin.extract.base64 method for my container. This exception is getting only when device pixel ratio is not equal to one. (PIXI version: 4.8.1) pixi.min.js:17 Uncaught RangeError: offset is out of bounds at Uint8ClampedArray.set (<anonymous>) at t.canvas (pixi.min.js:17) at t.base64 (pixi.min.js:17) Here is my code sample. PIXI.settings.RESOLUTION = window.devicePixelRatio; PIXI.settings.ROUND_PIXELS = false; var container = document.getElementById('editor-container'); this.set('pixiRenderer', PIXI.autoDetectRenderer(container.offsetWidth, container.offsetHeight, {transparent: true})); container.appendChild(this.get('pixiRenderer').view); this.set('stage', new PIXI.Container()); // Load image to pixi var texture = PIXI.Texture.fromImage(img); var image = new PIXI.Sprite(texture); this.get('stage').addChild(image); // On save image var base64 = this.get('pixiRenderer').plugins.extract.base64(this.get('stage'), 'image/jpeg', 1); Note: If not update the PIXI.settings.RESOLUTION to device pixel ratio exception will not be created. But that is applied to keep keep clarity of image and drawings when zooming the web page. If anyone can help it would be great. Thanks. -
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>
-
So, my code: // create app like new PIXI.Application({ width: 1024, height: 540, // ... // to do something // ... renderer.resize(4096,2056) // then replace textures to hi-res , etc // and try to get png file from canvas var data = renderer.extract.base64() and... data is 1024 x 540 ... How to get data with new (resized) resolutions? Tnx
-
I have an mp4 video file (H264 encoded). I want to create a PIXI.extras.AnimatedSprite from this video to be able not lagging reversed animation play; If I splice this video to image sequence the size becoming huge (about 8Mb vs 500kb of mp4). I want to load low size mp4 file and extract image array from it to create an Animated Sprite. Reverse playing directly from <video> by changing video.currentTime is lagging. I want to create something like hover/unhover animation.
-
Hi. I have a newbie question. So I create a new PIXI application, draw a blue square onto it, wait a couple of seconds, and then manually start a function to extract the pixels. The extracted pixels are always black. If anybody could help me find out why this is the case, that would be great. The blue square is correctly drawn and visible, and the extract function gives me a correct array of data, but all pixel information in it is black. As I execute the extract function right now manually, it's not possible that it's extracted too early or something like that. Here are the important bits of the code: initPixi() { let type = "WebGL"; if(!PIXI.utils.isWebGLSupported()){ type = "canvas"; } this.pixi = new PIXI.Application({ width: 0, height: 0, antialias: false, transparent: false, resolution: 1, autoResize: true, view: $('.imgCurrent')[0] } ); } updatePixi() { this.pixi.renderer.resize(this.imgWidth, this.imgHeight); this.pixiDraw(); } pixiDraw() { let rectangle = new PIXI.Graphics(); rectangle.beginFill(0x66CCFF); rectangle.drawRect(0, 0, 200, 200); rectangle.endFill(); rectangle.x = 0; rectangle.y = 0; this.pixi.stage.addChild(rectangle); } pixiExtract { this.pixi.renderer.extract.pixels(); }
