zxing-js / ngx-scanner

Angular QR code, Barcode, DataMatrix, scanner component using ZXing.
https://zxing-js.github.io/ngx-scanner/
MIT License
629 stars 225 forks source link

Add Support for willReadFrequently to Optimize Canvas Readback Performance #556

Open ZaitsevDV opened 3 months ago

ZaitsevDV commented 3 months ago

Feature Description The willReadFrequently attribute in the HTML Canvas API optimizes performance by informing the browser that frequent read operations will be performed on the canvas. This is especially beneficial for real-time data manipulation tasks, such as those performed in barcode scanning applications.

Proposed Change I suggest adding an option to the @zxing/ngx-scanner library to enable the willReadFrequently flag when establishing the canvas context for barcode scanning. This could be implemented as a component or directive input, allowing developers to enable it based on their application needs.

Example Usage <zxing-scanner [willReadFrequently]="true" ...></zxing-scanner>

Benefits Performance Improvement: May reduce the overhead associated with frequent canvas readback operations during barcode decoding. Efficiency: Enhances the responsiveness and efficiency of barcode scanning, particularly on resource-constrained devices or within complex web applications.

Possible Implementation

const canvas = document.createElement('canvas');
const contextOptions = { willReadFrequently: this.willReadFrequently };
const context = canvas.getContext('2d', contextOptions);

Additional Notes Compatibility should be ensured so that the feature degrades gracefully in browsers that do not support this attribute. Performance testing should be conducted across various devices and conditions to empirically establish the benefits of this enhancement.

Thank you for considering this feature addition. It would not only improve @zxing/ngx-scanner but also aid developers who depend on intensive canvas operations within their applications.

werthdavid commented 3 months ago

Hey, I did take a look at the code. Thing is: the canvas is part of https://github.com/zxing-js/library Would you mind opening the same issue there? Then I can create a PR that refers to the issue ID...

ZaitsevDV commented 3 months ago

Hello! I've taken care of opening the issue on the zxing-js/library GitHub repository as requested. You can now proceed with creating a PR that refers to the issue ID. If you need any further assistance or have more questions, just let me know!