Add Support for willReadFrequently to Optimize Canvas Readback Performance

[ZaitsevDV]

Feature Description:
The willReadFrequently attribute in the HTML Canvas API is a performance optimization hint that can be provided to the browser when frequently reading data from a canvas. This is particularly useful for applications that perform heavy data manipulation tasks in real-time, such as barcode scanning libraries. The attribute hints to the browser that the canvas will be frequently read from, which can help optimize how the canvas data is stored and accessed, potentially improving performance on some platforms.

Proposed Change:
I propose that the @zxing/ngx-scanner library includes an option to enable the willReadFrequently flag when setting up the canvas context for reading barcodes. This can be controlled via a component/directive input so that it can be optionally enabled by developers depending on their specific use case.

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

Potentially reduces the performance overhead associated with the frequent readback operations from the canvas when decoding barcodes.
Improves the responsiveness and efficiency of the barcode scanning process, especially on devices with limited resources or in complex web applications where multiple operations are being performed simultaneously.

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

Additional Notes:

The implementation should ensure that it falls back gracefully in browsers that do not support this attribute.
Testing should be performed to measure the actual performance impact on different devices and under different conditions to document when this feature is beneficial.
Thank you for considering this feature. I believe it would make a valuable addition to the @zxing/ngx-scanner and benefit many users who rely on intensive canvas operations within their applications.

[werthdavid]

Thanks for the issue. I looked into it and this is already there:

library/src/browser/BrowserCodeReader.ts

Line 958 in 7b0f4e9

ctx = elem.getContext('2d', {willReadFrequently: true}) as CanvasRenderingContext2D;