Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Support for willReadFrequently to Optimize Canvas Readback Performance #556

Open
ZaitsevDV opened this issue Apr 21, 2024 · 2 comments

Comments

@ZaitsevDV
Copy link

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
Copy link
Member

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
Copy link
Author

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants