Picture misplaced

[wuwei]

Your library is great, but I have some problems

I don't know what I did wrong, and occasionally some pictures will be misplaced. I framed them with a red frame.

The probability of error is about 5%, and our testers and developers cannot reproduce it. But users can always have this situation. It should be related to the type of phone, but I don't have definite evidence. I want to know why.

The following code is my compression method. Accept a File type and return the compressed File.

const pica = require('pica')();

const maxSize = 2097152 // 2M
// const maxSize = 1000000
const isLarge = (size) => {
    return size > 2097152 * 3 // 6M
}
/*
* @params myFile: type is File
* */
export default (myFile) => {
    try {
        return new Promise((res, rej) => {
            let reader = new FileReader();
            reader.readAsDataURL(myFile);
            reader.onload = function (theFile) {
                let image = new Image();
                image.src = theFile.target.result;
                image.onload = function () {
                    const offScreenCanvas = document.createElement('canvas')
                    const big = this.width > 2000 || this.height > 2000
                    const veryBig = this.width > 4000 || this.height > 4000
                    offScreenCanvas.width = veryBig ? this.width * 0.3 : (big ? this.width * 0.5 : this.width)
                    offScreenCanvas.height = veryBig ? this.height * 0.3 : (big ? this.height * 0.5 : this.height)
                    pica.resize(image, offScreenCanvas, {
                        quality: 1,
                    }).then(result => pica.toBlob(result, 'image/jpeg', isLarge(myFile.size) ? 0.4 : 0.6))
                        .then(blob => {
                            let files = new window.File([blob], myFile.name, {type: 'image/jpeg'})
                            if (files.size > maxSize) {
                                rej('图片太大：' + files.size)
                            }
                            res(files) // return new File
                        });
                };
            };
        })
    } catch (e) {
        if (myFile.size > maxSize) {
            return false
        }
        return myFile
    }
}

[XidYu]

Same issue here. try disable wasm and ww features for you Pica instance;like new Pica({features:['js']})

[Vitaly Puzrin]

@wuweikd

• Try v9
• Try reduce .tile to 512
• Try disable webworkers

Let me know if problem is still actual.

[Ivan Nikitin]

• Try reduce .tile to 512

@puzrin why reducing tile size may be helpful?

[Vitaly Puzrin]

@chebum, in theory, that reduces memory consumption 4x (in all concurrent workers), if device has low limits and crashes or abnormal behaviour happens. But i have no conditions to investigate behaviour of all possible hardware.

1024*1024 => 4mb per tile + ~4mb for intermetiate buffer (in v9). With 4 workers => 32mb. Not too much.

The similar effect may be reached with restriction of peak workers or disabling those at all.

[Ivan Nikitin]

@puzrin Disabling web workers also solves accidental STATUS_ACCESS_VIOLATION in Edge 96.0.1054.53. I'm able to reproduce the problem in 100% cases using specific set of images.

Chrome 96.0.4664.93 is working fine, but Chrome 96.0.4664.110 crashes. Disabling WebWorkers does NOT solve the crash in Chrome 96.0.4664.110.

[Vitaly Puzrin]

@chebum i guess, that's another bug, from wasm. Try do disable it. It that helps - try to review source, may be i missed some zero division or byte/word overflow.

Anyway, please report that separate, with example how to reproduce.

[Ivan Nikitin]

Anyway, please report that separate, with example how to reproduce.

That's the hardest part. I was able to reproduce it in the bigger application, but wasn't yet able to reproduce the problem separately :(

I found a fix for Chrome as well - I have to clone source canvas before passing it to pica.resize. This way it worked even with web workers. Cloning source canvas solved the problem both in Edge and Chrome.

I tested with 7.0.0 as well. It behaves the same way as 9.0.0, so I doubt it's the latest change.

Will report in a separate issue if I find more information about it.

[Vitaly Puzrin]

I tested with 7.0.0 as well. It behaves the same way as 9.0.0, so I doubt it's the latest change.

Thank you for info, that's important to know for me.

In our app, uploader has 2 stage resizer - client-side & server-side. If client-side code fails, image is sent "as is".

[Piotr]

Ihre Bibliothek ist großartig, aber ich habe einige Probleme

Ich weiß nicht, was ich falsch gemacht habe, und gelegentlich werden einige Bilder verlegt. Ich habe sie mit einem roten Rahmen eingerahmt.

Die Fehlerwahrscheinlichkeit liegt bei ca. 5 % und kann von unseren Testern und Entwicklern nicht reproduziert werden. Aber Benutzer können diese Situation immer haben. Es sollte mit der Art des Telefons zusammenhängen, aber ich habe keine eindeutigen Beweise. Ich will wissen warum.

Der folgende Code ist meine Komprimierungsmethode. Akzeptieren Sie einen Dateityp und geben Sie die komprimierte Datei zurück.

const pica = require('pica')();

const maxSize = 2097152 // 2M
// const maxSize = 1000000
const isLarge = (size) => {
    return size > 2097152 * 3 // 6M
}
/*
* @params myFile: type is File
* */
export default (myFile) => {
    try {
        return new Promise((res, rej) => {
            let reader = new FileReader();
            reader.readAsDataURL(myFile);
            reader.onload = function (theFile) {
                let image = new Image();
                image.src = theFile.target.result;
                image.onload = function () {
                    const offScreenCanvas = document.createElement('canvas')
                    const big = this.width > 2000 || this.height > 2000
                    const veryBig = this.width > 4000 || this.height > 4000
                    offScreenCanvas.width = veryBig ? this.width * 0.3 : (big ? this.width * 0.5 : this.width)
                    offScreenCanvas.height = veryBig ? this.height * 0.3 : (big ? this.height * 0.5 : this.height)
                    pica.resize(image, offScreenCanvas, {
                        quality: 1,
                    }).then(result => pica.toBlob(result, 'image/jpeg', isLarge(myFile.size) ? 0.4 : 0.6))
                        .then(blob => {
                            let files = new window.File([blob], myFile.name, {type: 'image/jpeg'})
                            if (files.size > maxSize) {
                                rej('图片太大：' + files.size)
                            }
                            res(files) // return new File
                        });
                };
            };
        })
    } catch (e) {
        if (myFile.size > maxSize) {
            return false
        }
        return myFile
    }
}

Gu