Getting "RangeError: offset is out of bounds" exception when extract base64 data from container, when devicePixelRatio not equal to 1

[Akila Bandara]

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.

[ivan.popelyshev]

its fixed in lates (dev) of v6, i think  as for v4, cant tell anything about it. Just add some rounds for width/height and remove ceils in `extract` plugin sources and it should be fine.

Edited June 21, 2021 by ivan.popelyshev