FIX: Correction of height and width in extracted canvas

[martinboksa]

Description of change

Correction of width and height in extracted canvas.

Some devices returns width and height with decimal places ( 'cause resolution is 2.758, etc.. ). So later ( in computation ) the size of data will not equal.

Example:

const width = frame.width * resolution // 1182.5;
const height = frame.height * resolution // 1012;
const webglPixels = new Uint8Array(BYTES_PER_PIXEL * width * height); 
const canvasData = canvasBuffer.context.getImageData(0, 0, width, height);

// webglPixels.length = 4 786 760
// canvasData.data.length = 4 784 736
// webglPixels.length !== canvasData.data.length

canvasData.data.set(webglPixels);

It caused the error

RangeError: Source is too large.

Reproduction

Chrome: android devices like: xiaomi mi mix 3
My colleague has also succeeded in the chrome mobile emulator

[themoonrat]

Are you able to come up with a pixiplayground or jsfiddle with this error occuring? I've done a pr for v5 fixing a similar thing, so a shared example would be great

#5836

[martinboksa]

https://jsfiddle.net/bokos/0ge749th/

[ivanpopelyshev]

Welcome to the X-Files. You can see all those resolution rounding PR's and issues in the list by clicking on a aqua-colored label.

I need more info about it, how exactly did you get 1182.5 there? It seems that there're more places that are affecting that value, not only this floor

[ivanpopelyshev]

Usually I do ceil(x-eps) in such places, where eps=1e-4.

[martinboksa]

The error appeared on Xiaomi mi mix 3. I was trying to get inner container screenshot with these specs.

Specs:

// frame.width = 430
// frame.height = 368
// resolution = 2.75

const width = frame.width * resolution // 430 * 2.75 = 1182.5;
const height = frame.height * resolution // 368 * 2.75 = 1012;
const webglPixels = new Uint8Array(BYTES_PER_PIXEL * width * height);  // 4 * 1182.5 * 1012 = 4 786 760
const canvasData = canvasBuffer.context.getImageData(0, 0, width, height); // 4 * 1182 * 1012 = 4 784 736

// webglPixels.length !== canvasData.data.length

canvasData.data.set(webglPixels);

[ivanpopelyshev]

Awesome! Can you also give me renderer.gl.drawingBufferWidth and height please?

[ivanpopelyshev]

Please add + (1e-4) inside floor operation and I'll approve it. I know cases when certain zoom values affect multiplication/division precision.

[martinboksa]

I forgot which sprites were used.
So another example:

frame: width,height = [188, 250]
width, height = [517, 687.5]
resolution = 2.75
canvasData.data.length = 1420716
webglPixels.length = 1421750
renderer.gl.drawingBufferWidth = 1080

[ivanpopelyshev]

Oh, you've used extract on sprites, not whole screen. Why do you need them? If its just a single sprite - there are better ways to do that.

[martinboksa]

I extracted container. Because I've got a products and i need to take container from one product and then move it into another product.
Anyway what's better way to do that with single sprite?

[ivanpopelyshev]

Is it in the same renderer, webgl context, canvas, or in different?

[martinboksa]

Is it in the same renderer, webgl context, canvas, or in different?

different

[bigtimebuddy]

Thank you @martinboksa, sorry for the delay. Hoping to get a v4 release out soon.

[martinboksa]

@bigtimebuddy no problem, I finally updated to 5.x