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.